前些日子写了一个关于,按钮列的问题!但是那种按钮列只适合,那种比较差的超级链接方式,有的时候还有其他的需求不能满足,比如下面的这种效果就不好实现了!
所以没办法自己又搞了一个按钮列!
ButtonColumn.js文件如下:
/*
new Ext.grid.ButtonColumn({ // <reference path="ButtonColumn.js" />
buttenText:'按钮',
Caption : "是否显示",
Name : 'IsView',
onClick:function(ButtonColumn,grid,record,field,value){},
width: 55
});
*/
Ext.grid.ButtonColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
Ext.grid.ButtonColumn.prototype ={
buttonWidth:"95%",
buttenText:'Button',
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
/*
* ButtonColumn:当前列,
* grid:当前的grid,
* record:当前点击行的记录,
* field:当前被点击的列的dataindex,
* value:当前被点击列所对应的dataindex的值
* */
onClick:function(ButtonColumn,grid,record,field,value){
alert('请在此列中添加onClick:function(ButtonColumn,grid,record,field,value)的实现');
},
onMouseDown : function(e, t){
if( t.id ==this.id){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
this.onClick(this,this.grid,record,this.dataIndex,record.data[this.dataIndex]);
}
},
renderer : function(v, p, record) {
var s='<table border="0" width="{2}" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tr>'+
'<td class="x-btn-left" style="padding:0px" mce_style="padding:0px" ></td><td id="{1}" style="vertical-align:middle;LINE-HEIGHT: 22px" mce_style="vertical-align:middle;LINE-HEIGHT: 22px" class="x-btn-center">{0}</td><td class="x-btn-right"></td>'+
"</tr></table>";
return String.format(s,this.buttenText,this.id,this.buttonWidth);
}
};
具体用法!
var bt_fpqxColumn = new Ext.grid.ButtonColumn( {
buttenText : '分配权限',
header : "分配权限",
dataindex : 'roleId',
onClick : function(ButtonColumn, grid, record, field, value) {
var store=grid.store;
FPQXWin(store,record);
}
});
var ColumnProperts = [{
Name : 'roleId',
Caption : "编号",
Type : 'int'
}, {
Name : 'roleName',
Caption : "角色名称",
Type : 'string',
onColumnCilck : viewRole
}, bt_fpqxColumn];
var grid = new Ext.grid.GridPanel( {
store : store,
cm : cm,
sm : sm,
id : 'CenterGrid',
region : 'center',
height : 300,
frame : true,
clicksToEdit : 1,
plugins : bt_fpqxColumn,
......
....
ColumnProperts 是什么在我的第一篇关于按钮列的文章里已经有了!
大家可以到哪里去看看!
