Ext.js 为grid表格添加按钮操作列

直接展示操作列的代码，共三种方式

方式一 ：actioncolumn

                  {
                    text: '列标题',
                    xtype: 'actioncolumn',
                    stopSelection:false, //列可选
                    innerCls:'',
                    style:'border:0;',
                    flex: 1,
                    //disabledCls:'item-disabled-templategrid',
                    items: [{
                        iconCls: '',
                        tooltip: '提示信息',
                        isDisabled: function (grid, rowIndex) {
                          
                        },
                        handler: function (grid, rowIndex) {
                            
                        }
                    }, {
                        iconCls: '',
                        tooltip: '提示信息',
                        isDisabled: function (grid, rowIndex) {
                          
                        },
                        handler: function (grid, rowIndex) {
                            
                        }
                    }}

PROPERTIES
icon : String
The url of an image to display as the clickable element in the column.
iconCls : String
A CSS class to apply to the icon image. To determine the class dynamically, configure the item with a getClass function.
getClass : Function
A function which returns the CSS class to apply to the icon image.
v : Object
The value of the column’s configured field (if any).
metadata : Object
An object in which you may set the following attributes:
css : String
A CSS class name to add to the cell’s TD element.
attr : String
An HTML attribute definition string to apply to the data container element within the table cell (e.g. ‘style=“color:red;”’).
r : Ext.data.Model
The Record providing the data.
rowIndex : Number
The row index.
colIndex : Number
The column index.
store : Ext.data.Store
The Store which is providing the data Model.
handler : Function
A function called when the icon is clicked.
view : Ext.view.Table
The owning TableView.
rowIndex : Number
The row index clicked on.
colIndex : Number
The column index clicked on.
item : Object
The clicked item (or this Column if multiple cfg-items were not configured).
e : Event
The click event.
record : Ext.data.Model
The Record underlying the clicked row.
row : HTMLElement
The table row clicked upon.
isDisabled : Function
A function which determines whether the action item for any row is disabled and returns true or false.
view : Ext.view.Table
The owning TableView.
rowIndex : Number
The row index.
colIndex : Number
The column index.
item : Object
The clicked item (or this Column if multiple cfg-items were not configured).
record : Ext.data.Model
The Record underlying the row.
getTip : Function
A function which returns the tooltip string for any row.
v : Object
The value of the column’s configured field (if any).
metadata : Object
An object in which you may set the following attributes:
css : String
A CSS class name to add to the cell’s TD element.
attr : String
An HTML attribute definition string to apply to the data container element within the table cell (e.g. ‘style=“color:red;”’).
r : Ext.data.Model
The Record providing the data.
rowIndex : Number
The row index.
colIndex : Number
The column index.
store : Ext.data.Store
The Store which is providing the data Model.
scope : Object
The scope (this reference) in which the handler, getClass, isDisabled and getTip functions are executed. Fallback defaults are this Column’s configured scope, then this Column.
tooltip : String
A tooltip message to be displayed on hover. Ext.tip.QuickTipManager must have been initialized.
The tooltip may also be determined on a row by row basis by configuring a getTip method.
disabled : Boolean
If true, the action will not respond to click events, and will be displayed semi-opaque.
This item may also be disabled on a row by row basis by configuring an isDisabled method.
官方的一段说明，这种形式比较受限制，比如items里面只有上面列出的几个属性，按钮可以是图片或者是class,也可以添加tip提示信息，但是只有当按钮点击的时候才能触发某一个事件，如果我们想鼠标悬浮时也添加些效果就比较困难，因为items里面的元素并非是一个button。
这里有一点要注意：isDisabled是一个方法，可以动态的设置某一个图标是否可用，但在不可用的情况下该图标不会隐藏，可以设置disabledCls:‘item-disabled-templategrid’,属性，给其指定

 .item-disabled-templategrid{
         display: none;'
  }

方式二——widgetcolumn

官方解释：
A widget column is configured with a widget config object which specifies an xtype to indicate which type of Widget or Component belongs in the cells of this column.
When a widget cell is rendered, a Ext.Widget or Ext.Component of the specified type is rendered into that cell. Its defaultBindProperty is set using this column’s dataIndex field from the associated record.
widgetcolumn 里面可以放置一个组件可以借助这一点向下延申，既然可以放置组件，那么container和panel也是组件，而在一个容器中可以做的事就比较多了。

                  {
                    xtype: 'widgetcolumn',
                    width: 180,
                    text: '操作项',
                    align: 'center',
                    stopSelection:false,
                    widget: {
                        xtype: 'container',
                        layout:'hbox',
                        defaults:{
                            xtype:'button',
                            baseCls: '',
                        },
                        items:[
                            {
                                itemId:'genghuan',
                                iconCls: 'icon-action-templategrid',
                                hidden:false,
                                handler: function(btn) {
                                    console.log(btn.up('container').getWidgetRecord())
                                },
                                listeners:{
                                    mouseover:function (btn,e,eOpts){
                                        var tipbubble = Ext.getCmp('tipbubble_seltype');
                                        var el = Ext.get(e.target);
                                        // tipbubble.setTarget([el])
                                        var t = tipbubble.showAt(el.getX() + el.getWidth() / 2 - tipbubble.getTipOffset(), el.getY() + el.getHeight() * 1.2);
                                        if (t != null) {
                                            t.getEl().on('mouseleave', function (e) {
                                                t.hide();
                                            });
                                        }
                                    }
                                }
                            }
                        ]
                    },
                    onWidgetAttach:function (column,widget,record){
                        var t = record.get('fileid') === '' || record.get('fileid') === null || record.get('fileid') === undefined;
                        widget.down('#genghuan').setVisible(!t)
                    }
                }

如果一个操作列只有一个按钮就好办了，widget里面的xtype属性可以直接给button，然后click事件或handler事件调用btn.getWidgetRecord()方法即可获取该行的数据集合。但如果想在一列中放置多个按钮就要给其一个continer并在其内部添加多个按钮，这时候要想点击后获取一行的数据就要用btn.up().getWidgetRecord()来获取。这是最灵活的一种方式了。

方式三——templatecolumn

 {
                    text: '测试',
                    flex: 1,
                    xtype: 'templatecolumn',
                    tpl: [
                        "<tpl if='this.isDisabledNotFile(values)'>",
                        "<i title=''  class='icon-action-templategrid'></i>",
                        "</tpl>",
                        "<tpl if='this.isDisabledFile(values)'>",
                        "<i title=''  class='icon-action-templategrid'></i>",
                        "</tpl>",
                        "<tpl if='this.isDisabledFile(values)'>",
                        "<i title='' οnclick='me.testclick(this)' class='icon-action-templategrid'></i>",
                        "</tpl>",
                        {
                            isDisabledNotFile:function (record){
                               
                            },
                            isDisabledFile:function (record){
                             
                            }
                        }
                    ],
                }

直接使用模板来控制使用，可以简单的在点击事件后传递参数，也可添加不同类型的事件。其本质是直接操作html元素。