代码如下:
Ext.onReady(function(){ //定义列 var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '名称', dataIndex: 'name'}, {header: '描述', dataIndex: 'des'} ]); //数据定义 var data = [ ['1001','name1','description1'], ['1002','name1','description1'], ['1003','name1','description1'], ['1004','name1','description1'], ['1005','name1','description1'] ]; //数据源定义 var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({},[ {name: 'id'}, {name: 'name'}, {name: 'des'} ]) }); store.load(); //grid panel var grid = new Ext.grid.GridPanel({ renderTo: Ext.getBody(), store: store, cm: cm }); });
google了一下:In Extjs 4.0 ,there is no colModel config for GridPanel(http://www.sencha.com/forum/showthread.php?199720-Ext.grid.ColumnModel-is-not-a-constructor)然后查看其API:其用法如下
Ext.onReady(function(){ Ext.create('Ext.data.Store', { storeId: 'simpleStore', fields: ['name', 'email', 'phone'], data:{ 'items':[ {'name':'yanshiying', 'email':'email', 'phone':'1234567890'}, {'name':'yanshiying', 'email':'email', 'phone':'1234567890'}, {'name':'yanshiying', 'email':'email', 'phone':'1234567890'} ] }, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } } }); Ext.create('Ext.grid.Panel', { title: 'Simple', store: Ext.data.StoreManager.lookup('simpleStore'), columns: [ {header: 'Name', dataIndex: 'name'}, {header: 'Email', dataIndex: 'email'}, {header: 'Phone', dataIndex: 'phone'} ], height: 200, 400, renderTo: Ext.getBody() }); })
运行效果: