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

ExtJS中表格的特性简介

表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，xtype为grid 表格的列信息由Ext.grid.ColumnModel定义表格的数据存储器由Ext.data.Store定义，根据解析数据的不同，数据存储器可具体分为如下几种：

JsonStore，SimpleStore，GroupingStore…

一个表格的基本编写过程：

1、创建表格列模型

2、创建数据数组

3、创建一个数据存储对象store，包含两部分：proxy，获取数据的方式；reader，解析数据的方式

ArrayReader的mapping用来设置列的排列顺序

显示格式 ]) }); store.load();

4、创建GridPanel，装配ColumnModel和store

另外获取远程数据可以使用ScriptTagProxy,如下所示

表格的常用属性 功能

禁止拖放列 enableColumnResize: false,//禁止改变列的宽度 stripeRows: true,//斑马线效果 loadMask: true,//读取数据时的遮罩和提示功能 renderTo: 'grid',store: store cm: cm });

var cm = new Ext.grid.ColumnModel({
{header: '角色',dataIndex: 'role',width:90,sortable: true},//width设置列宽度，默认为100px，sortable设置排序功能
{id:'grade',header: '等级',dataIndex: 'grade',width:40}
});
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',cm: cm
viewConfig:{ //让每列自动填充满表格
forceFit: true
}
autoExpandColumn: 'grade' //自动延伸列，列的id在ColumnModel中定义
});

渲染表格，为表格设置特殊样式

只需要在cm里面增加一个renderer属性，添加一个自定义函数来渲染传进来（由EXT自动传递）的参数的样式即可，即在返回value之前拼装上相应的HTML和CSS或者JS响应事件。

男

"; } else { return "女

"; } }

var cm = new Ext.grid.ColumnModel([
{header:'id',dataIndex:'id'},{header:'name',dataIndex:'name'},{header:'sex',dataIndex:'sex',renderer:renderSex},]);

var data = [
['1','Jason','male'],['2','Kate','female']
];

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

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

自动显示行号，只要在创建cm时创建一个RowNumberer就可以了

显示行号 {header:'id',]);

删除列

刷新表格

为表格添加复选框

需要使用CheckBoxSelectionModel SelectionModel sm在使用时要放到cm和表格中

BoxSelectionModel();

var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),sm,{header:'编号',{header:'名称',dataIndex:'name'}
]);

var data = [
['1','name1'],'name2']
];

var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),{name: 'name'}
])

});
store.load();

var grid = new Ext.grid.GridPanel({
autoHeight: true,cm: cm,sm: sm
});

通过RowSelectionModel设置只选择一行：

使用选择模型获取数据

表格视图

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

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

Meta) }),columns: Meta,viewConfig: { columnsText: '显示的列',//设置下拉菜单提示文字 scrollOffset: 30,//设置右侧滚动条的预留宽度 sortAscText: '升序',//设置下拉菜单提示文字 sortDescText: '降序',//设置下拉菜单提示文字 forceFit: true //自动延展每列的长度 } });

为表格添加 分页工具条

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

显示10条数据 store: store,displayInfo: true,//显示数据信息 displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',emptyMsg: "没有记录" //没有数据时显示的信息 }) }); store.load();

从后台脚本获取 分页数据

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

显示第 {0} 条到 {1} 条记录 / 共 {2} 条',emptyMsg: "没有记录" }) }); store.load({params:{start:0,limit:10}});

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

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

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

调用 store.load({params:{start:0,limit:3}});

可编辑表格控件EditorGrid的使用

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

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

名称',dataIndex: 'name',editor: new Ext.grid.GridEditor( new Ext.form.TextField({ allowBlank: false }) ) }]);

2、准备一个数组

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

4、加载数据，创建EditorGridPanel

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

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

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

菜单分隔符 text: '添加一行',handler: function(){ var p = new MyRecord({ id:'',name:'' }); grid.stopEditing(); //关闭表格的编辑状态 store.insert(0,p); //创建的Record插入store的第一行 grid.startEditing(0,0); //激活第一行第一列的编辑状态 } },'-',{ text: '删除一行',handler: function(){ Ext.Msg.confirm('信息','确定要删除？',function(btn){ if (btn == 'yes') { var sm = grid.getSelectionModel(); //获取表格的选择模型 var cell = sm.getSelectedCell(); //获取选中的单元格 var record = store.getAt(cell[0]); //通过行号得到store这一行对应的Record store.remove(record); //移除数据 } }); } },'-']) });

为可编辑表格保存修改的结果

在上面例子的基础之上，添加一个保存按钮

修改过得数据 for (var i = 0; i < m.length; i++) { //验证表格信息是否正确，是否包含空格 var record = m[i]; var fields = record.fields.keys;

for (var j = 0; j < fields.length; j++) {
  var name = fields[j];
  var value = record.data[name];

  var colIndex = cm.findColumnIndex(name);
  var rowIndex = store.indexOfId(record.id);
  var editor = cm.getCellEditor(colIndex).field;

  if (!editor.validateValue(value)) {
    Ext.Msg.alert('<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>','请检查输入的数据是否正确！',function(){
      grid.startEditing(rowIndex,colIndex);
    });
    return;
  }
}

}
var jsonArray = [];
Ext.each(m,function(item) {
jsonArray.push(item.data); //把修改过得数据放到jsonArray中
});

Ext.lib.Ajax.request( //使用Ajax请求提交给后台
'POST','save_data.jsp',{success: function(response){ //返回成功
Ext.Msg.alert('信息',response.responseText,function(){
store.reload();
});
},failure: function(){ //返回失败
Ext.Msg.alert("错误","服务器保存数据出错！");
}},'data=' + encodeURIComponent(Ext.encode(jsonArray))
);
}

另外store可以设置属性pruneModifiedRecords: true。这样，每次remove或load操作时store会自动清除modified标记，可以避免出现下次提交时还会把上次那些modified信息都带上的现象。

限制表格输入的数据类型

NumberField

ComboBox

Box',dataIndex:'combo',editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ store: new Ext.data.SimpleStore({ fields:['value','text'],data: comboData }),emptyText: '请选择',mode: 'local',triggerAction: 'all',valueField: 'value',displayField: 'text',readOnly:true })),renderer: function(value){ return comboData[value][1]; } }

DateField

属性表格控件PropertyGrid的使用

是在EditorGrid的基础上开发的更智能的高级表格组件

属性表格控件PropertyGrid',viewConfig: { forceFit: true },source: { "String": "String","Date": new Date(Date.parse('07/24/2011')),"boolean": false,"float": .01 } });

禁用PropertyGrid编辑功能的方法

根据表格的name获取value

ExtJS中实现嵌套表格

先看效果：

代码如下：

test