JavaScript的Ext JS框架中的GridPanel组件使用指南

一、最简单的Grid Panel

Grid Panel是ExtJS的核心部分之一，它可以轻松实现数据的显示、排序、分组和编辑。在Grid Panel中，Model和Store扮演着至关重要的角色。每个Grid Panel都需要设置Model和Store。

要创建一个Grid Panel，首先需定义Model。Model包含了Grid Panel需要显示的所有字段，就像数据库中表的字段集合。接下来，创建Store。Store可以看作是一行数据的集合或是Model的实例集合。每个Store都包含了一个或多个Model实例，Grid Panel所显示的数据都存储在Store里。

以狼蚁网站的SEO优化为例，假设我们需要创建一个Grid Panel来显示用户的基本信息，包括用户名、和手机号。我们创建一个用户模型（User Model）：

```javascript

Ext.define('User', {

extend: 'Ext.data.Model',

fields: ['name', 'email', 'phone']

});

```

接着，创建Store。这个Store是User的集合，包含了多个User实例：

```javascript

var userStore = Ext.create('Ext.data.Store', {

model: 'User', //刚才创建的User Model

data: [

{ name: 'Lisa', email: '', phone: '' },

// 其他用户数据...

]

});

```

一旦Model和Store创建完成，就可以创建Grid Panel了：

```javascript

Ext.create('Ext.grid.Panel', {

renderTo: Ext.getBody(),

store: userStore, //绑定上面创建的Store

width: ,

height: 200,

title: '用户信息',

columns: [

{

text: '姓名',

width: 100,

sortable: false,

dataIndex: 'name' //Grid Panel中显示的字段，必须与User Model中的字段一致

},

// 其他列配置...

]

});

```

二、Grid Panel数据分组（Grouping）

要对Grid Panel显示的数据进行分组，只需在Store中设置groupField属性。例如，如果公司有很多员工，你可以按部门进行分组显示。在Store中设置groupField属性为'department'：

```javascript

Ext.create('Ext.data.Store', {

model: 'Employee', //假设是员工模型

分组显示与分页功能的Grid Panel

让我们深入Ext JS中的Grid Panel，实现数据的分组显示与分页功能。

分组显示

如同下图所示的分组显示效果，你可以轻松通过点击这里查看官方分组显示代码的实现。

在Ext JS中，为Grid Panel添加分组显示功能非常简单。只需在创建Grid Panel时，设置`features`属性中包含一个对象，该对象的`ftype`属性值为`'grouping'`。

分页显示

当数据量较大，一屏无法完全展示时，我们通常采用分页的方式来展示数据。Grid Panel提供了两种分页方式：Paging Toolbar和Paging Scroller。

Paging Toolbar提供了上一页/按钮，方便用户快速浏览不同页面的数据。要实现这一功能，你需要在Store中设置`pageSize`属性（默认是25），并在reader中设置`totalProperty`，这样分页插件就可以根据这两个属性来进行分页了。狼蚁网站SEO优化的代码中，`pageSize`设置为4，而`totalProperty`则从返回的json数据中的`total`属性获取。

假设你的json数据格式如下：

```json

{

"success": true,

"total": 12,

"users": [

{"name": "Lisa", "email": "", "phone": ""},

{"name": "Bart", "email": "", "phone": ""},

...

]

}

```

Store的分页设置完成后，你可以在Grid Panel中实现Paging Toolbar的分页功能。以下是相关代码：

```javascript

Ext.create('Ext.grid.Panel', {

store: userStore, //关联到Store

columns: [...], //定义列结构

dockedItems: [{ //在Grid Panel底部添加分页工具栏

xtype: 'pagingtoolbar',

store: userStore, //设置分页工具栏的Store与Grid Panel的Store一致

dock: 'bottom', //将分页工具栏固定在底部

构建强大的Grid Panel：分页、Checkbox一应俱全

在Ext JS的世界里，Grid Panel无疑是一个强大的组件，它能够帮助我们展示和组织大量的数据。让我们深入如何为其增添分页和复选框功能。

1. 分页功能的实现

要为Grid Panel添加分页功能，我们可以使用Paging Scroller分页插件。这样，数据的展示不再局限于一屏，用户可以滚动浏览更多的数据。设置如下：

```javascript

Ext.create('Ext.grid.Panel', {

//启用Paging Scroller分页插件

verticalScroller: 'paginggridscroller',

//在视图刷新时，不重置滚动条

invalidateScrollerOnRefresh: false,

//对于无限滚动，不支持选择功能

disableSelection: true,

//其他配置...

});

```

2. Checkbox的选择功能

若想在Grid Panel中实现复选框的选择功能，只需将selModel属性设置为Ext.selection.CheckboxModel。这样，每一行数据前都会有一个复选框，方便用户进行选择。示例代码如下：

```javascript

Ext.create('Ext.grid.Panel', {

selModel: Ext.create('Ext.selection.CheckboxModel'), //设置Grid Panel的选择模式为复选框

store: userStore, //绑定数据源

columns: [...] //定义列结构

});

```

3. 综合实例演示

下面是一个综合示例，创建一个带有分页和复选框功能的Grid Panel：

```javascript

var grid = new Ext.grid.GridPanel({

store: yourDataStore, //设置数据源

cm: yourColumnModel, //设置列模型，与columns配置功能相同

columns: [...], //定义列配置，包括标题、宽度、渲染器等

selModel: Ext.create('Ext.selection.CheckboxModel'), //启用复选框选择功能，允许用户通过点击复选框来选择多行数据

//其他配置如分页、排序、过滤等...

});

```

在这个示例中，Grid Panel不仅支持数据的分页展示，还允许用户通过复选框选择多行数据，大大增强了用户体验和交互性。您可以根据实际需求进一步定制和扩展这个Grid Panel的功能。与cm进行配置，一切都井然有序。我们有一个功能丰富的面板，让我们深入了解其细节。

关于数据的展示，我们使用了Ext.PagingToolbar。这个工具栏可以显示当前页面的信息，包括正在显示的记录数以及总记录数。当数据源为空时，它会显示“没有记录”。我们还添加了一个查询按钮，点击后会触发某些操作（此处为win.show()，具体实现视需求而定）。

接下来，我们有一个功能强大的ColumnModel。它包含了多列数据，如客户ID、客户姓名、性别、跟踪号和日期等。每一列都有相应的宽度和排序功能。值得一提的是，性别的显示采用了特殊的渲染方式，通过图片来展示。

在编辑方面，我们使用了EditorGridPanel。通过添加点击次数（chickToEdit:1）等设置，用户可以轻松编辑数据。获取修改后的数据非常简单，只需通过grid的store即可。我们可以轻松获取grid中的数据，无论是单行还是多行。

我们还讨论了数据的删除、查询以及添加一行列的操作。删除操作通过选中行并调用store.remove()方法实现。查询则需要设置store的baseParams并调用load()方法。若要添加一行列，我们可以使用Ext自带的RowExpander插件。

这是一个功能全面、易于操作的面板。它提供了丰富的数据操作功能，包括查询、删除、编辑等。它的界面简洁明了，用户友好。无论是单行还是多行数据，都可以轻松获取并处理。通过添加RowExpander插件，还可以轻松添加一行列。让我们期待更多的功能和操作，让数据展示更加丰富多彩！