[Ext JS 4] Grid 组件

基本网格面板

Model and Store

Grid Panel 仅仅用来展现数据，数据的获取和保存交给使用Proxy的 Store来处理。

首先定义一个 “User”的模型

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

接下来创建一个包含有几个User实例的 Store

var userStore = Ext.create('Ext.data.Store', {    model: 'User',    data: [        { name: 'Lisa', email: '[e-mail]', phone: '555-111-1224' },        { name: 'Bart', email: '[e-mail]', phone: '555-222-1234' },        { name: 'Homer', email: '[e-mail]', phone: '555-222-1244' },        { name: 'Marge', email: '[e-mail]', phone: '555-222-1254' }    ]});

这里为了方便使用内嵌的方式加载Store的数据。实际的开发中，使用Stroe的Proxy来加载数据。

网格面板

数据有了，接下来就是把数据展现在网格面板中了

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'        }    ]});

渲染器

可以给栏位配置render属性来配置数据展现的样式。renderer 的功能就是把原有值修改成新的值返回。最常见的共用渲染器类似Ext.util.Format, 你也可以定义自己的renderer.

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属性来给Grid Panel 分组

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

也可以在grid.Panel中通过指定Feature 的方式：

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

选择模型

网格面板有两个主要的选择模式，一种是行选择模式，另一种是单元格选择模式。

默认状况下，网格面板使用行选择模式，可以使用以下方式切换成单元格选择模式：

Ext.create('Ext.grid.Panel', {    selType: 'cellmodel',    store: ...});

切换单元格模式后， 以下都会发生改变，一是点击一个单元格就职选择一个单元格了（在行选择模式下，是选中整行）；另外是使用键盘切换是就是从一个单元格到一个单元格了，而不是一行到一行。单元格模式一般使用在编辑的状况。

编辑

主要也是两种，行编辑和单元格编辑

单元格编辑

配置方式就是在网格面板的columns 配置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    }]

 如果是日期栏位的编辑，可以配置成：

columns: [    {        text: 'Birth Date',        dataIndex: 'birthDate',        editor: 'datefield'    }]

任何网格面板的Ext.grid.column.Columns如果没有editor配置的话是不可以编辑的。

可以使用如下方式配置。

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        })    ]});

例子如下：

分页

网格面板支持两种分页 ，Pageing Toolbar 使用前进/后退按钮实现分页；page Scroller 使用滚动条加载新的页面。

首先， 建立一个Stroe

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": "[e-mail]", "phone": "555-111-1224" },        { "name": "Bart", "email": "[e-mail]", "phone": "555-222-1234" },        { "name": "Homer", "email": "[e-mail]", "phone": "555-222-1244" },        { "name": "Marge", "email": "[e-mail]", "phone": "555-222-1254" }    ]}

Pageing Toolbar

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

可以通过layout 把分页工具栏放在页面的任何地方，但是常见的还是以上的方式，效果如下：

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

Pageing Scroller 

作为分页工具栏的替代，也可以使用无线滚动的方式。

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,    // ...});