Question

我是 ExtJS 的新手。

有没有人知道如何在 ExtJS 中为每一行网格添加按钮？

请举个例子。

由于

Answer 1

你可以在这里查看，希望它有所帮助！

http://techmix.net/blog/2010/11/25/add-button-to-extjs-gridpanel-cell-using-renderer/

Answer 2

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

更好的方法是实现Saki的rowactions插件，这样可以很容易地为每一行添加按钮/操作。

http://rowactions.extjs.eu/

Answer 3

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

如果您想在此处获得更多参考，请访问ColumnModel类的documentation。

无论如何它会给出类似的东西

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

此代码段是this sample的摘录。

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

Answer 4

您也可以尝试使用此代码添加按钮，因为网格中的图像是代码：

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

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

Answer 5

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

https://github.com/Inventis/Ext.ux.grid.ButtonColumn

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

在ExtJs中添加按钮到网格

5 个答案: