# ExtJS 4 官方指南翻译：Grid组件（下）

## 选区模型 Selection Models

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

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: [
{
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
}
]

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

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

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

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

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

### 行编辑 Row Editing

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

## 分页 Paging

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

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',
pageSize: 4,
proxy: {
type: 'ajax',
url : 'data/users.json',
type: 'json',
root: 'users',
totalProperty: 'total'
}
}
});

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" }
]
}

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

### 分页工具栏 Paging Toolbar

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

03-08 4806

12-29 618
09-03 96
05-05 638
07-11 3720
05-11 2943
04-23 136
08-20
03-30
09-18
01-27