Use of Editorgridpanel and renderer renderer

In Editorgriddpanel, you can embed some form controls, and you can customize the renderer. Here's an example I wrote:

Effect Chart:

Ext.onready (function () {
Createviewpoint ();
Createtreepanel ();
Creategridpanel ();
});

function Createviewpoint () {
var borderpanel = new Ext.viewport ({
RenderTo:Ext.getBody (),
Layout: ' Border ',
Items: [{
Region: ' North ',
Autoheight:true,
Border:false
}, {
ID: ' Treepanel ',
Region: ' West ',
Collapsable:true,
Title: ' Main Menu ',
Width: ' 200 '
}, {
Region: ' South ',
Title: ' Title for Panel ',
Collapsible:true,
HTML: ' Information goes here ',
Split:true,
HEIGHT:100,
minheight:100
}, {
ID: ' Qqpanel ',
Region: ' Center ',
Xtype: ' TabPanel ',//TabPanel itself has no title
Items: [{
Title: ' Home '
}],
activetab:0
}]
});
}

function Createtreepanel () {
Create RootNode
var rootnode = new Ext.tree.TreeNode ({
Text: ' Main Menu '
});
Rootnode.appendchild (New Ext.tree.TreeNode ({
Text: ' Child node One '
}));
Rootnode.appendchild (New Ext.tree.TreeNode ({
Text: ' Child node two '
}))

var treepanel = new Ext.tree.TreePanel ({
RENDERTO:EXT.GETCMP (' Treepanel '). Body,
Root:rootnode,
Border:false,
Listeners: {
' Click ': Function (node, e) {
Creategridpanel (node);
}
}
});
}

function Creategridpanel (node) {

if (node.text!= ' child Node One ') {
Return
}
var gridpaneltab = ext.getcmp (' gridpanelid ');
if (typeof gridpanel!= ' undefined ') {
EXT.GETCMP (' Qqpanel '). Activate (Gridpaneltab);
}
First set up a store
var simpstore = new Ext.data.JsonStore ({
URL: '/extdemo/getdata ',
Fields: [' age ', {
Name: ' Birthday ',
Type: ' Date ',
Mapping: ' Birthday.time ',
DateFormat: ' Time '
}, ' id ', ' name ', ' sex ',
WAITMSG: ' Data Loading ... '
});
Simpstore.load ();
Build a grid-display model
var gridmode = new Ext.grid.ColumnModel ([{
Header: ' User ID ',
Dataindex: ' ID '
}, {
Header: ' username ',
Dataindex: ' Name ',
Editor:new Ext.form.TextField ({
Allowblank:false
})
}, {
Header: ' Age ',
Dataindex: ' Age ',
Editor:new Ext.form.TextField ({
Allowblank:false
})
}, {
Header: ' Birthday ',
Dataindex: ' Birthday ',//Add date control below
Editor:new Ext.form.DateField ({
Allowblank:false,
Format: ' y-m-d '
}),
Renderer:Ext.util.Format.dateRenderer (' y-m-d ')/date format renderer
}, {
Header: ' Sex ',
Dataindex: ' Sex ',
Editor:new Ext.form.ComboBox ({
Name: ' Sex ',
Forceselection:true,
Store:new Ext.data.SimpleStore ({
Fields: [' value ', ' text '],
Data: [[0, ' female '], [1, ' Male ']]
}),
Mode: ' Local ',
Valuefield: ' Value ',
Displayfield: ' Text ',
TriggerAction: ' All ',
Readonly:true
}),
Renderer:function (v) {//self-defined renderer, O (∩_∩) o haha ~
if (v = = 0) {
Return to ' female ';
}
return ' male ';
}
}]);
Build a gridpanel based on the above two foundations
var gridpanel = new Ext.grid.EditorGridPanel ({
Store:simpstore,
Colmodel:gridmode,
width:530,
HEIGHT:200,
Buttons: [{
Text: ' Submit ',
Handler:function () {
Commit ();
}
}]
});
EXT.GETCMP (' Qqpanel '). Add ({
ID: ' Gridpanelid ',
Title: ' Data page ',
Items: [Gridpanel]
). Show ();
The following is an action to register the right key event and add the right button menu
var rigthclickmenu = new Ext.menu.Menu ({
Items: [{
Text: ' Copy ',
Handler:function () {
Alert (' hh ');
}
}, {
Text: ' Paste '
}]
});
Gridpanel.on (' Rowcontextmenu ', function (Gridpanel, RowIndex, e) {
E.preventdefault ();
Rigthclickmenu.showat (E.getxy ());
});
}

The following is the event-handling method area, just for testing, ===============================================================================

function commit () {
var combox = new Ext.form.ComboBox ({
Fieldlabel: ' Sex ',
Name: ' Sext ',
Store:new Ext.data.SimpleStore ({
Fields: [' Text ', ' value '],
Data: [[' Male ', ' 0 '],[', ' 1 ']]
}),
Displayfield: ' Text ',
Valuefield: ' Value ',
Readonly:true,
Mode: ' Local ',
TriggerAction: ' All '
});

var win = new Ext.window ({
Width: ' 200 ',
Items: [Combox]
});

Win.show ();
}