表格控件GridPanel

表格控件GridPanel

表格由类Ext.grid.GridPanel定义，继承自Panel，xtype为grid。在Ext中，表格控件Grid必须包含列定义信息，并制定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义，而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据的不同，可分为JsonStore、SimpleStore、GroupingStore等。

Grid需要进行哪些配置呢？

首先，表格是二维的，跟数据库表一样。我们需要设置表的列数、每列的名称和类型，以及如何显示。

 

在ext中，列的定义叫做ColumnModel，cm是它的简称。它作为表格的列模型，是应该首先创建的。

 

下面创建一个包含3列的Grid，第1列编号(id)，第二列是名称(name)，第3列是描述(description)。

 

var cm = new Ext.grid.ColumnModel({ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'description'} });

 

Var cm = new Ext.grid.ColumnModel(…)负责创建表格的列信息。表格包含的列由columns配置属性来描述，简称cm。columsn是一个数组，每一行数据元素描述表格的一列信息，表格的列信息包含首部显示文本（header）、列对应的记录集字段（dataIndex）、列是否可以排序（sortable）、列的渲染函数（renderer）、宽度（width）、格式化信息（format）等。上面的代码中只用到的header和dataIndex。

 

表格是二维的，数据自然也应该是二维的，下面用一个数组定义数据。

var data = [ ['1','name1','desc1'], ['2','name2','desc2'], ['3','name3','desc3'], ['4','name4','desc4'], ['5','name5','desc5'] ];

 

此二维数据中，每一维都是一行数据。为了将数据展示出来，还需要做转换。

 

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

 

Varstore=…用来创建一个数据存储对象，这是GridPanel必须配置的属性。数据存储对象负责把各种各样的原始数据（如二维数组、Json对象数组、XML文本等）转换成Ext.data.Record类型的对象。通过Ext.data.Store，可以把任何格式的数据转换成Grid可以使用的形式，这样就不需要为每种数据格式写一个对应的实现。

 

Store对应两个部分：proxy和reader。Proxy是指获取数据的方式。Reader是指如何解析这些数据。这里使用的是Ext.data.MemoryProxy，它是专门用来解析javascript变量的。在定义MemoryProxy对象时，只需要将上面定义的data作为参数传递进去即可。

 

Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，定义3个名称：id、name和description。再看前面cm定义的地方，这里的3个名称就和cm李的dataIndex相对应。这样，cm就知道column是如何与store中的数据相对应。需注意，要执行一次store.load()，以对数据进行初始化。

 

如果第1列显示的不是id而是name，第2列显示的不是name而是id，那么可以通过mapping来指定。

var store = new Ext.data.Store({

proxy:newExt.data.MemoryProxy(data),

reader:newExt.data.ArrayReader({},[

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

{name:'name',mapping:0},

{name:'description',mapping:2},

]),

});

 

表格的列模型创建好了，原始数据与数据的转换也已经完成，剩下的就是把他们组装到一起，这样我们的Grid就创建好了。

 

var grid1 = newExt.grid.GridPanel({

title:'员工信息',

renderTo:'grid1',

cm:cm,

store:store,

width:500,

height:350

});

 

显示结果如下图：

 

11.2列拖放和改变列宽

默认情况下，是可以拖放列、改变列的宽度的。如果要取消则将enableColumnMore和enableColumnResize设置为false即可。

var grid1 = new Ext.grid.GridPanel({

title:'员工信息',

renderTo:'grid1',

cm:cm,

store:store,

width:500,

height:350,

enableColumnMove:false,

enableColumnResize:false

});

 

11.3遮罩和提示

Grid还支持一种遮罩和提示功能，设置loadMask为true，在store.load()完成之前，会一直显示“loading…”。

 

具体实现：

var grid1 = newExt.grid.GridPanel({

title:'员工信息',

renderTo:'grid1',

cm:cm,

store:store,

width:500,

height:350,

enableColumnMove:false,

enableColumnResize:false,

loadMask:true

});

