Add Ext.Button to ExtJS columnmodel

Question

I'm creating an Ext.grid.GridPanel. I am trying to add column with xtype: button to the column model. I am not sure, if I can do that though. Below is my code and also this is a link to jsfiddle http://jsfiddle.net/bXUtQ/

I am using extjs 3.4

Ext.onReady(function () {
  var myData = [[ 'Lisa', "lisa@simpsons.com", "555-111-1224"],
                [ 'Bart', "bart@simpsons.com", "555-222-1234"],
                [ 'Homer', "home@simpsons.com", "555-222-1244"],
                [ 'Marge', "marge@simpsons.com", "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
    })
  });
});

You are using an `actioncolumn` for your delete "button". Why not use it for your submit button too? — A1rPun, Mar 13 '13 at 15:58

score 0 · Answer 1 · answered Mar 13 '13 at 15:49

0

You can't use a button as a column just like that. We're using the following UX to achieve just what you're asking. Unfortunately this is for ExtJS 4.1:

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

answered Mar 13 '13 at 15:49

Johan Haest

4,391
28
37

I found this http://techmix.net/blog/2010/11/25/add-button-to-extjs-gridpanel-cell-using-renderer/ so I modified my code a bit, you can look at it here http://jsfiddle.net/bXUtQ/1/. it seemed bloated. but the button is there now. – user2073131 Mar 13 '13 at 16:11
So you got solution ? If so can you please put modified code here and accept it as answer. So that it would be helpfull to drill down in accepted answers. – vajrakumar Apr 16 '13 at 15:35

score 0 · Answer 2 · answered Apr 27 '13 at 22:12

0

You can try to Grid RowActions.

answered Apr 27 '13 at 22:12

Darin Kolev

3,401
13
31
46

score 0 · Answer 3 · answered Sep 30 '13 at 13:37

Will you try this as your 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'));
            }
        }
    ]
}

Or You can try this Plugin for actioncolumnbutton

Add Ext.Button to ExtJS columnmodel

3 Answers3