ExtJS中表格控件的使用,属性设置和数据的获取(国外英语资料).doc

ExtJS中表格控件的使用,属性设置和数据的获取 Brief introduction of tabular features in ExtJS The table is defined by class Ext.grid.GridPanel, inherited from Ext.Panel, and xtype is grid The column information of the table is defined by Ext.grid.ColumnModel The data memory of the table is defined by Ext.data.Store. According to the difference of the analytic data, the data memory can be divided into the following several kinds: JsonStore, SimpleStore, GroupingStore... The basic preparation process of a table: 1, create table column model Var cm = new Ext.grid.ColumnModel ({) {header: role, dataIndex:role}, {header: rank, dataIndex:grade}, {header: dataIndex:createDate creation date, type:,date, renderer: (Ext.util.Format.dateRendererY M D April )} / / create date type data }); 2, creating a data array Var data = [ [the soldiers,7,2011-07-2412:34:56], 10,2011-07-2412:34:56] [the generals, ]; 3, create a data storage object store, contains two parts: proxy, the way to obtain data; reader, the way to parse data The ArrayReader of mapping is used to set the order of columns Var store = new Ext.data.Store ({) Proxy: new Ext.data.MemoryProxy (data), Reader: new Ext.data.ArrayReader ([{}. {name:,role, mapping:, 1}, {name:,grade, mapping:, 0} {name:createDate, mapping: 2, type:date, dateFormat:Y-m-dH:i:s} / / create date column and display format ]) }); Store.load (); 4, create GridPanel, assemble ColumnModel and store Var grid = new Ext.grid.GridPanel ({) RenderTo:grid, Store: store, Cm: cm }); Also, you can use ScriptTagProxy for remote data, as shown below Var store = new Ext.data.Store ({) Proxy: new Ext.data.ScriptTagProxy ({) Url:http://}).., Reader: new Ext.data.ArrayReader ([{}. {name:,role, mapping:, 1}, {name:,grade, mapping:, 0} ]), SortInfo: {field: role direction: ASC} / / set the default row sequence, ASC/DESC }); Table common attribute functions Var grid = new Ext.grid.GridPanel ({) EnableColumnMove: false, / / no drop column EnableColumnResize: false, / / and never change the w