store.load();

 

11.4为表格中的列指定宽度

上面的表格中每列的宽度都是一样的，我们可以自己指定每列的宽度（如果不指定，则宽度是默认值100px）。

var cm = newExt.grid.ColumnModel([

{header:'编号',dataIndex:'id',width:50},

{header:'名称',dataIndex:'name',width:100},

{header:'描述',dataIndex:'description',width:200}

]);

 

11.5自动扩展列1

这样还是比较麻烦，需要自己计算每列宽度，如果想让每列自动填满整个表格，可以使用viewConfig中的forceFit即可。它是给GridView用的配置，它在视图层会重新计算所有列宽后填充Grid。使用了forceFit后，Grid会根据cm里面的宽度按比例分配。

 

var grid1 = newExt.grid.GridPanel({

title:'员工信息',

renderTo:'grid1',

cm:cm,

store:store,

width:500,

height:350,

enableColumnMove:false,

enableColumnResize:false,

loadMask:true,

viewConfig:{

forceFit:true

}

});

 

11.6自动扩展列2

除了使用forceFit外，还可以考虑使用autoExpandColumn，它会自动扩展某列，从而填充整个表格。autoExpandColumn只能指定一列的ID，因此假设扩展description列，则需要在cm中指定id。

var cm = newExt.grid.ColumnModel([

{header:'编号',dataIndex:'id',width:50},

{header:'名称',dataIndex:'name',width:100},

{id:'descn',header:'描述',dataIndex:'description',width:200}

]);

 

var grid1 = newExt.grid.GridPanel({

title:'员工信息',

renderTo:'grid1',

cm:cm,

store:store,

width:500,

height:350,

enableColumnMove:false,

enableColumnResize:false,

loadMask:true,

/* viewConfig:{

forceFit:true

} */

autoExpandColumn:'descn'

});

 

11.7让表格支持排序

Ext中可以很方便的实现排序功能，只需要在定义列模型时，指定sortable为true即可。

var cm = newExt.grid.ColumnModel([

{header:'编号',dataIndex:'id',width:50},

{header:'名称',dataIndex:'name',width:100,sortable:true},

{id:'descn',header:'描述',dataIndex:'description',width:200}

]);

 

这样名称这一列就支持排序了。

结果如图：

 

 

11.8解决中文排序问题

Ext默认是用ASCII进行排序，我们却按拼音排序，因此Ext自动排好的中文在我们看来一团糟。

如何解决呢？我们可以通过一个sortInfo来为Ext.data.Store设置一个默认的排序方式。

var store = newExt.data.Store({

proxy:newExt.data.MemoryProxy(data),

reader:newExt.data.ArrayReader({},[

{name:'id',mapping:0},

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

{name:'description',mapping:2},

]),

sortInfo:{field:'name',direction:'ASC'}

});

Field:指定排序的列，direction:指定排序方式，ASC升序，DESC降序。

这样排序看起来还是乱套的。

 

 

为了实现正确的中文排序， 我们需要自己重写Ext.data.Store的applySort()函数。

// 让Ext支持中文排序

Ext.data.Store.prototype.applySort = function() {

if( this.sortInfo && !this.remoteSort) {

var s = this.sortInfo,f =s.field;

var st = this.fields.get(f).sortType;

var fn = function(r1,r2) {

var v1 = st(r1,data[f]),v2 = st(r2.data[f]);

if (typeof(v1) == "string") {

returnv1.localeCompare(v2);

}

return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);

};

 

this.data.sort(s.direction,fn);

if (this.snapshot&& this.snapshot != this.data) {

this.snapshot.sort(s.direction,fn);

}

}

}

将这段代码放到ext-all.js或放到页面的最前面，反正在ext初始化后，调用实际代码前就可以了。

 

11.9显示日期类型数据

完整的代码：

