ExtJs gridpanel 中的按钮列(2)

最新推荐文章于 2018-10-10 10:57:45 发布

原创最新推荐文章于 2018-10-10 10:57:45 发布 · 8.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #function #class #reference #bt #plugins

本文介绍了一种在ExtJS中自定义按钮列的方法，并提供了详细的ButtonColumn组件实现代码及使用示例。

前些日子写了一个关于,按钮列的问题!但是那种按钮列只适合,那种比较差的超级链接方式,有的时候还有其他的需求不能满足,比如下面的这种效果就不好实现了!

所以没办法自己又搞了一个按钮列!

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); } };

具体用法!

ColumnProperts 是什么在我的第一篇关于按钮列的文章里已经有了!

大家可以到哪里去看看!