JavaScript in the Ext JS framework of the Gridpanel Component usage Guide _extjs

1 simplest grid Panel
The grid panel is one of the core parts of the ExtJS, which enables you to display, sort, group, and edit data through the grid panel. Model and store are the core of grid panel processing data, and each grid panel must set model and store. To create a grid panel, you first define that Model,model includes all fields that need to be displayed by the grid panel, equivalent to a collection of table field in the database. The store can be thought of as a collection of one row of data or a collection of instances of model, each containing a single or multiple model instances, and the data displayed by the Grid panel is stored in the store. The Grid panel obtains the data from the store and shows that the store uses proxy to read and save the data.
The following creates a grid panel to display the user's basic information, including user name, mailbox, mobile number (name, email, phone), first create user model.

Ext.define (' User ', { 
 extend: ' Ext.data.Model ', 
 fields: [' name ', ' email ', ' phone '] 
}); 

Next, create Store,store is a collection of user, including multiple user instances.

var userstore = ext.create (' Ext.data.Store ', { 
 model: ' User ',///Just created user model 
 data: [ 
 {name: ' Lisa ', email : ' lisa@simpsons.com ', Phone: ' 555-111-1224 '}, 
 {name: ' Bart ', email: ' Bart@simpsons.com ', Phone: ' 555-222-1234 '},< c5/>{name: ' Homer ', email: ' Home@simpsons.com ', Phone: ' 555-222-1244 '}, 
 {name: ' Marge ', email: ' Marge@simpsons.com ', Phone: ' 555-222-1254 '} 
 ] 
}; 

After the model and store are created, you can create a grid panel.

Ext.create (' Ext.grid.Panel ', { 
 renderTo:Ext.getBody (), 
 store:userstore,//Bind the store width:400 created above 
 , 
 height:200, 
 title: ' Application Users ', 
 columns: [ 
 { 
 text: ' Name ', 
 width:100, 
 Sortable:false, 
 Hideable:false, 
 dataindex: Fields displayed in the ' name '//grid panel must be consistent with the fields in user model 
 }, 
 { 
 text: ' Email address ', 
 width:150, 
 dataindex: ' email ', 
 hidden:true 
 }, 
 { 
 text: ' Phone number ', 
 flex:1, 
 dataindex: ' Phone ' 
 } 
 ] 
}; 

The final user grid panel was created as shown in the figure.

2 Grid panel data Grouping (Grouping)
as long as you set the GroupField property in the store, you can group the data displayed in the grid panel. Suppose the company has a lot of employees who need to group the company's employees in a grid panel, grouped by department. First set the GroupField property in the store to department.

Ext.create (' Ext.data.Store ', { 
 model: ' Employee ', 
 data: ..., 
 groupfield: ' Department '// Set the data to be grouped by department 
}); 

Then add the grouping Feature in the grid panel to achieve the grouping display effect.

Ext.create (' Ext.grid.Panel ', { 
 ... 
 ) Features: [{ftype: ' grouping '}] 
}; 

The grouped display effect is shown in the following figure, click here to view the official group display code.

3 Grid Panel Paging display
when the data is more than one page is not complete, you need to page the data display. The grid panel can be paging toolbar and paging scroller two ways to achieve pagination display, paging toolbar has the previous page/Next button, paging scroller is when grid When the panel scrolls through the bottom, it dynamically loads the data.
To implement a paging display, first set up store support paging, set pagesize,pagesize in the store defaults to 25. Set the total number of data totalproperty in reader, paging plug-ins are paginated according to PageSize and Totalproperty. The following code pagesize set to 4,totalproperty is obtained from the total property in the returned JSON data.

Ext.create (' Ext.data.Store ', { 
 model: ' User ', 
 autoload:true, 
 pagesize:4,//Set the number of data displayed per page 
 proxy: { 
 Type: ' Ajax ', 
 URL: ' Data/users.json ', 
 reader: { 
 type: ' json ', 
 root: ' users ',//Specify which attribute from JSON to get the data, If not specified, the Totalproperty is obtained from the JSON's and attributes 
 : ' Total '///Sum of Data}}} 
; 

Suppose the JSON data is formatted as follows

{ 
 "Success": True, 
 "Total": " 
 users": [ 
 {"name": "Lisa", "email": "lisa@simpsons.com", "Phone": " 555-111-1224 "}, 
 {" name ":" Bart "," email ":" bart@simpsons.com "," Phone ":" 555-222-1234 "}, 
 {" name ":" Homer "," E Mail ":" home@simpsons.com "," Phone ":" 555-222-1244 "}, 
 {" name ":" Marge "," email ":" marge@simpsons.com "," Phone ":" 555-222-1254 "} 
 ] 
} 

The store's paging has been set up, below in the grid panel to implement paging toolbar paging function.

Ext.create (' Ext.grid.Panel ', { 
 store:userstore, 
 columns: ..., 
 dockeditems: [{ 
 xtype: ' Pagingtoolbar ',//Add paging toolbar Store:userstore to Grid panel 
 ,///Set paging toolbar store to the same store as grid panel 
 dock: ' Bottom ', 
 displayinfo:true 
 }] 
}; 

Paging Toolbar's paging effect is shown in the following illustration, click here to view the Official Paging toolbar paging feature code.

Paging Scroller's paging implementation is simpler, just set the following code in the Grid panel, and click here to view the official paging Scroller paging feature code.

Ext.create (' Ext.grid.Panel ', { 
 //using paging scroller Paging plugin 
 verticalscroller: ' Paginggridscroller ', 
 //Do Not reset the scrollbar is the view Refreshs 
 invalidatescrolleronrefresh:false, 
 //infinite scrolling does not Support Selection 
 disableselection:true, 
 //... 
}); 

4 Grid Panel Add checkbox
as long as the Selmodel property of the grid panel is set to Ext.selection.CheckboxModel, click here to view the official code example.

Ext.create (' Ext.grid.Panel ', { 
 selModel:Ext.create (' Ext.selection.CheckboxModel '),//Set grid Panel selection mode for CheckBox 
 store:userstore, 
 columns: ... 
}); 

5 Integrated Examples

var Grid = new Ext.grid.GridPanel ({ 
 store//Data source 
 cm//ext.grid.columnmodel 
 columns// function is the same as Ext.grid.columnModel. Have one on the line with cm 
 autowidth:true 
 width 
 title 
 border:false 
 columnlines:true, 
 Renderto/ Displays the ID 
 animcollapse:false//true for the DIV tag as an animated effect (default is True, in case ext.fx is available) for the panel closure process. 
 Collapsible:true,//true The panel can close 
 the Columnlines:true,//true indicates a grid border 
 loadmask:true//Get the Wait interface 
 in the data Striperows:true,//Two-color form 
 plugins:true, 
 bbar:new ext.pagingtoolbar ({ 
 pagesize:10, 
 Store:store, The data source 
 displayinfo:true,//Is True when 
 displaymsg: ' Show {0} to {1} records, total {2} ', 
 emptymsg: ' No record ' 
 }), 
 tbar:[{ 
 text: ' Query ', 
 icon: '/trade/images/delete.gif ', 
 cls: ' X-btn-text-icon ', 
 Handler:function () {win.show ();}}} 
) 

 
//pagingtoolbar Paging 
//upload to Server data start query location, limit to query how many 
//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: ' Last Name ', Width:50, Dataindex: ' Sex ', align: ' center ', Sortable:true, Renderer:function (v) {return (v = = ' 1 ')?  ': '  '}} 
 {header: ' Tracking Number ', Width:150,dataindex: ' Code '}, 
 {header: ' Date ', width:150, dataindex: ' Kd_time '} 
]; 

/*********************************************** 
grid Tbar 
style 
cls: ' X-btn-text-icon ' Add 
********* / 
Editorgridpanel 
 chicktoedit:1//click Times 
 Columnmodel To add editor Editor:new Ext.form.TextField ({ 
 }) 
//Get the modified data 
var storeedit = Grid.getstore ();// 
 var Modified = StoreEdit.modified.slice (0); 
 Ext.each (Modified,function (m) { 
 alert (m.data.id);  Data is in M.data ID is field name 
}) 

Get grid data 
var Selmodel = Grid.getselectionmodel (); Get select mode 
var record; 
if (!selmodel.hasselection ()) { 
 Ext.Msg.alert (' warning ', ' Please select the line to modify! '); 
 return; 
} 
Selmodel.getselections (). length; Number of rows selected 
 
record = selmodel.getselected ()//Get data for select row 

(1) Obtaining data:
Single

id = record.get (' id '); 

Or

id = record.data.id; 

MultiRow

Record[i].get (' DDD ') 

(2) Delete data:

var obj = Grid.getselectionmodel (). getselected (); 
Store.remove (obj); 

(3) Query

store.baseparams[' memid '] = Fb.form.findField (' Memid '). GetValue (); 
store.baseparams[' start ' = 0; 
Store.load (); 

(4) Add a column:
Ext own with a plugin
File Rowexpander.js Required

var expand = new Ext.ux.grid.RowExpander ({ 
 tpl:new ext.template ( 
 ' <p>{address}</p> ' 
 ) 
}); 

Add expand in the columns of the grid,
and add Plugins:expand to the grid attribute.