var cm = newExt.grid.ColumnModel([

{header:'编号',dataIndex:'id',width:50},

{header:'名称',dataIndex:'name',width:100,sortable:true},

{header:'生日',dataIndex:'birthday',width:100,sortable:true,

/* renderer:new Ext.util.Format.dateRenderer('y-m-d') */

renderer:function(value) {

if (value instanceof Date) {

returnnew Date(value).format('y-m-d');

}

return value;

}

},

{id:'descn',header:'描述',dataIndex:'description',width:200}

]);

 

var data = [

['1','啊','desc1','2000-01-15'],

['2','得','desc2','2010-01-15'],

['3','歌','desc3','2006-01-15'],

['4','波','desc4','2009-01-15'],

['5','此','desc5','2002-01-15']

];

 

var store = newExt.data.Store({

proxy:newExt.data.MemoryProxy(data),

reader:newExt.data.ArrayReader({},[

{name:'id'},

{name:'name'},

{name:'description'},

{name:'birthday'}

]),

sortInfo:{field:'name',direction:'ASC'}

});

 

var grid1 = newExt.grid.GridPanel({

title:'员工信息',

renderTo:'grid1',

cm:cm,

store:store,

width:500,

height:350,

enableColumnMove:false,

enableColumnResize:true,

loadMask:true,

/* viewConfig:{

forceFit:true

} */

autoExpandColumn:'descn'

});

store.load();

在上面的代码中，我加了一列birthday，本来按照文章中的说法，

在ColumnModel中birthday列加

type:’date’,renderer:newExt.util.Format.DateRenderer(‘y-m-d’)，

在Store中的birthday列增加type:’date’,dateFormat:’y-m-d’都不行，没法显示birthday。

然后在往上看到Ext日期格式化的问题，我就想着还不如在后台就格式化好，然后传递一个字符串到页面，直接显示。但是如果是可编辑的列，即日期可以编辑，这样就有问题了，显示的又不对。那么综合起来，就像上面的代码写的，重新写了renderer，如果是Date型就格式化，否则就直接返回。

 

11.10在表格中显示红色的字、图片和按钮

在上面的代码基础上，增加了性别这一列，让男性显示为红色，女性显示为绿色。其实，很简单，通过自定义renderer就可以实现了。

{

header : '性别',

dataIndex : 'sex',

sortable : true,

renderer : function(value) {

if (value == 'man') {

return'<spanstyle="color:red;font-weight:bold">'+ value + '</span>';

}

return'<spanstyle="color:green;font-weight:bold">'+ value + '</span>';

}

}

结果：

 

 

在性别前加图片，这个更容易了。

{

header : '性别',

dataIndex : 'sex',

sortable : true,

renderer : function(value) {

if (value == 'man') {

return'<spanstyle="color:red;font-weight:bold"><img src=”../imgs/man.png”/>'+ value + '</span>';

}

return'<spanstyle="color:green;font-weight:bold"><img src=”../imgs/woman.png”/>'+ value + '</span>';

}

}

 

我们可以在renderer中得到多个参数，如下所示：

Value：要显示的单元格的值。

Cellmeta：单元格的相关属性，主要是Id和Css。

Record：这一行的数据对象，要获取某个列的值，可以通过record.data[“name”]这样获取。

rowIndex:行号，这里的行号是所有记录的顺序。

columnIndex:列号。

Store：创建表格时传递的数据存储器，通过它可以获取表格所有的数据。

 

参数的顺序：

renderer:function(value,cellmeta,record,rowIndex,columnIndex,store) {

 

}

 

11.11为表格的奇偶行设置不同的颜色

在viewConfig中增加getRowClass配置项，用它来处理。

