ExtJs gridPanel行添加操作按钮的方法

ゞ浴缸里的玫瑰 2021-09-14 12:18 1034阅读 0赞

### 需求 ###

在gridPanel中添加操作列是非常常见的，实现如下效果  
![这里写图片描述][SouthEast]

在ExtJs中有两种添加按钮的方法：

#### **一、如第二三列** ####

*  xtype: ‘actioncolumn’

{ text: '操作2', xtype: 'actioncolumn', align:"center", width: 100, items: [ { tooltip: '更改', icon: "images/edit.png", handler: function(grid, rowIndex, colIndex) { alert(1); }
            }
        ]
    },

#### **二、如最后一列** ####

{
      text: '查看明细',
        xtype: 'gridcolumn',
        width: 150,
        align: 'center',
        renderer: function (value, metaData, record) { 
            var id = metaData.record.id;
            metaData.tdAttr = 'data-qtip="查看当前明细"';
            Ext.defer(function () { 
                Ext.widget('button', {
                    renderTo: id,
                    height: 20,
                    width: 50,
                    // style:"margin-left:5px;background:blue;",
                    text: '明细',
                    handler: function () { 
                        //相应事件方法
                        alert(1);
                    }
                });
            }, 50);
            return Ext.String.format('<div id="{
       0}"></div>', id);
        }
    }

#### **三、添加多个按钮时** ####

{
       xtype: 'gridcolumn',
        width: 180,
        dataIndex: 'operate',
        text: '操作项',
        align: 'center',
        renderer: function (value, metaData, record) { 
            var bflag = false;
            var id = metaData.record.id;//Ext.id();
            metaData.tdAttr = 'data-qtip="提示信息"';
            Ext.defer(function () { 
                Ext.widget('toolbar', {
                    renderTo: id,
                    dock: 'top',
                    style: 'margin:0',
                    ui: 'footer',
                    height: 40,
                    width: 150,
                    items: [
                        {
                            xtype: 'button',
                            width: 50,
                            height: 25,
                            text: '操作按钮1',
                            disabled: bflag,
                            handler: function () { 
                                     //相应事件方法
                            }
                        },
                        {
                            xtype: 'button',
                            width: 80,
                            height: 25,
                            text: '操作按钮2',
                            handler: function () { 
                                   //相应事件方法
                            }
                        }
                    ]
                });
            }, 50);
            return Ext.String.format('<div id="{0}"></div>', id);
        }
    }

[SouthEast]: /images/20210726/707fc4df7b384ebe93fd77fb5f88c011.png