在ExtJs中将按钮添加到网格

我对ExtJS非常陌生

有人知道如何在ExtJS中向每一行网格添加按钮吗

请给我举个例子

---

谢谢

您应该使用自定义渲染器，但我建议您使用工具栏按钮，而不是更干净

如果你想在这里有更多的参考，来看看ColumnModel类

不管怎么说，它会给出这样的结果

 var grid = new Ext.grid.GridPanel({
     store: store,
     columns: [{
         id: 'company',
         header: 'Company',
         width: 160,
         sortable: true,
         dataIndex: 'company'
     }, {
         header: 'Price',
         width: 75,
         sortable: true,
         renderer: 'usMoney',
         dataIndex: 'price'
     }, {
         header: 'Change',
         width: 75,
         sortable: true,
         renderer: change,
         dataIndex: 'change'
     }, {
         header: '% Change',
         width: 75,
         sortable: true,
         renderer: pctChange,
         dataIndex: 'pctChange'
     }, {
         header: 'Last Updated',
         width: 85,
         sortable: true,
         renderer: Ext.util.Format.dateRenderer('m/d/Y'),
         dataIndex: 'lastChange'
     }, {
         header: 'action',
         width: 85,
         sortable: false,
         renderer: function(val) {
             return '<input type="button" value="toto" id="' + val + '"/>';
         },
         dataIndex: 'somefieldofyourstore'
     }],
     stripeRows: true,
     autoExpandColumn: 'company',
     height: 350,
     width: 600,
     title: 'Array Grid',
     // config options for stateful behavior
     stateful: true,
     stateId: 'grid'
 });

var grid=new Ext.grid.GridPanel({
店:店,，
栏目：[{
id:'公司'，
标题：“公司”，
宽度：160，
可排序：是的，
数据索引：“公司”
}, {
标题：“价格”，
宽度：75，
可排序：是的，
"美国货币",，
数据索引：“价格”
}, {
标题：“更改”，
宽度：75，
可排序：是的，
渲染器：更改，
数据索引：“更改”
}, {
标题：“%Change”，
宽度：75，
可排序：是的，
渲染器：pctChange，
数据索引：“pctChange”
}, {
标题：“上次更新”，
宽度：85，
可排序：是的，
渲染器：Ext.util.Format.dateRenderer（'m/d/Y'），
数据索引：“上次更改”
}, {
标题：“操作”，
宽度：85，
可排序：false，
渲染器：函数（val）{
返回“”；
},
数据索引：“somefieldofyourstore”
}],
是的，
autoExpandColumn:“公司”，
身高：350，
宽度：600，
标题：“数组网格”，
//有状态行为的配置选项
有状态的：是的，
stateId:“网格”
});

这段代码是的摘录

---

对于我建议您的工具栏方式，只需在的工具栏上添加一个按钮并钩住，这样您就可以在用户未选择任何行时禁用按钮

实际上，就我所知，行单元格中的Ext.按钮在当前的Ext设置中是不可能的。当然，在单元格的div中呈现按钮的HTML实际上是可能的，但我认为这是个坏主意

一个更好的方法是实现Saki的rowactions插件，这使得在每一行中添加按钮/操作变得非常容易

---

您可以在这里查看，希望对您有所帮助

---

我要为这个问题添加一个额外的答案，因为这个问题已经发布了，我已经为ExtJS网格组件创建了一个扩展，允许将按钮添加到网格列中

---

请注意，在渲染大量行时，这可能会影响较旧/较慢系统的性能。

您也可以尝试以下代码，将按钮作为图像添加到网格中。下面是代码：

new Ext.grid.ColumnModel([{
    xtype: 'actioncolumn',
    header: "Action",
    items: [{
        icon: '../images/enable.png',
        tooltip: 'Enable App',
        width: 50,
        id: 'enableAppId',
        handler: function(grid, rowIndex) {
            //add code for button click
        }
    }]
}]);

---

我还使用它来启用行数据。

@bensui:我相信在列表的情况下，您必须提供模板来创建标记，所以是的。。。