ExtJS 4 官方指南翻譯：Grid組件（下）

文章目錄

• 儲存格編輯 Cell Editing
• 行編輯 Row Editing
• 設定 Store Store Setup

原文：http://docs.sencha.com/ext-js/4-0/#!/guide/grid

翻譯：frank/sp42 轉載請保留本頁資訊

選區模型 Selection Models

有時 Grid 面板被用於只是在螢幕上顯示的資料，但更多的是進行互動動作或執行更新資料的任務。所有 Grid 面板都有一個選擇模型（SelectionModel），以確定資料如何被選中。選擇模型的兩個主要類型是“整行選擇模型”，抑或是“儲存格選擇模型”，也就是一行行地被選擇，還是單個儲存格被選中的問題。

Sometimes
Grid Panels are use only to display data on the screen, but usually it is necessary to interact with or update that data. AllGrid Panels have aSelection
Model which determines how data is selected. The two main types of Selection Model areRow Selection Model, where entire rows are
selected, and
Cell Selection Model, where individual cells are selected.

Grid 面板預設使用行選擇模型，但它很容易切換為儲存格選擇模型：

Grid Panels use aRow Selection
Model by default, but it's easy to switch to a
Cell Selection Model:

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

使用儲存格選擇模型的話，得改變幾件事情。首先，點擊一個儲存格，選擇的只是那個儲存格（如使用行選擇模型，將選擇整個行）；其次，鍵盤導航不是行與行之間的移動，而是儲存格之間的。儲存格為基礎的選擇模型通常與編輯控制項一起使用。

Using a
Cell Selection Model changes a couple of things. Firstly, clicking on a cell now selects just that cell (using aRow Selection Modelwill
select the entire row), and secondly the keyboard navigation willwalk from cell to cell instead of row to row. Cell-based selectionmodels are usually used in conjunction with editing.

編輯 Editing

Grid 面板支援行編輯。我們要看看編輯的兩個主要模式——行編輯和儲存格編輯。

Grid Panel has build in support for editing. We're going to look at the two main editing modes - row editing and cell editing

儲存格編輯 Cell Editing

儲存格編輯就是允許你在 Grid 面板中針對某個儲存格中的資料進行編輯。執行儲存格編輯的第一步是配置每個 Grid 面板都應該是可編輯的列。以下就是編輯器的配置。最簡單的方法是指定那個欄位的 editor 為組件的 xtype：

Cell editing allows you to edit the data in a
Grid Panel one cell at a time. The first step in implementing cell editing is to configure an editor for eachColumn in yourGrid
Panel that should be editable. This is done using the
editor config. The simplest way is to specify just the xtype of the field you want to use as an editor:

Ext.create('Ext.grid.Panel', {    ...    columns: [        {            text: 'Email Address',            dataIndex: 'email',            editor: 'textfield'       }    ]});

如果您需要更多的控制如何編輯欄位的行為，編輯器配置也可以為欄位的設定物件。例如，如果我們使用的是一個文字欄位，我們需要一個值：

If you need more control over how the editor field behaves, the
editor config can also take a config object for a Field. For example if we are using aText Field and we want to require a value:

columns: [    text: 'Name',    dataIndex: 'name',    editor: {        xtype: 'textfield',        allowBlank: false    }]

作為一個編輯欄位，您可以使用在Ext.form.field包的任何類。讓我們假設我們要編輯一列包含日期。我們可以使用一個日期欄位編輯器：

You can use any class in the Ext.form.field package as an editor field. Lets suppose we want to edit a column that contains dates. We can use aDate
Field editor:

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

不配置編輯器的任何一個Grid面板Ext.grid.column.Columns不會編輯。

Any
Ext.grid.column.Columns in a
Grid Panel that do not have a
editor configured will not be editable. 

現在，我們已經配置了哪些可編輯的列，將使用的編輯器編輯資料欄位，下一步是要指定一個選擇模型。讓我們用在我們的Grid面板配置的小區選擇模型：

Now that we've configured which columns we want to be editable, and theeditor fields that will be used to edit the data, the next step is tospecify a selection model. Let's use aCell
Selection Model in our
Grid Panel config:

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

最後開啟編輯功能，我們為 Grid  面板配置上一個儲存格編輯外掛程式：

Finally, to enable editing we need to configure the
Grid Panel with a
Cell Editing Plugin:

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

而這一切都需要建立一個使用儲存格編輯的 Grid，。請參閱儲存格編輯執行個體。

And that's all it takes to create an editable grid using cell editing. See
Cell Editing for a working example.

行編輯 Row Editing

行編輯就是說，讓您同時編輯編輯儲存格，而不是整個行。行編輯的效果完全與儲存格編輯的方式相同，於是我們所需要做的的是改變外掛程式類型為 Ext.grid.plugin.RowEditing 並設定 selType 為 rowmodel。

Row editing enables you to edit an entire row at a time, rather thanediting cell by cell. Row editing works in exactly the same way as cellediting - all we need to do is change the plugin type toExt.grid.plugin.RowEditing
and set the selType to rowmodel.

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

行編輯的線上例子 Row Editing - Live Example

分頁 Paging

有時你的資料量太大，恰恰又要在一張頁面上顯示這些所有的資料，怎麼辦呢？Grid 面板支援兩個不同方式的分頁：1、使用“上一頁/下一頁”按鈕的分頁工具列；2、使用捲軸進行上下翻頁。

Sometimes your data set is too large to display all on one page.
Grid Panel supports two different methods of paging -
Paging Toolbar which loads pages using previous/next buttons, and
Paging Scroller which loads new pages inline as you scroll.

設定 Store Store Setup

在設定Grid 兩種類型的分頁之前，我們必須要讓 Store 支援分頁。在下面的例子中，我們添加一個有 pageSize的Store，以及帶有 totalProperty 配置項的 Reader 對象：

Before we can set up either type of paging on a
Grid Panel, we have to configure the
Store to support paging. In the below example we add a
pageSize to the
Store, and we configure our
Reader with a
totalProperty:

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 指定了從 JSON 結構中哪裡可以擷取結果的總數。該 Store 為 JsonStore 類型的，所以看起來像這樣：

The
totalProperty config tells the
Reader where to get the total number of results in the JSON response. This
Store is configured to consume a JSON response that looks something like this:

{    "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、Proxy 用法，讀者請參閱資料手冊。

For more on
Stores,
Proxies, and
Readers refer to the
Data Guide.

分頁工具列 Paging Toolbar

現在，我們已設定了 Store及其分頁，所有剩下的工作就是配置一個分頁工具列。你可以把分頁工具列定位在你應用程式的任何地方，但通常是停靠在 Grid 面板旁邊：

Now that we've setup our
Store to support paging, all that's left is to configure a
Paging Toolbar. You could put the
Paging Toolbar anywhere in your application layout, but typically it is docked to theGrid Panel:

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

分頁工具列樣本 Paging Toolbar Example

分頁滾動 Paging Scroller

Grid 作為替代使用分頁工具列支援無限滾動。您的使用者可以通過滾動數以千計的記錄，卻沒有過多渲染記錄而帶來的效能損失。應指定Grid 其 Store 的 pageSize 的大小如何。

Grid supports infinite scrolling as an alternative to using a pagingtoolbar. Your users can scroll through thousands of records without theperformance penalties of renderering all the records on screen at once.The grid should be bound to a store with a pageSize
specified.

Ext.create('Ext.grid.Panel', {    // 使用PagingGridScroller （代替 PagingToolbar）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,    // ...});

無限滾動樣本 Infinite Scrolling Example