2024年3月19日发(作者：)

ExtJS中表格控件的使用，属性设置和数据的获取

ExtJS中表格的特性简介

表格由类nel定义，继承自，xtype为grid

表格的列信息由Model定义

表格的数据存储器由定义，根据解析数据的不同，数据存储器

可具体分为如下几种：

JsonStore，SimpleStore，GroupingStore…

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

1、创建表格列模型

var cm = new Model({

});

{header: '角色', dataIndex: 'role'},

{header: '等级', dataIndex: 'grade'},

{header: '创建日期', dataIndex: 'createDate', type: 'date', renderer:

nderer('Y年m月d日')} //创建日期类型的数据

2、创建数据数组

var data = [

['士兵','7','2011-07-2412:34:56'],

['将军','10','2011-07-2412:34:56'],

];

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

解析数据的方式

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

var store = new ({

proxy: new Proxy(data),

reader: new eader({}, [

{name: 'role', mapping: 1},

{name: 'grade', mapping: 0}

{name: 'createDate', mapping: 2, type:'date', dateFormat:'Y-m-dH:i:s'}

//创建日期列和显示格式

])

});

();

4、创建GridPanel，装配ColumnModel和store

var grid = new nel({

});

renderTo: 'grid',

store: store,

cm: cm

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

var store = new ({

proxy: new TagProxy({

url:'...'}),

reader: new eader({}, [

{name: 'role', mapping: 1},

{name: 'grade', mapping: 0}

]),

sortInfo: {field: "role", direction: "ASC"} //设置默认排序列，ASC/DESC

});

表格的常用属性功能

var grid = new nel({

});

var cm = new Model({

});

var grid = new nel({

renderTo: 'grid',

store: store,

cm: cm

viewConfig:{ //让每列自动填充满表格

forceFit: true

{header: '角色', dataIndex: 'role', width:90, sortable: true}, //width

{id:'grade', header: '等级', dataIndex: 'grade', width:40}

enableColumnMove: false, //禁止拖放列

enableColumnResize: false, //禁止改变列的宽度

stripeRows: true, //斑马线效果

loadMask: true, //读取数据时的遮罩和提示功能

renderTo: 'grid',

store: store

cm: cm

设置列宽度，默认为100px，sortable设置排序功能