JavaScript的ExtJS框架中表格的编写教程(2)

grid.on('click', function() { var selections = grid.getSelectionModel().getSelections(); for (var i = 0; i < selections.length; i++) { var record = selections[i]; Ext.Msg.alert(record.get("id")); } });

表格视图
从MVC的思想来看表格控件：
* Ext.data.Store可看做模型
* Ext.grid.GridPanel可看做控制器
* Ext.grid.GridView可看做视图
* 一般GridView由GridPanell自动生成，如果想设置GridView的属性时，可以通过Ext.grid.GridPanel的getView()获得视图实例

Ext.get('button1').on('click', function() { grid.getView().scrollToTop(); grid.getView().focusCell(0, 0); var cell = grid.getView().getCell(0, 0); cell.style.backgroundColor = 'red'; });

使用GridPanel的viewConfig在创建表格时设置GridView的初始化参数

var grid = new Ext.grid.GridPanel({ height: 100, width: 400, renderTo: 'grid', store: new Ext.data.Store({ autoLoad: true, proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, meta) }), columns: meta, viewConfig: { columnsText: '显示的列', //设置下拉菜单提示文字 scrollOffset: 30, //设置右侧滚动条的预留宽度 sortAscText: '升序', //设置下拉菜单提示文字 sortDescText: '降序', //设置下拉菜单提示文字 forceFit: true //自动延展每列的长度 } });

为表格添加分页工具条
* 可以使用GridPanel的bbar属性，并创建Ext.PagingToolbar分页工具条对象
* 注意，如果配置了分页工具条，store.load()就必须在构造表格以后执行。

var grid = new Ext.grid.GridPanel({ renderTo: 'grid', autoHeight: true, store: store, cm: cm, bbar: new Ext.PagingToolbar({ pageSize: 10, //每页显示10条数据 store: store, displayInfo: true, //显示数据信息 displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "没有记录" //没有数据时显示的信息 }) }); store.load();

从后台脚本获取分页数据

使用HttpProxy传递请求，获取服务器的JSON数据，交给JsonReader解析

var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'} ]); var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'page.jsp'}), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, [ {name: 'id'}, {name: 'name'} ]) }); var grid = new Ext.grid.GridPanel({ renderTo: 'grid', autoHeight: true, //数据传回来之前高度未知，所以要使用自适应高度 store: store, cm: cm, bbar: new Ext.PagingToolbar({ pageSize: 10, store: store, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录 / 共 {2} 条', emptyMsg: "没有记录" }) }); store.load({params:{start:0,limit:10}});

如果想让分页工具条显示在表格的顶部，可以使用GridPanel的tbar属性设置添加工具条

让ExtJS在对返回的数据进行分页

* 需要在页面中引入examples/locale目录下的PagingMemoryProxy.js文件
* 再使用PagingMemoryProxy设置代理

var store = new Ext.data.Store({ proxy: new Ext.data.PagingMemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'}, {name: 'descn'} ]) }); //在创建GridPanel之后调用 store.load({params:{start:0,limit:3}});

可编辑表格控件EditorGrid的使用

制作一个简单的EditorGrid的步骤：

1、定义列ColumnModel，在里面添加editor属性

var cm = new Ext.grid.ColumnModel([{ header: '编号', dataIndex: 'id', editor: new Ext.grid.GridEditor( new Ext.form.TextField({ allowBlank: false //不允许在TextField中输入空值 }) ) }, { header: '名称', dataIndex: 'name', editor: new Ext.grid.GridEditor( new Ext.form.TextField({ allowBlank: false }) ) }]);

2、准备一个数组

var data = [ ['1','Jason'], ['2','Jay'] ];

3、创建Ext.data.Store，设置内存代理，设置ArrayReader解析数组

var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'} ]) });

4、加载数据，创建EditorGridPanel

store.load(); var grid = new Ext.grid.EditorGridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm });

为可编辑表格添加和删除数据

1、使用Record的create方法创建一个记录集MyRecord,MyRecord相当于一个类

var MyRecord = Ext.data.Record.create([ {name: 'id', type: 'string'}, {name: 'name', type: 'string'} ]); store.load();

2、创建EditorGridPanel面板，在属性tbar中创建Ext.Toolbar