Grid Panel
是ExtJS最经常使用的组件之一,它的功能很是丰富,提供了很是便捷的方法执行排序,分组,编辑数据。 ajax
让咱们建立一个简单的表格,这有建立和运行表格的所有知识。 json
Grid Panel
展示Store
中的数据,Store
能够被认为是records的集合,或者模型(Model
)实例的集合。更多关于Store
和Model
的内容请查看《ExtJS 4 数据(包)详解》,讲这些是为了明确一下概念,Grid Panel
自己只关注如何展示数据,Store
负责经过Proxy
获取和保存数据。 首先咱们须要定义一个Model
,Model
就是一组数据字段,先定义一个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' } ] });
简单起见,这里使用了内联的数据,真实应用中,一般都是使用代理加载服务器端的数据,有关代理能够查看《ExtJS 4 数据(包)详解》 ide
如今咱们已经有了模型定义数据结构,也加载了若干个模型实例到Store
,已经为表格面板展现数据作好了准备工具
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' } ] });
这就是所有要作的。咱们建立了一个表格面板渲染到了body中,而且告诉它从以前建立的userStore
中取得数据,最后咱们定义了表格面板有哪些列,用dataIndex
属性配置表格中的列和User Model中的字段的对应关系,Name
列宽度是100,不能排序也不能隐藏,Email Address
列默认是隐藏的(能够经过其余列的菜单控制显示),Phone Number
列自适应表格剩余的宽度 性能
你可使用renderer
属性改变数据的展现方式,renderer
是个function,它接收原始的数据而且须要返回一个处理过的数据,返回的数据将会被展现在表格上,一些最经常使用的渲染器在Ext.util.Format
中能够找到,也能够自定义:flex
columns: [ { text: 'Birth Date', dataIndex: 'birthDate', // format the date using a renderer from the Ext.util.Format class renderer: Ext.util.Format.dateRenderer('m/d/Y') }, { text: 'Email Address', dataIndex: 'email', // format the email address using a custom renderer renderer: function(value) { return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value); } } ]
让表格中的行分组排列很容易,首先要在Store
中指定一个groupField
属性this
Ext.create('Ext.data.Store', { model: 'Employee', data: ..., groupField: 'department' });
关于分组的更多内容,请参见《ExtJS 4 数据(包)详解》,接下来配置表格有分组属性:url
Ext.create('Ext.grid.Panel', { ... features: [{ ftype: 'grouping' }] });
有些时候,表格是用来在屏幕上展现数据的,可是常常会须要更新数据或者和表格中的数据作交互,全部表格都有个选中模式,用来控制表格中的数据是如何选中的,主要两种选中模式是行模式(Row Selection Model
)和单元格模式(Cell Selection Model
)
表格默认使用行模式,可是切换到单元格模式也很容易:
Ext.create('Ext.grid.Panel', { selType: 'cellmodel', store: ... });
使用单元格模式改变了几个事情,第一,点击表格中的单元格只会选中当前单元格,而在行模式的时候是选中整行的,第二,用键盘导航的时候会从一个单元格走到另外一个单元格,而不是从一行走到另外一行,单元格模式一般配合可编辑的表格一块儿使用。
表格内置了编辑能力,咱们见识一下,行编辑和单元格编辑
单元格编辑容许你一次编辑一个单元格内容,实现单元格编辑,首先要为每一列配置编辑控件,只要设置editor
属性便可,最简单的办法就是将editor
属性设置为须要使用的控件的xtype
Ext.create('Ext.grid.Panel', { ... columns: [ { text: 'Email Address', dataIndex: 'email', editor: 'textfield' } ] });
若是你须要控制编辑控件的行为,能够把editor
属性设置为编辑控件可接收的配置对象,例如咱们设置一个不能为空的输入框:
columns: [ { text: 'Name', dataIndex: 'name', editor: { xtype: 'textfield', allowBlank: false } } ]
可使用任意Ext.form.field
包中的控件做为编辑控件,假设某一列是日期类型,须要使用Date Field
编辑:
columns: [ { text: 'Birth Date', dataIndex: 'birthDate', editor: 'datefield' } ]
没有配置editor
属性的列,就是不可编辑的。
如今咱们已经配置了哪一列能够编辑,也配置了用什么控件编辑,下一步就是制定选中模式,咱们先使用一下 单元格模式:
Ext.create('Ext.grid.Panel', { ... selType: 'cellmodel' });
最后咱们须要安装一个单元格编辑插件:
Ext.create('Ext.grid.Panel', { ... selType: 'cellmodel', plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ] });
以上就是所有实现一个可编辑单元格的表格的内容。效果以下:
行编辑容许你一次编辑一整行,和单元格编辑的实现方式基本一致,不同的地方是,选中模式要设置为行模式,安装一个行编辑插件
Ext.create('Ext.grid.Panel', { ... selType: 'rowmodel', plugins: [ Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 }) ] });
有时候数据不少不能一次所有展示在表格中。表格支持两种分页模式,一种是分页工具条,有上一页/下一页按钮,一种是无限滚动条
开始以前首先要让Store支持分页,下面的例子中为store增长了pageSize
属性,而且给Reader配置了totalProperty
告知Reader一共有多少行
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' } } });
totalProperty
告知reader从哪里取得数据集的总数目,而后Store须要的JSON数据应该像这样:
{ "success": true, "total": 12, //这告知一共多少行 "users": [ //当前页只须要4行,由于pageSize是4 { "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支持分页了,剩下的就是配置分页工具条,你能够把分页工具条放在任何位置,可是一般放在表格的底部
Ext.create('Ext.grid.Panel', { store: userStore, columns: ..., dockedItems: [{ xtype: 'pagingtoolbar', store: userStore, // same store GridPanel is using dock: 'bottom', displayInfo: true }] });
表格支持无限滚动条的方式分页,有上千条数据时你能够一直滚动滚动条就能够加载(跟微博的无限滚动条同样),没有一次渲染数千条的性能问题,须要作以下的配置
Ext.create('Ext.grid.Panel', { // Use a PagingGridScroller (this is interchangeable with a PagingToolbar) verticalScrollerType: 'paginggridscroller', // do not reset the scrollbar when the view refreshs invalidateScrollerOnRefresh: false, // infinite scrolling does not support selection disableSelection: true, // ... });