將Ext.Button添加到ExtJS columnmodel

我創建了一個Ext.grid.GridPanel。我正在嘗試將列號xtype: button添加到列模型中。我不確定，如果我能做到這一點。下面是我的代碼，也這是的jsfiddle http://jsfiddle.net/bXUtQ/將Ext.Button添加到ExtJS columnmodel

我使用ExtJS的3.4

Ext.onReady(function() { 
    var myData = [[ 'Lisa', "[email protected]", "555-111-1224"], 
       [ 'Bart', "[email protected]", "555-222-1234"], 
       [ 'Homer', "[email protected]", "555-222-1244"], 
       [ 'Marge', "[email protected]", "555-222-1254"]]; 

    var store = new Ext.data.ArrayStore({ 
    fields:[ { 
     name: 'name' 
    }, 
    { 
     name: 'email' 
    }, 
    { 
     name: 'phone' 
    }], 
    data: myData 
    }); 
    var grid = new Ext.grid.GridPanel({ 
    renderTo: 'grid-container', 
    columns:[ { 
     header: 'Name', 
     dataIndex: 'name' 
    }, 
    { 
     header: 'Email', 
     dataIndex: 'email' 
    }, 
    { 
     header: 'Phone', 
     dataIndex: 'phone' 
    }, 
    { 
     header: 'action', 
     xtype: 'actioncolumn', 
     iconCls: 'delete-icon' 
     text: 'Delete', 
     name: 'deleteBtn', 
     handler: function(grid, rowIndex, colIndex, item, e) { 
      alert('deleted'); 
     }  
    },    

    ////////////////////////////// 
    //I cannot add this column 
    { 
     header: 'action', 
     xtype: 'button', 
     text: 'update', 
     name: 'btnSubmit' 
    } 
    ], 
    store: store, 
    frame: true, 
    height: 240, 
    width: 500, 
    title: 'Framed with Row Selection', 
    iconCls: 'icon-grid', 
    sm: new Ext.grid.RowSelectionModel({ 
     singleSelect: true 
    }) 
    }); 
});

來源

2013-03-13 user2073131

您使用的是'actioncolumn'爲您刪除「按鈕」。爲什麼不把它用於你的提交按鈕呢？ – A1rPun 2013-03-13 15:58:31

actioncolumn用於測試xtype。謝謝。 – user2073131 2013-03-13 16:08:05

不能使用一個按鈕，就這樣一列中的鏈接。我們正在使用以下UX來實現你所要求的。不幸的是這是ExtJS的4.1：

http://www.sencha.com/forum/showthread.php?148064-Component-Column-Components-in-Grid-Cells

來源

2013-03-13 15:49:49

我發現這個http://techmix.net/blog/2010/11/25/add-button-to-extjs-gridpanel-cell-using-renderer/ 所以我修改了一下我的代碼，你可以看看在這裏http://jsfiddle.net/bXUtQ/1/。它似乎臃腫。但現在按鈕在那裏。 – user2073131 2013-03-13 16:11:58

所以你有解決方案？如果可以，請將修改後的代碼放在這裏，並將其作爲答案。因此，在接受的答案中進行深入研究將會很有幫助。 – vajrakumar 2013-04-16 15:35:21

你可以嘗試電網RowActions。

來源

2013-04-27 22:12:15

你會嘗試這是您的actioncolumn

{ 
    xtype: 'actioncolumn', 
    width: 50, 
    items: 
    [ 
     { 
      icon: 'app/resources/images/cog_edit.png', // Use a URL in the icon config 
      tooltip: 'Edit', 
      handler: function (grid, rowIndex, colIndex) { 
       var rec = grid.getStore().getAt(rowIndex); 
       alert("Edit " + rec.get('name')); 
      } 
     }, 
     { 
      icon: 'app/resources/images/delete.png', 
      tooltip: 'Delete', 
      handler: function (grid, rowIndex, colIndex) { 
       var rec = grid.getStore().getAt(rowIndex); 
       alert("Terminate " + rec.get('name')); 
      } 
     } 
    ] 
}

或者你可以嘗試這個插件爲actioncolumnbutton

來源

2013-09-30 13:37:26

將Ext.Button添加到ExtJS columnmodel

回答

相關問題