ExtJS 4 Grids 詳解

Grid Panel是ExtJS最經常使用的組件之一，它的功能很是豐富，提供了很是便捷的方法執行排序，分組，編輯數據。

Basic Grid Panel 基本表格面板

讓咱們建立一個簡單的表格，這有建立和運行表格的所有知識。

Model and Store 模型和存儲器

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 數據(包)詳解》

Grid Panel 表格面板

如今咱們已經有了模型定義數據結構，也加載了若干個模型實例到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列自適應表格剩餘的寬度

Renderers 渲染器

你可使用renderer屬性改變數據的展現方式，renderer是個function，它接收原始的數據而且須要返回一個處理過的數據，返回的數據將會被展現在表格上，一些最經常使用的渲染器在Ext.util.Format中能夠找到，也能夠自定義：

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

Grouping 分組

讓表格中的行分組排列很容易，首先要在Store中指定一個groupField屬性

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

關於分組的更多內容，請參見《ExtJS 4 數據(包)詳解》，接下來配置表格有分組屬性：

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

Selection Models 選中模式

有些時候，表格是用來在屏幕上展現數據的，可是常常會須要更新數據或者和表格中的數據作交互，全部表格都有個選中模式，用來控制表格中的數據是如何選中的，主要兩種選中模式是行模式(Row Selection Model)和單元格模式(Cell Selection Model)
表格默認使用行模式，可是切換到單元格模式也很容易：

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

使用單元格模式改變了幾個事情，第一，點擊表格中的單元格只會選中當前單元格，而在行模式的時候是選中整行的，第二，用鍵盤導航的時候會從一個單元格走到另外一個單元格，而不是從一行走到另外一行，單元格模式一般配合可編輯的表格一塊兒使用。

Editing 編輯表格

表格內置了編輯能力，咱們見識一下，行編輯和單元格編輯

Cell Editing 單元格編輯

單元格編輯容許你一次編輯一個單元格內容，實現單元格編輯，首先要爲每一列配置編輯控件，只要設置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
        })
    ]
});

以上就是所有實現一個可編輯單元格的表格的內容。效果以下：

Row Editing 行編輯

行編輯容許你一次編輯一整行，和單元格編輯的實現方式基本一致，不同的地方是，選中模式要設置爲行模式，安裝一個行編輯插件

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })
    ]
});

Paging 分頁

有時候數據不少不能一次所有展示在表格中。表格支持兩種分頁模式，一種是分頁工具條，有上一頁/下一頁按鈕，一種是無限滾動條

Store Setup 存儲器設置

開始以前首先要讓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" }
    ]
}

Paging Toolbar 分頁工具條

如今咱們已經讓Store支持分頁了，剩下的就是配置分頁工具條，你能夠把分頁工具條放在任何位置，可是一般放在表格的底部

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

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