Ext JS GridPanel组件使用指南

作者：技术拾光

时间：2026-06-11

在ExtJS开发中，数据表格（Grid Panel）几乎是每个项目都会用到的核心组件。它能够规整地展示数据，并且支持排序、分组、编辑、分页以及复选框选择，功能十分强大。下面从最基础的用户信息表开始，逐步拆解Grid Panel的搭建流程。 1 最简单的Grid Panel Grid Panel是Ex

文章目录

在ExtJS开发中，数据表格（Grid Panel）几乎是每个项目都会用到的核心组件。它能够规整地展示数据，并且支持排序、分组、编辑、分页以及复选框选择，功能十分强大。下面从最基础的用户信息表开始，逐步拆解Grid Panel的搭建流程。

1 最简单的Grid Panel

Grid Panel是ExtJS的核心部分，通过它可以直接对数据进行显示、排序、分组和编辑。而Model和Store是Grid Panel处理数据的两个基石——每个Grid Panel都必须绑定这两样元素。

Model相当于数据库中的表结构，定义了Grid Panel需要显示的所有字段；Store则是Model实例的集合，可以理解为一整张“数据表”。Grid Panel的数据全部存储在Store中，它通过Store获取数据并渲染到界面上，而Store则借助Proxy来完成数据的读取和保存。

下面先创建一个用户模型（User Model），包含用户名、邮箱、手机号三个字段。

Ext.define('User', { 
 extend: 'Ext.data.Model', 
 fields: [ 'name', 'email', 'phone' ] 
});

接着创建Store，它本质上就是多个User实例的集合。

