[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: '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的資料。實際的開發中，使用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": "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" }    ]}

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