Extjs Grid使用教程：数据处理与列定义详解

本文档详细介绍了如何在Extjs中利用Gride进行数据展示和操作，特别是针对Extjs Grid控件的使用方法。Extjs是一个强大的JavaScript框架，其Grid组件允许开发者以直观的方式处理各种数据源，包括二维数组、Json数据、XML数据以及自定义数据类型。在实现Grid时，关键在于定义ColumnModel，即列头和对应的数据索引，同时提供了可排序性。 首先，创建一个ColumnModel是必不可少的，它定义了表格的列结构，例如： ```javascript var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '性别', dataIndex: 'sex'}, {header: '名称', dataIndex: 'name'}, {header: '描述', dataIndex: 'descn'} ]); cm.defaultSortable = true; // 默认所有列均可排序 ``` 如果只需要部分列具有排序功能，可以单独指定Sortable属性。接下来，介绍如何使用Ext.data.Store将不同类型的数据转换为Grid能识别的形式： 1. 二维数组：将数据存储为数组，然后使用`MemoryProxy`代理和`ArrayReader`解析器： ```javascript var data = [ ['1', 'male', 'name1', 'descn1'], ['2', 'male', 'name2', 'descn2'], // ... ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [{name: 'id', mapping: 0}]) // 数据映射 }); ``` 通过这些步骤，开发者可以有效地将数据整合到Extjs Grid中，展示并进行交互。此外，文章可能还涉及更复杂的用法，如分页、过滤、编辑和添加行等功能，以及如何与后台API交互，以实现实时数据更新。掌握这些基础技巧后，进一步深入学习和实践可以帮助开发者更好地利用Extjs构建高效、易用的数据展示界面。