Ext.grid.Panel 柔光的暖阳◎ 2022-08-14 01:39 156阅读 0赞 ## Basic GridPanel ## Code Editor Live Preview Select Code Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'email', 'phone'], data:{ 'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } } }); Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: Ext.data.StoreManager.lookup('simpsonsStore'), columns: [ { header: 'Name', dataIndex: 'name' }, { header: 'Email', dataIndex: 'email', flex: 1 }, { header: 'Phone', dataIndex: 'phone' } ], height: 200, width: 400, renderTo: Ext.getBody() }); The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline. In most apps we would be placing the grid inside another container and wouldn't need to use the [height][], [width][] and [renderTo][] configurations but they are included here to make it easy to get up and running. The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath and finally the grid rows under the headers. [dockedItems][] : [Object][]/ [Object][]\[\] A component or series of components to be added as docked items to this panel. The docked items can be docked to either the top, right, left or bottom of a panel. This is typically used for things like toolbars or tab bars: var panel = new Ext.panel.Panel({ dockedItems: [{ xtype: 'toolbar', dock: 'top', items: [{ text: 'Docked to the top' }] }] }); 引用自：[http://docs.sencha.com/extjs/4.1.0/\#!/api/Ext.grid.Panel-cfg-dockedItems][http_docs.sencha.com_extjs_4.1.0_api_Ext.grid.Panel-cfg-dockedItems] [height]: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.grid.Panel-cfg-height [width]: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.grid.Panel-cfg-width [renderTo]: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.grid.Panel-cfg-renderTo [dockedItems]: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.panel.Panel-cfg-dockedItems [Object]: http://docs.sencha.com/extjs/4.1.0/#!/api/Object [http_docs.sencha.com_extjs_4.1.0_api_Ext.grid.Panel-cfg-dockedItems]: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.grid.Panel-cfg-dockedItems
还没有评论，来说两句吧...