1 The easiest Grid Panel
Grid Panel is one of the core parts of ExtJS, and data can be displayed, sorted, grouped and edited through Grid Panel. Model and Store are the core of Grid Panel processing data, and each Grid Panel must set up Model and Store. To create a Grid Panel, you must first define the Model. The Model includes all the fields that the Grid Panel needs to display, which is equivalent to a collection of table fields in the database. The Store can be regarded as a collection of a row of data or a collection of Model instances. Each Store contains one or more Model instances, and the data displayed by the Grid Panel is stored in the Store. Grid Panel obtains data through the Store and displays it, while Store reads and saves data through Proxy.
Below is a Grid Panel to display the basic information of the user, including user name, email, mobile phone number (name, email, phone), and first create a user model (User Model).
Ext.define('User', { extend: 'Ext.data.Model', fields: [ 'name', 'email', 'phone' ] });Next, create a Store, which is a collection of Users, including multiple User instances.
var userStore = Ext.create('Ext.data.Store', { model: 'User', //User Model data just created: [ { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' }, { name: 'Bart', email: '[email protected]', phone: '555-222-1234' }, { name: 'Homer', email: '[email protected]', phone: '555-222-1244' }, { name: 'Marge', email: '[email protected]', phone: '555-222-1254' } ] });After both the Model and the Store are created, you can create a Grid Panel.
Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), store: userStore, //Bind the Store width: 400, height: 200, title: 'Application Users', columns: [ { text: 'Name', width: 100, sortable: false, hideable: false, dataIndex: 'name' //The fields displayed in the Grid Panel must be the same as those in the User Model}, { text: 'Email Address', width: 150, dataIndex: 'email', hidden: true }, { text: 'Phone Number', flex: 1, dataIndex: 'phone' } ] });The last user Grid Panel is shown in the figure.
2 Grid Panel Data Grouping (Grouping)
As long as the groupField property is set in the Store, the data displayed by the Grid Panel can be grouped. Suppose the company has many employees and needs to group the company's employees by department in the Grid Panel. First, set the groupField property to department in the Store.
Ext.create('Ext.data.Store', { model: 'Employee', data: ..., groupField: 'department' //Set data grouped by department});Then add grouping Feature to the Grid Panel to achieve grouping display effect.
Ext.create('Ext.grid.Panel', { ... features: [{ ftype: 'grouping' }] });The group display effect is shown in the figure below. Click here to view the official group display code.
3 Grid Panel pagination display
When there are more data and more pages to display, the data needs to be displayed paging. Grid Panel can realize pagination display through two methods: Paging Toolbar and Paging Scroller. Paging Toolbar has the previous page/next page buttons. Paging Scroller dynamically loads data when the Grid Panel scrolls to the bottom.
To implement pagination display, you must first set the Store to support pagination. Set pageSize in the Store. The default pageSize is 25. Set the total number of data in the reader totalProperty, and the paging plugin pagins according to pageSize and totalProperty. The following code is set to 4, and totalProperty is obtained from 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 property of json to get data. If not specified, get totalProperty from json's related attribute: 'total' //Total data quantity} } });Assume that the json data format is as follows
{ "success": true, "total": 12, "users": [ { "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" }, { "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" }, { "name": "Home", "email": "[email protected]", "phone": "555-222-1244" }, { "name": "Marge", "email": "[email protected]", "phone": "555-222-1254" } ] }The paging of the Store has been set up. The Paging Toolbar paging function is implemented in the Grid Panel.
Ext.create('Ext.grid.Panel', { store: userStore, columns: ..., dockedItems: [{ xtype: 'pagingtoolbar', //Add paging toolbar store: userStore, //Set the paging toolbar store to the same as the Grid Panel's Store dock: 'bottom', displayInfo: true }] });The paging effect of Paging Toolbar is shown in the figure below. Click here to view the official Paging Toolbar paging function code.
The paging implementation of Paging Scroller is relatively simple. Just set the following code in the Grid Panel. Click here to view the official Paging Scroller paging function code.
Ext.create('Ext.grid.Panel', { //Use the Paging Scroller paging plugin verticalScroller: 'paginggridscroller', // do not reset the scrollbar when the view refreshs invalidateScrollerOnRefresh: false, // infinite scrolling does not support selection disableSelection: true, // ... });4 Grid Panel Add Checkbox
Just set the selModel property of Grid Panel to Ext.selection.CheckboxModel, click here to view the official code example.
Ext.create('Ext.grid.Panel', { selModel: Ext.create('Ext.selection.CheckboxModel'), //Set the selection mode of Grid Panel to Checkbox store: userStore, columns: ... });5 Comprehensive Examples
var grid = new Ext.grid.GridPanel({ store //data source cm //Ext.grid.columnModel columns //Functions are the same as Ext.grid.columnModel. Just have one with cm autoWidth:true width title border:false columnLines: true, renderTo //Display the id of the div tag animCollapse:false //True is expressed as the panel closing process with animation effect (default is true, when class Ext.Fx is available). collapse: true, //true means that the panel can be closed columnLines: true, //true means gridded border loadMask:true //When getting data, there is a waiting interface stripeRows: true, //Dual-color table plugins: true, bbar:new Ext.PagingToolbar({ pageSize:10, store:store, //Data source displayInfo:true, //Document source displayInfo:true, //DocumentationMsg:'Show the records from {0} to {1}, a total of {2}', emptyMsg:'No record' }), tbar:[{ text:'Query', icon:'/trade/images/delete.gif', cls:'x-btn-text-icon', handler:function(){win.show();} } }) //********************************************* //PagingToolbar paging//Passing to server data start querying location, limit how many items to query //Sorting//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:'Secret No.', width:50, dataIndex:'sex', align:'center', sortable:true, renderer:function(v){return (v == '1')?'<img src="images/user_suit.png">':'<img src="images/user_female.png">';}} {header: 'Tracking Number', width:150, dataIndex:'code'}, {header: 'Date', width:150, dataIndex: 'kd_time'} ]); /******************************************************************************************/ EditorGridPanel chickToEdit:1 //Number of clicks ColumnModel editor:new Ext.form.TextField({ }) //Get 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 and id is the field name}) //Get grid data var selModel = grid.getSelectionModel(); Get selection mode var record; if(!selModel.hasSelection()){ Ext.Msg.alert('Warning','Please select the row to be modified!'); return; } selModel.getSelections().length; //Number of selected rows record = selModel.getSelected(); //Get data of selected rows(1) Obtain data:
Single line
id = record.get('id');or
id = record.data.id;
Multiple lines
record[i].get('ddd')(2) Delete data:
var obj = grid.getSelectionModel().getSelected(); store.remove(obj); grid.getView().refresh();
(3) Query
store.baseParams['memid'] = fb.form.findField('memid').getValue(); store.baseParams['start'] = 0; store.load();(4) Add a row:
Ext brings a plugin
Requires file RowExpander.js
var expand = new Ext.ux.grid.RowExpander({ tpl : new Ext.Template( '<p>{address}</p>' ) });Add expand to grid columns,
And add plugins: expand to grid attribute