[Ext JS 4] Grid 组件| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4] Grid 组件

## [Ext JS 4] Grid 组件
### Model and Store
Grid Panel 仅仅用来展现数据，数据的获取和保存交给使用Proxy的 Store来处理。
首先定义一个 “User”的模型
```html
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
```

接下来创建一个包含有几个User实例的 Store
```html
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来加载数据。

### 网格面板
数据有了，接下来就是把数据展现在网格面板中了
```javascript
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.
```javascript
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) {
returnExt.String.format('{1}', 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' }]
});

### 选择模型
网格面板有两个主要的选择模式，一种是行选择模式，另一种是单元格选择模式。
默认状况下，网格面板使用行选择模式，可以使用以下方式切换成单元格选择模式：
```javascript
Ext.create('Ext.grid.Panel', {
selType: 'cellmodel',
store: ...
});
```
切换单元格模式后， 以下都会发生改变，一是点击一个单元格就职选择一个单元格了（在行选择模式下，是选中整行）；另外是使用键盘切换是就是从一个单元格到一个单元格了，而不是一行到一行。单元格模式一般使用在编辑的状况。

### 编辑
主要也是两种，行编辑和单元格编辑
单元格编辑
配置方式就是在网格面板的columns 配置editor,最简单的方式就是配置editor的xtype,例如：
```javascript
Ext.create('Ext.grid.Panel', {
    ...
columns: [
        {
text: 'Email Address',
dataIndex: 'email',
editor: 'textfield'
       }
    ]
});

editor  也有更多的配置，比如必填值检查;
columns: [
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false
    }
]
```

如果是日期栏位的编辑，可以配置成：
```javascript
columns: [
    {
text: 'Birth Date',
dataIndex: 'birthDate',
editor: 'datefield'
    }
]
```
任何网格面板的Ext.grid.column.Columns如果没有editor配置的话是不可以编辑的。
可以使用如下方式配置。
```javascript
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
```javascript
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数据格式类似以下这样：
```javascript
{
"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 把分页工具栏放在页面的任何地方，但是常见的还是以上的方式，效果如下：
```javascript
Ext.create('Ext.grid.Panel', {
store: userStore,
columns: ...,
dockedItems: [{
xtype: 'pagingtoolbar',
store: userStore,   // same store GridPanel is using
dock: 'bottom',
displayInfo: true
   }]
});
Pageing Scroller 
```
作为分页工具栏的替代，也可以使用无线滚动的方式。
```javascript
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,
// ...
});
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] Grid 组件

网站导航