Button 如何在extjs中的网格视图列中添加按钮？

当创建新行时，一个字段应该包含一个在扩展JS中动态创建的按钮

每个按钮应包含不同的名称和操作侦听器。 该列应如图所示。

Nex尝试：

{
   xtype: 'gridpanel',
   columns: [
       {text: 'NAME', dataIndex: 'name', width: 100},
       {text: 'SURNAME', dataIndex: 'surname', width: 100},
       {
          renderer: function(val,meta,rec) {
             // generate unique id for an element
             var id = Ext.id();
             Ext.defer(function() {
                Ext.widget('button', {
                   renderTo: Ext.query("#"+id)[0],
                   text: 'DELETE',
                   scale: 'small',
                   handler: function() {
                      Ext.Msg.alert("Hello World")
                   }
                });
             }, 50);
             return Ext.String.format('<div id="{0}"></div>', id);
          }
       }
   ]
}

{
xtype:“gridpanel”，
栏目：[
{文本：'NAME'，数据索引：'NAME'，宽度：100}，
{文本：“姓氏”，数据索引：“姓氏”，宽度：100}，
{
渲染器：函数（val、meta、rec）{
//为元素生成唯一id
var id=Ext.id（）；
Ext.defer（函数（）{
Ext.widget（'按钮'{
renderTo:Ext.query（“#”+id）[0]，
文本：“删除”，
规模：“小”，
处理程序：函数（）{
Ext.Msg.alert（“你好，世界”）
}
});
}, 50);
返回Ext.String.format（“”，id）；
}
}
]
}

我将我的矿石放入（ExtJS 5.1）：

---

我认为这是在渲染时在网格列中添加按钮的最佳方法

{
   xtype: 'gridpanel',
   columns: [
       {text: 'name'},
       {
           text: 'add',
           align: 'center',
           renderer: function(value, meta, record) {
                var id = Ext.id();
                Ext.defer(function(){
                    new Ext.Button({
                        text: 'add',
                        handler : function(btn, e) {
                            // do whatever you want here
                        }
                    }).render(document.body, id);
                },50);
                return Ext.String.format('<div id="{0}"></div>', id);
            }
       }
   ]
}

{
xtype:“gridpanel”，
栏目：[
{text:'name'}，
{
文本：“添加”，
对齐：'居中'，
渲染器：函数（值、元、记录）{
var id=Ext.id（）；
Ext.defer（函数（）{
新的分机按钮({
文本：“添加”，
处理程序：函数（btn，e）{
//在这里你想干什么就干什么
}
}).render（文档主体、id）；
},50);
返回Ext.String.format（“”，id）；
}
}
]
}

您可以使用actionColumn。。。最新版本是4.2.2：但它不显示按钮的文本。renderTo必须是dom，而不是id字符串。。Use:renderTo:Ext.query（“#”+id）[0]感谢您提供共享代码

{
   xtype: 'gridpanel',
   columns: [
       {text: 'NAME', dataIndex: 'name', width: 100},
       {text: 'SURNAME', dataIndex: 'surname', width: 100},
       {
           text: 'DELETE',
           align: 'center',
           stopSelection: true,
           xtype: 'widgetcolumn',
           widget: {
                  xtype: 'button',
                  _btnText: "myRandomText",
                  defaultBindProperty: null, //important
                  handler: function(widgetColumn) {
                        var record = widgetColumn.getWidgetRecord();
                        console.log("Got data!", record);
                  },
                  listeners: {
                        beforerender: function(widgetColumn){
                            var record = widgetColumn.getWidgetRecord();
                            widgetColumn.setText( widgetColumn._btnText ); //can be mixed with the row data if needed
                        }
                    }
            }
       }
   ]
}

{
   xtype: 'gridpanel',
   columns: [
       {text: 'name'},
       {
           text: 'add',
           align: 'center',
           renderer: function(value, meta, record) {
                var id = Ext.id();
                Ext.defer(function(){
                    new Ext.Button({
                        text: 'add',
                        handler : function(btn, e) {
                            // do whatever you want here
                        }
                    }).render(document.body, id);
                },50);
                return Ext.String.format('<div id="{0}"></div>', id);
            }
       }
   ]
}