var userStore = Ext.create('Ext.data.Store', { 
 model: 'User',
 data: [ 
 { 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' } 
 ] 
});

Model和Store都就绪之后，就可以创建Grid Panel了。

Ext.create('Ext.grid.Panel', { 
 renderTo: Ext.getBody(), 
 store: userStore,
 width: 400, 
 height: 200, 
 title: 'Application Users', 
 columns: [ 
 { 
 text: 'Name', 
 width: 100, 
 sortable: false, 
 hideable: false, 
 dataIndex: 'name'
 }, 
 { 
 text: 'Email Address', 
 width: 150, 
 dataIndex: 'email', 
 hidden: true 
 }, 
 { 
 text: 'Phone Number', 
 flex: 1, 
 dataIndex: 'phone' 
 } 
 ] 
});

最终呈现的用户表格如下图所示：

Ext JS GridPanel组件使用指南

2 Grid Panel数据分组（Grouping）

当数据量较大时，按某个字段分组显示会让信息更加清晰。实现起来也很简单：只需在Store中设置groupField属性即可。假设公司所有员工需要按部门分组显示，先配置Store：

Ext.create('Ext.data.Store', { 
 model: 'Employee', 
 data: ...,
 groupField: 'department'
});

然后在Grid Panel中添加一个分组功能（Feature）：

Ext.create('Ext.grid.Panel', { 
 ...,
 features: [{ ftype: 'grouping' }] 
});

效果如下图所示，点击这里查看官方分组显示代码。

Ext JS GridPanel组件使用指南

3 Grid Panel分页显示

当数据列表较长时，分页是必不可少的。ExtJS提供了两种分页方式：Paging Toolbar（带翻页按钮）和Paging Scroller（滚动到底部自动加载）。

分页的第一步是让Store支持分页，设置pageSize（默认25），并在reader中指定数据总条数对应的属性名totalProperty。下面设置每页显示4条，总条数从JSON的total字段读取：

Ext.create('Ext.data.Store', { 
 model: 'User', 
 autoLoad: true, 
 pageSize: 4,
 proxy: { 
 type: 'ajax', 
 url : 'data/users.json', 
 reader: { 
 type: 'json', 
 root: 'users',
 totalProperty: 'total'
 } 
 } 
});

对应的JSON数据格式如下：

{ 
 "success": true, 
 "total": 12, 
 "users": [ 
 { "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" } 
 ] 
}

Store配置完成后，在Grid Panel底部添加一个Paging Toolbar即可：

Ext.create('Ext.grid.Panel', { 
 store: userStore, 
 columns: ...,
 dockedItems: [{ 
 xtype: 'pagingtoolbar', 
 store: userStore,
 dock: 'bottom', 
 displayInfo: true 
 }] 
});

Paging Toolbar的效果如下，点击这里查看官方Paging Toolbar分页功能代码。

Ext JS GridPanel组件使用指南

如果更偏爱滚动加载，改成Paging Scroller也很简单：

Ext.create('Ext.grid.Panel', { 
 verticalScroller: 'paginggridscroller', 
 invalidateScrollerOnRefresh: false, 
 disableSelection: true,
 ...
});

点击这里查看官方Paging Scroller分页功能代码。

4 Grid Panel添加Checkbox

想要给每一行前面加个复选框？只需设置selModel属性为Ext.selection.CheckboxModel即可。点击这里查看官方代码实例。

Ext.create('Ext.grid.Panel', { 
 selModel: Ext.create('Ext.selection.CheckboxModel'),
 store: userStore, 
 columns: ...
});

5 综合示例

下面是一个综合性的Grid Panel配置，包含了数据源、列模型、分页工具栏、顶部按钮等多种常用设置：

var grid = new Ext.grid.GridPanel({ 
 store,
 cm,
 columns,
 autoWidth: true,
 width,
 title,
 border: false,
 columnLines: true,
 renderTo,
 animCollapse: false,
 collapsible: true,
 columnLines: true,
 loadMask: true,
 stripeRows: true,
 plugins: true,
 bbar: new Ext.PagingToolbar({
 pageSize: 10,
 store: store,
 displayInfo: true,
 displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
 emptyMsg: '没有记录'
 }),
 tbar: [{
 text: '查询',
 icon: '/trade/images/delete.gif',
 cls: 'x-btn-text-icon',
 handler: function() { win.show(); }
 }]
})

// PagingToolbar分页
// 传到服务器数据：start开始查询位置，limit要查询多少条
// 排序：服务器接收sort,dir
var com = new Ext.grid.ColumnModel([
 new Ext.grid.RowNumberer(),
 {header: "客户ID", width: 50, sortable: true, dataIndex: 'memid'},
 {header: "客户姓名", width: 75, sortable: true, dataIndex: 'memName'},
 {header:'姓别', width:50, dataIndex:'sex', align:'center', sortable:true, renderer:function(v){
 return (v == '1')  '' : '';
 }},
 {header: '跟踪号',width:150,dataIndex:'code'},
 {header: '日期', width:150, dataIndex: 'kd_time'}
]);

// grid tbar 样式，cls:'x-btn-text-icon' 添加
// EditorGridPanel 设置 clickToEdit:1，ColumnModel中加 editor: new Ext.form.TextField({})
// 获取修改后的数据
var storeEdit = grid.getStore();
var modified = storeEdit.modified.slice(0);
Ext.each(modified, function(m){
 alert(m.data.id);
});

// 获取grid数据
var selModel = grid.getSelectionModel();
var record;
if(!selModel.hasSelection()){
 Ext.Msg.alert('警告','请选择要修改的行!');
 return;
}
selModel.getSelections().length;
record = selModel.getSelected();

(1) 获取数据：
单行：id = record.get('id'); 或者 id = record.data.id;
多行：record[i].get('ddd')

(2) 删除数据：

var obj = grid.getSelectionModel().getSelected();
store.remove(obj);
grid.getView().refresh();

(3) 查询：

store.baseParams['memid'] = fb.form.findField('memid').getValue();
store.baseParams['start'] = 0;
store.load();

(4) 添加一行可展开的详细内容（使用 RowExpander 插件，需要引入 RowExpander.js）：

var expand = new Ext.ux.grid.RowExpander({
 tpl : new Ext.Template(
 '{address}'
 )
});

在grid的columns中加入expand，并在grid属性中设置plugins: expand。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›

图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›

上一篇：Angular tsconfig.json中lib属性配置示例下一篇：Angular样式绑定解决方案