Ext.grid.Panel

柔光的暖阳◎ 2022-08-14 01:39 202阅读 0赞

Basic GridPanel

Code Editor

Live Preview

Select Code

  1. Ext.create('Ext.data.Store', {
  3. storeId:'simpsonsStore',
  5. fields:['name', 'email', 'phone'],
  7. data:{
  8.                'items':[
  10. { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
  12. { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
  14. { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
  16. { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
  18. ]},
  20. proxy: {
  22. type: 'memory',
  24. reader: {
  26. type: 'json',
  28. root: 'items'
  30. }
  32. }
  34. });
  36. Ext.create('Ext.grid.Panel', {
  38. title: 'Simpsons',
  40. store: Ext.data.StoreManager.lookup('simpsonsStore'),
  42. columns: [
  44. { header: 'Name',  dataIndex: 'name' },
  46. { header: 'Email', dataIndex: 'email', flex: 1 },
  48. { header: 'Phone', dataIndex: 'phone' }
  50. ],
  52. height: 200,
  54. width: 400,
  56. renderTo: Ext.getBody()
  58. });

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:

  1. 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

发表评论

表情：
评论列表 （有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读