ExtJS4：GridPanel样式与数据读取实战

"这篇资源主要介绍了Extjs4中GridPanel的使用方法，包括如何创建一个简单的表格、设置排序、显示指定列以及读取本地数据。此外，还提到了如何对表格列进行定制，如行号、布尔值表示、日期格式化、数字格式化以及添加操作列。" 在Extjs4中，GridPanel是用于展示数据的组件，它可以用于创建具有多种功能的表格。在创建GridPanel时，我们需要定义其属性和行为。在提供的代码示例中，首先定义了一个本地数据数组`datas`，包含三行数据，每行数据由三个字符串元素组成。然后，使用`Ext.create`创建了一个`Ext.grid.Panel`实例，设置了其标题、宽度、高度、渲染位置以及边框等属性。 在`viewConfig`中，`forceFit`设置为`true`，这意味着表格列将自动调整宽度以完全填充容器，而`stripRows`为`true`，表示行间隔会被移除，使表格看起来更整洁。接下来，定义了`store`来存储数据，这里使用了内存代理`memory proxy`，并将数据直接绑定到`datas`数组。`reader`设置为`'array'`，意味着数据将以数组的形式读取。`autoLoad`设置为`true`，意味着数据会在GridPanel加载时自动加载。 在`columns`配置中，我们定义了表格的列信息，包括列头（`header`）、宽度（`width`）、数据索引（`dataIndex`，与`store`中的`fields`相对应）以及是否可排序（`sortable`）。在本例中，有三列，分别对应`id`、`name`和`gender`字段。 进一步地，代码还展示了如何处理不同类型的列，例如布尔值、日期和数字。对于日期，可以使用特定的日期格式进行显示，而对于数字，可以设定特定的格式进行输出。此外，还可以创建操作列，通常包含按钮或链接，允许用户进行交互操作。 这个资源涵盖了Extjs4 GridPanel的基础用法，包括数据源的配置、列的定义、数据类型的处理以及表格的样式设置，对于理解Extjs4的表格功能非常有帮助。