===========================================================
下面我们扩展一下刚才的示例应用一下EditorGridPanel
//
定义数组
var
arr
=
[
[
'
Bill
'
,
'
Gardener
'
,
'
2007-01-02
'
,
-
10
,
true
],
[
'
Ben
'
,
'
Horticulturalist
'
,
'
2007-01-03
'
,
-
20.1
,
false
],
[
'
你
'
,
'
Gardener
'
,
'
2007-02-02
'
,
0
,
true
],
[
'
他
'
,
'
Gardener
'
,
'
2007-01-04
'
,
13
,
false
],
[
'
我
'
,
'
Horticulturalist
'
,
'
2007-01-05
'
,
15.2
,
false
]
];
var
reader
=
new
Ext.data.ArrayReader(
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{}
,
//
定义数组到record的映射关系
[
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{name: 'name'}
,
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{name: 'occupation', mapping: 1}
,
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{name:'date',type: 'date',dateFormat: 'Y-m-d'}
,
//
用指定的格式转换日期
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{name:'float',type:'float'}
,
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{name:'bool',type:'bool'}
]
);
//
生成元数据
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
var
store
=
new
Ext.data.Store(
...
{
reader:reader
}
);
store.loadData(arr);
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
//
自定义可编辑列,从ext的示例抄的,但是却要init郁闷
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
Ext.grid.CheckColumn
=
function
(config)
...
{
Ext.apply(this, config);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(!this.id)...{
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
}
;
//
重写了三个方法,捕捉mousedown修改数据
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
Ext.grid.CheckColumn.prototype
=
...
{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
init : function(grid)...{
this.grid = grid;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
this.grid.on('render', function()...{
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
onMouseDown : function(e, t)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)...{
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
renderer : function(v, p, record)...{
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
//
绑定到bool字段
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
var
checkColumn
=
new
Ext.grid.CheckColumn(
...
{
header: "布尔值",
dataIndex: 'bool'
}
);
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
/**/
/*
现在配置列信息,为了本地化日期选择器,请包含ext-lang-zh_CN.js,并修改Date.dayNames = ["日","一","二","三","四","五","六"];
在Ext.apply(Ext.DatePicker.prototype, {...})中加入okText:"确定",cancelText:"取消";
*/
var
col
=
new
Ext.grid.ColumnModel([
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
new
Ext.grid.RowNumberer(
...
{header:'序号',width:30}
),
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{header:'姓名',sortable: true,dataIndex:'name'}
,
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{header:'职业',sortable: true,dataIndex:'occupation'}
,
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
id:'datacol',
header:'日期',
sortable:true,
dataIndex:'date',renderer: Ext.util.Format.dateRenderer('Y年m月d日'),//格式化显示
editor:new Ext.form.DateField()
}
,
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{header:'数值',sortable:true,dataIndex:'float',renderer:formatFloat,align: 'right',editor:new Ext.form.NumberField()}
,
//
自定义显示方式,右对齐
checkColumn
//
这个"选择框列"看起来的确漂亮些,其实是通过修改背景图片实现的
]);
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
//
配置视图信息
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
var
view
=
new
Ext.grid.GridView(
...
{forceFit:true,sortAscText :'正序', sortDescText :'倒序'}
);
view.columnsText
=
'
列显示/隐藏
'
;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
//
现在我们看看可编辑的数据表格能用了吗
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
var
grid
=
new
Ext.grid.EditorGridPanel(
...
{
el:Ext.getBody(),
height:200,
width:400,
store:store,
cm:col,
view:view
}
);
//
为什么原例不需要init?
checkColumn.init(grid);
grid.render();
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
function
formatFloat(val)
...
{
var bgcolor;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(val>0)...{
bgcolor='#FF0000';
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else if(val<0)...{
bgcolor='#00FF00';
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
else...{
bgcolor='#000000';
}
return( ['<span style="color:',bgcolor,'">',val,'</span>'].join(''));
}