ExtJS 4常用组件之表格
简介
ExtJS 4中表格、树具有共同的基类：Ext.panel.Table。ExtJS 4为表格引入了无限滚动的特性：仅渲染需要使用的特性，而不是像ExtJS 3一样把所有结构都渲染出来。
Grid的两大要素是Store和Columns，前者提供数据来源，后者定义表格包含哪些列。下面是一个简单表格的例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
Ext.create( 'Ext.grid.Panel', { store : Ext.create( 'Ext.data.ArrayStore', { fields : [ //匿名模型声明 { name : 'book' }, { name : 'author' } ], data : [ [ 'C++Primer第四版', 'Stanley B.Lippman' ] ] } ), columns : [ { text : 'Book', flex : 1, sortable : false, dataIndex : 'book' }, { text : 'Author', width : 100, sortable : true, dataIndex : 'author' } ], height : 80, width : 300, title : 'Books', renderTo : Ext.getBody() } ); |
列（Columns）
ExtJS 4把所有类型的列统一组织到Ext.grid.column包中。下面的例子包含各类型的列的使用方式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
//定义一个模型 Ext.define( 'Book', { extend : 'Ext.data.Model', fields : [ { name : 'book' }, { name : 'topic', type : 'string' }, { name : 'version', type : 'string' }, { name : 'released', type : 'boolean' }, { name : 'releasedDate', type : 'date' }, { name : 'value', type : 'number' } ] } ); //定义一个存储 var store = Ext.create( 'Ext.data.ArrayStore', { model : 'Book', data : [ [ 'Boost程序库完全开发指南', 'Boost', '1', false, null, 52.00 ], [ 'C++ 程序设计(第二版)', 'C++', '2.0', true, '2010/10/03', 44.30 ], [ 'Head First Python', 'Python', '5', true, '2011/12/05', 63.50 ], [ 'JavaScript权威指南（第六版）', 'JavaScript', '6.0', true, '2013/11/01', 90.00 ] ] } ); //声明一个表格 Ext.create( 'Ext.grid.Panel', { store : store, width : 550, title : 'Programming Books', renderTo : 'grid-example', //第一个列，被声明为选择模型。在ExtJS 3中为sm。显示一个复选框。 selModel : Ext.create( 'Ext.selection.CheckboxModel' ), //1 columns : [ //自动添加的行号列 Ext.create( 'Ext.grid.RowNumberer' ), //不指定列类型，将直接把数据作为字符串显示 { text : 'Book', flex : 1, dataIndex : 'book' }, //模板列，使用指定的模板来生成列的内容 { text : 'Category', xtype : 'templatecolumn', width : 100, tpl : '{topic} {version}' //XTemplate }, //布尔列，默认显示true或者false { text : 'Already Released?', xtype : 'booleancolumn', width : 100, dataIndex : 'released', trueText : 'Yes', //自定义显示文本 falseText : 'No' }, //日期列 { text : 'Released Date', xtype : 'datecolumn', width : 100, dataIndex : 'releasedDate', format : 'm-Y' //遵循PHP日期格式 }, //数字列 { text : 'Price', xtype : 'numbercolumn', width : 80, dataIndex : 'value', renderer : Ext.util.Format.usMoney //可以指定用作渲染器的转换函数 }, //动作列，可以包含若干图标 { xtype : 'actioncolumn', width : 50, items : [ { icon : 'images/edit.png', //图标文件 tooltip : 'Edit', handler : function( grid, rowIndex, colIndex ) { //传入参数分别为表格、行索引、列索引 } }, { icon : 'images/delete.gif', tooltip : 'Delete', handler : function( grid, rowIndex, colIndex ) { } } ] } ] } ); |
特性支持（Feature support）
如果需要为Grid添加一项新功能，通常有两种选择：创建一个插件（Plugin），或者继承GridPanel类。ExtJS 4引入Ext.grid.feature.Feature类，提供了一些基础函数、属性，便于自定义插件的创建。在Ext.grid.feature包中，包含了AbstractSummary、Chunking、Feature、Grouping、GroupingSummary、RowBody、Summary等七个类与这种插件机制有关。如果想使用某个特性，只需要为Grid添加一个配置项：
|
1 2 3 4 5 6 |
features : [ { groupHeaderTpl : 'Publisher: {name}', ftype : 'groupingsummary' //feature type } ] |
Ext.grid.feature.Grouping
ExtJS 4中，分组变成了一种特性，可以通过添加features属性使用分组：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
Ext.define( 'Book', { extend : 'Ext.data.Model', fields : [ 'name', 'topic' ] } ); var Books = Ext.create( 'Ext.data.Store', { model : 'Book', groupField : 'topic', //分组所依据的列 data : [ { name : 'Learning Ext JS', topic : 'Ext JS' }, { name : 'Learning Ext JS 3.2', topic : 'Ext JS' }, { name : 'Ext JS 3.0 Cookbook', topic : 'Ext JS' }, { name : 'Expert PHP 5 Tools', topic : 'PHP' }, { name : 'NetBeans IDE 7 Cookbook', topic : 'Java' }, { name : 'iReport 3.7', topic : 'Java' }, { name : 'Python Multimedia', topic : 'Python' }, { name : 'NHibernate 3.0 Cookbook', topic : '.NET' }, { name : 'ASP.NET MVC 2 Cookbook', topic : '.NET' } ] } ); Ext.create( 'Ext.grid.Panel', { renderTo : Ext.getBody(), frame : true, store : Books, width : 350, height : 400, title : 'Books', features : [ //添加分组特性。在ExtJS 3中需要配置 view: new Ext.grid.GroupingView() Ext.create( 'Ext.grid.feature.Grouping', { groupHeaderTpl : 'topic: {name} ({rows.length} Book{[values.rows.length > 1 ? "s" : ""]})' } ) ], columns : [ { text : 'Name', flex : 1, dataIndex : 'name' }, { text : 'Topic', flex : 1, dataIndex : 'topic' } ] } ); |
运行结果如下图：
Ext.grid.feature.GroupingSummary
与Grouping类似，在每个分组的尾部添加一个summary row：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
Ext.create( 'Ext.grid.Panel', { renderTo : Ext.getBody(), frame : true, store : Books, width : 350, height : 400, title : 'Books', features : [ { groupHeaderTpl : 'Topic: {name}', ftype : 'groupingsummary' } ], columns : [ { text : 'Name', flex : 1, dataIndex : 'name', summaryType : 'count', //还支持sum, min, max, average summaryRenderer : function( value ) { return Ext.String.format( '{0} book{1}', value, value !== 1 ? 's' : '' ); } }, { text : 'Topic', flex : 1, dataIndex : 'topic' } ] } ); |
Ext.grid.feature.Summary
在每个分组的尾部添加一个summary row，用于与上面的GroupingSummary类似。
Ext.grid.feature.RowBody
rowbody特性可以在每一行之后添加一行（tr-td-div），可以显示额外的信息：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Ext.create( 'Ext.grid.Panel', { renderTo : Ext.getBody(), frame : true, store : Books, width : 350, height : 300, title : 'Books', features : [ { ftype : 'rowbody', getAdditionalData : function( data, idx, record, orig ) { return { rowBody : Ext.String.format( ' |
topic: {0}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
', data.topic ) }; } }, { ftype : 'rowwrap' } ], columns : [ { text : 'Name', flex : 1, dataIndex : 'name' } ] } ); |
表格插件
Ext.grid.plugin包提供了若干插件，例如：Editing、CellEditing、RowEditing、HeaderResizing、DragDrop。 Ext.grid.plugin.Editing提供了用于编辑表格的通用方法、属性，包括CellEditing、RowEditing两个子类。
单元格编辑（Ext.grid.plugin.CellEditing）
该插件支持编辑某个特定单元格中的数据，点击单元格可以激活编辑器。下面是一个例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
Ext.define( 'Contact', { extend : 'Ext.data.Model', fields : [ 'name', 'email', 'phone' ] } ); var Contacts = Ext.create( 'Ext.data.Store', { model : 'Contact', data : [ { name : 'Loiane', email : 'me@loiane.com', phone : '1234-5678' }, { name : 'Peter', email : 'peter@email.com', phone : '2222-2222' }, { name : 'Ane', email : 'ane@email.com', phone : '3333-3333' }, { name : 'Harry', email : 'harry@email.com', phone : '4444-4444' }, { name : 'Camile', email : 'camile@email.com', phone : '5555-5555' } ] } ); Ext.create( 'Ext.grid.Panel', { renderTo : Ext.getBody(), frame : true, store : Contacts, width : 350, title : 'Contacts', //选择模型，默认是rowModel，即点击后选中整个行。这里点击后选中被点击单元格 selType : 'cellmodel', columns : [ { text : 'Name', flex : 1, dataIndex : 'name' }, { text : 'Email', flex : 1, dataIndex : 'email', //对于支持编辑的列，需要指定Ext.form.field.Field类型的editor属性 editor : { xtype : 'textfield', allowBlank : false } }, { text : 'Phone', flex : 1, dataIndex : 'phone', editor : { xtype : 'textfield', allowBlank : false } } ], plugins : [ //插件声明：单元格编辑 Ext.create( 'Ext.grid.plugin.CellEditing', { clicksToEdit : 1 } ) ] } ); |
行编辑（Ext.grid.plugin.RowEditing）
用法与单元格编辑类似：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
Ext.create( 'Ext.grid.Panel', { renderTo : Ext.getBody(), frame : true, store : Contacts, width : 350, title : 'Contacts', selType : 'rowmodel', columns : [ { text : 'Name', flex : 1, dataIndex : 'name' }, { text : 'Email', flex : 1, dataIndex : 'email', editor : { xtype : 'textfield', allowBlank : false } }, { text : 'Phone', flex : 1, dataIndex : 'phone', editor : { xtype : 'textfield', allowBlank : false } } ], plugins : [ Ext.create( 'Ext.grid.plugin.RowEditing', { clicksToEdit : 1 } ) ] } ); |
无限滚动
ExtJS 4为表格引入了无限滚动（infinite scrolling）特性，可以在不使用分页的情况下显示数以千计的行。下面是一个例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
Ext.define( 'Book', { extend : 'Ext.data.Model', fields : [ { name : 'book' }, { name : 'pages', type : 'int' } ] } ); var store = Ext.create( 'Ext.data.Store', { id : 'store', pageSize : 50, //每次缓存数据的条数 buffered : true,//用于缓冲、预读取数据 purgePageCount : 0, //在使用LRU算法清理缓存时，最多缓存的额外页数。设置为0永不清理缓存的数据 model : 'Book', proxy : { type : 'ajax', url : 'data/infinite.json', reader : { type : 'json', root : 'data' } } } ); store.guaranteeRange( 0, 49 ); //确保指定范围的数据被加载 var grid = Ext.create( 'Ext.grid.Panel', { width : 400, height : 500, store : store, verticalScrollerType : 'paginggridscroller', invalidateScrollerOnRefresh : false, //刷新视图时不更新滚动条 disableSelection : true, //禁用选取 columns : [ { text : 'Book Name', flex : 1, sortable : true, dataIndex : 'book' }, { text : 'Pages', width : 125, sortable : true, dataIndex : 'pages' } ], renderTo : Ext.getBody() } ); |
Leave a Reply