var grid1 = newExt.grid.GridPanel({

title : '员工信息',

renderTo : 'grid1',

cm : cm,

store : store,

width : 700,

height : 350,

enableColumnMove : false,

enableColumnResize : true,

loadMask : true,

viewConfig:{

forceFit:true,

getRowClass:function(record,rowIndex,p,ds){

if (rowIndex % 2 ==0) {

return'oushu-row-color';

}

return'jishu-row-color';

}

},

autoExpandColumn : 'descn'

});

 

CSS：

<style>

.jishu-row-color{

background-color:white;

}

 

.oushu-row-color {

background-color:yellow;

}

</style>

 

结果：

 

 

11.12自动显示行号

只需要在ColumnModel中加入一行代码就可以了。

 

 

还存在一个问题，如果删除表格中的数据，行号就不连续了。那么我们就需要刷新Grid视图，让Grid重新计算行号。

我们在表格上添加一个右键菜单，用它来执行删除操作。

// 添加右键菜单。

grid1.addListener('rowcontextmenu', function(grid, rowIndex, e) {

e.preventDefault();

var menu = newExt.menu.Menu({

id : Ext.id(),

items : [ {

id : Ext.id(),

text : '<span font-weight:"BOLD">删除人员信息</span>',

handler : function() {

store.remove(store.getAt(rowIndex));// 删除对应行的数据

grid1.view.refresh(); //刷新视图，重新计算行号

}

}

]

});

 

menu.showAt(e.getXY());

});

 

 

11.13显示复选框

在ColumnModel中和Grid中增加CheckboxSelectionModel即可。

// 复选框

var sm = newExt.grid.CheckboxSelectionModel();

var cm = newExt.grid.ColumnModel(

[

new Ext.grid.RowNumberer(),

sm,

{

header : '编号',

dataIndex : 'id',

width : 50

},

{

header : '名称',

dataIndex : 'name',

width : 100,

sortable : true

},

{

header : '生日',

dataIndex : 'birthday',

width : 100,

sortable : true,

/* renderer:new Ext.util.Format.dateRenderer('y-m-d') */

renderer : function(value) {

if (value instanceof Date) {

returnnew Date(value).format('y-m-d');

}

return value;

}

},

{

header : '性别',

dataIndex : 'sex',

sortable : true,

renderer : function(value) {

if (value == 'man') {

return'<spanstyle="color:red;font-weight:bold">'+ value + '</span>';

}

return'<span style="color:green;font-weight:bold">'+ value + '</span>';

}

}, {

id: 'descn',

header: '描述',

dataIndex: 'description',

width: 200

} ]);

 

var grid1 = newExt.grid.GridPanel({

title : '员工信息',

renderTo : 'grid1',

cm : cm,

store : store,

width : 700,

height : 350,

enableColumnMove : false,

enableColumnResize : true,

loadMask : true,

viewConfig:{

forceFit:true,

getRowClass:function(record,rowIndex,p,ds){

if (rowIndex %2 == 0) {

return'oushu-row-color';

}

return'jishu-row-color';

}

},

autoExpandColumn : 'descn',

sm:sm

});

 

结果：

 

 

Grid里面提供的这种功能称为行选择模型，单击某个单元格时，选中的是整行，Ext默认的是RowSelectionModel——行选择模型。行选择模型默认支持多选，鼠标单击时按住ctrl/shift就可以选择多行。如果只希望选择一行，设置singleSelect参数为true。

在Grid中设置sm为RowSelectionModel，并指定singleSelect为true。

var grid1 = newExt.grid.GridPanel({

title : '员工信息',

renderTo : 'grid1',

cm : cm,

store : store,

width : 700,

height : 350,

enableColumnMove : false,

enableColumnResize : true,

loadMask : true,

viewConfig:{

forceFit:true,

getRowClass:function(record,rowIndex,p,ds){

if (rowIndex %2 == 0) {

return'oushu-row-color';

}

return'jishu-row-color';

}

},

autoExpandColumn : 'descn',

sm:new Ext.grid.RowSelectionModel({

singleSelect:true

})

});