how to place button in grid cell?

[bcamp1973]

I'm *very* new to ExtJS so i'm just learning the ropes. My Javascript (and programming skills in general) are fairly basic. I'm attempting to build a grid where the last column contains one or more buttons. The data for the grid is being pulled from an xml file. I'm guessing the buttons would be a plugin? How would i accomplish that?

Here's my xml...

<catalog>
  <attribute>
    <name>First Name</name>
    <type>Text</type>
    <min></min>
    <max>30</max>
    <defaultVal></defaultVal>
    <required>true</required>
    <action></action>
  </attribute>
  <attribute>
    ...
  </attribute>
</catalog>

and my javascript...

Ext.onReady(function(){
    Ext.QuickTips.init();
    
    // shorthand alias
    var fm=Ext.form;

    // custom column plugin example
    var checkColumn=new Ext.grid.CheckColumn({
       header:"Required?",
       dataIndex:'required',
       width:75
    });

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm=new Ext.grid.ColumnModel([{
           id:'name',
           header:"Name",
           dataIndex:'name',
           width:220,
           editor:new fm.TextField({
               allowBlank:false
           })
        },{
           header:"Type",
           dataIndex:'type',
           width:130,
           editor:new Ext.form.ComboBox({
               typeAhead:true,
               triggerAction:'all',
               transform:'type',
               lazyRender:true,
               listClass:'x-combo-list-small'
            })
        },{
           header:"Min",
           dataIndex:'min',
           width:50,
           align:'center',
           editor:new fm.TextField({
               allowBlank:true
           })
        },{
           header:"Max",
           dataIndex:'max',
           width:50,
           align:'center',
           editor:new fm.TextField({
               allowBlank:true
           })
        },{
           header:"Default",
           dataIndex:'defaultVal',
           width:80,
           align:'left',
           editor:new fm.TextField({
               allowBlank:true
           })
        },
        checkColumn,
        {
           header:"Action",
           dataIndex:'action',
           width:80,
           align:'left'
        }
    ]);

    // by default columns are sortable
    cm.defaultSortable=true;

    // this could be inline, but we want to define the Plant record
    // type so we can add records dynamically
    var Attribute=Ext.data.Record.create([
           // the "name" below matches the tag name to read, except "availDate"
           // which is mapped to the tag "availability"
           {name:'name', type:'string'},
           {name:'botanical', type:'string'},
           {name:'type'},
           {name:'min'},
           {name:'max'},
           {name:'defaultVal'},
           {name:'required', type:'bool'},
           {name:'action'}
      ]);

    // create the Data Store
    var store=new Ext.data.Store({
        url:'assets/xml/attributes.xml',
        reader:new Ext.data.XmlReader({record:'attribute'}, Attribute),
        sortInfo:{field:'name', direction:'ASC'}
    });

    // create the editor grid
    var grid=new Ext.grid.EditorGridPanel({
        store:store,
        cm:cm,
        renderTo:'editor-grid',
        autoWidth:true,
        height:300,
        autoExpandColumn:'name',
        title:'Edit Attributes?',
        frame:true,
        plugins:checkColumn,
        clicksToEdit:1,

        tbar:[{
            text:'Add Attribute',
            handler:function(){
                var p=new Attribute({
                    name:'New Attribute Name',
                    type:'Text',
                    min:0,
                    max:0,
                    defaultVal:'',
                    required:false,
                    action:'?'
                });
                grid.stopEditing();
                store.insert(0, p);
                grid.startEditing(0, 0);
            }
        }]
    });

    // trigger the data store load
    store.load();
});

Ext.grid.CheckColumn=function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id=Ext.id();
    }
    this.renderer=this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype={
    init:function(grid){
        this.grid=grid;
        this.grid.on('render', function(){
            var view=this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },

    onMouseDown:function(e, t){
        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
            e.stopEvent();
            var index=this.grid.getView().findRowIndex(t);
            var record=this.grid.store.getAt(index);
            record.set(this.dataIndex, !record.data[this.dataIndex]);
        }
    },

    renderer:function(v, p, record){
        p.css += ' x-grid3-check-col-td'; 
        return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">*</div>';
    }
};

[mints]

I have once puzzled with the problem also. And I found the solution on the forum. the solution is as follows:
1)Define the button column with renderer when new ColumnModel

{
    header: "Button",
    dataIndex: 'button',
    width: 130,
    renderer: renderBtn
}

2)Define the renderder function

function renderBtn(val, p, record) {  
        var contentId = Ext.id();
        createGridButton.defer(1, this, [val, contentId, record]);
        return('<div id="' + contentId + '"></div>');
    }
function createGridButton(value, contentid, record) {
        new Ext.Button({text: value, handler : function(btn, e) {
            alert("record data="+record.data);
        }}).render(document.body, contentid);
    }

Wish the code sample will be helpful.

[m0ntassar]

Just a suggestion : You may want to use icon images, buttons are too blky

[bhomass]

is there a sample code on how you then attach action to the button which takes into account the item Id of the grid row?

[mjlecomte]

Look for the rowactions extension/plugin on www.extjs.eu

[jasmina]

Just a suggestion : You may want to use icon images, buttons are too blky

This is a wonderful work. can you tell me how do i delete a row in the grid. i mean now you have a button again each row. So without selecting an cell in the row i need to delete the row when clicked on the row corresponding to that row.

[SebTardif]

If we create a component in a renderer are we not responsible to destroy them or that will create a memory leak?

[kyrillos52]

Hello,

To avoid repeating the thread, i post here.
I'm trying to display buttons in specific cells into a grid thanks to an id.
I have a JSONArray, called "devices" here, with the id corresponding to the cells:

[{"nom":"test","id":"1"},{"nom":"test","id":"4"},{"nom":"test","id":"6"},{"nom":"test","id":"7"}

this is myGrid.ui.js:

myGridUi = Ext.extend(Ext.grid.GridPanel,
{
    title: 'Network Mapping',
    ref: 'mon_grid',
    store: 'DataStore',
    border: false,
    height: 800,
    autowidth: true,
    initComponent: function()
    {
        this.columns =
        [
            {
                xtype: 'gridcolumn',
                header: '1',
                renderer: renderIcon
            },
            {
                xtype: 'gridcolumn',
                header: '2',
                renderer: renderIcon
            },
            {
                xtype: 'gridcolumn',
                header: '3',
                renderer: renderIcon
            }
        ];
        myGridUi.superclass.initComponent.call(this);
    }
});

1 actually have this code to read into the JSONArray,
This is a grid with 3 columns and 3 rows:

// Function spells in each cells of the grid
function renderIcon(val, p)
{
    // Define the contentId in order to place buttons into the grid.
    var contentId = Ext.id();
    
    // I define this variable in anoter file to make it global, I can increment it now.
    cellId++;
    
    // Read into devices, the JSONArray:
    Ext.each(devices, function(op)
        {
            if((cellId-1) == op.id)
            {
                createButton.defer(1, this, [val, contentId, op.nom" "+op.id]);
                return('<div id="' + contentId + '"></div>');
            }
        }
    );
}

// Function wich create the button
function createButton(val, contentid, text)
{
    new Ext.Button({
        text: text,
        handler: function(btn, e)
        {
            // Action with the button
            var window = new WindowItem
            ({
                renderTo:    Ext.getBody()
            });
            // Display the new window
            window.show();
        }
    }).render(document.body, contentid);
}

My problem is when I use this code, it displays all buttons in one cell.
It creates graphic errors too.