Ext. Grid. gridpanel

VaR grid = new Ext. Grid. gridpanel ({
Store // Data Source
CM // Ext. Grid. columnmodel
Columns // functions are the same as Ext. Grid. columnmodel. One with CM is enough.
Autowidth: True
Width
Title
Border: false
Columnlines: True,
Renderto // display the ID of the DIV tag
Animcollapse: false // true indicates that an animation is attached to the Panel closure process (true by default, when Ext. FX class is available ).
Collapsible: True, // true indicates that the Panel can be closed
Columnlines: True, // true indicates a grid border
Loadmask: True // wait for the interface to obtain data
Striperows: True, // two-color table
Plugins: True,
Bbar: New Ext. pagingtoolbar ({
Pagesize: 10,
Store: store, // Data Source
Displayinfo: True, // displayed only when the value is true
Displaymsg: 'display records from {0} to {1}, total records from {2 ',
Emptymsg: 'No records'
}),
Tbar :[{
Text: 'query ',
Icon: '/trade/images/delete.gif ',
CLS: 'x-BTN-text-Icon ',
Handler: function () {win. Show ();}
}
})

//************************************** ********
// Pagingtoolbar Paging
// Transfer the data to the server start to query the location, the number of limit queries
// Sort
// Server sort, Dir
//************************************** ********
VaR COM = new Ext. Grid. columnmodel ([
New Ext. Grid. rownumberer (),
{Header: "Customer ID", width: 50, sortable: True, dataindex: 'memid '},
{Header: "customer name", width: 75, sortable: True, dataindex: 'memname '},
{Header: 'bie ', width: 50, dataindex: 'sex', align: 'center', sortable: True, Renderer: function (V) {return (V = '1 ')? '': ' ';}}
{Header: 'tracking No. ', width: 150, dataindex: 'code '},
{Header: 'date', width: 150, dataindex: 'kd _ time '}
]);

/*************************************** ********
Grid tbar
Style
CLS: 'x-BTN-text-Icon 'add
**************************************** **********/
Editorgridpanel
Chicktoedit: 1 // Number of clicks
Add editor Editor: New Ext. Form. textfield ({
})
// Obtain the modified data
VaR storeedit = grid. getstore ();//
VaR modified = storeedit. Modified. Slice (0 );//
Ext. Each (modified, function (m ){
Alert (M. Data. ID); // The data is in M. data where ID is the field name
})
//////////////////////////////////////// //////////////////////////////////////// ////////
// Obtain grid data
VaR selmodel = grid. getselectionmodel (); get the selection mode
VaR record;
If (! Selmodel. hasselection ()){
Ext. msg. Alert ('Warning ',' select the row to be modified! ');
Return;
}
Selmodel. getselections (). length; // number of rows selected

Record = selmodel. getselected (); // obtain the data of the selected row
Get Data
Single Row
Id = record. Get ('id ');
Or
Id = record. Data. ID;
Multiple rows
Record [I]. Get ('ddd ')
Delete data
VaR OBJ = grid. getselectionmodel (). getselected ();
Store. Remove (OBJ );
Grid. getview (). Refresh ();

//////////////////////////////////////// //
Query
Store. baseparams ['memid'] = FB. Form. findfield ('memid'). getvalue ();
Store. baseparams ['start'] = 0;
Store. Load ();

/////////////////////////////////
Add a row or column
EXT plug-in
The file rowexpander. JS is required.
VaR expand = new Ext. UX. Grid. rowexpander ({
TPL: New Ext. template (
'<P> {address} </P>'
)
});
Add expand in the columns of the grid,
Add plugins: expand to the grid attribute.