CODEWITHSUNDEEP
buttongridviewextjs
user1572225
user1572225

Reputation:

How to add button in Grid view column in extjs?

When new row is created, then one field should contain a button created dynamically in Extended JS.

Each button should contain different name and action listener. The column should like given in image. Grid view column with buttons.

Upvotes: 7

Views: 34128

Answers (3)

Oğuz Çelikdemir
Oğuz Çelikdemir

Reputation: 4980

{
   xtype: 'gridpanel',
   columns: [
       {text: 'NAME', dataIndex: 'name', width: 100},
       {text: 'SURNAME', dataIndex: 'surname', width: 100},
       {
           text: 'DELETE',
           align: 'center',
           xtype: 'actioncolumn',
           items: [
               {
                  xtype: 'button',
                  text: 'DELETE ME',
                  scale: 'small',
                  handler: function() {
                      alert("Hello World!");
                  }
               }
           ]
       }
   ]
}

Nex Attempt :

{
   xtype: 'gridpanel',
   columns: [
       {text: 'NAME', dataIndex: 'name', width: 100},
       {text: 'SURNAME', dataIndex: 'surname', width: 100},
       {
          renderer: function(val,meta,rec) {
             // generate unique id for an element
             var id = Ext.id();
             Ext.defer(function() {
                Ext.widget('button', {
                   renderTo: Ext.query("#"+id)[0],
                   text: 'DELETE',
                   scale: 'small',
                   handler: function() {
                      Ext.Msg.alert("Hello World")
                   }
                });
             }, 50);
             return Ext.String.format('<div id="{0}"></div>', id);
          }
       }
   ]
}

Upvotes: 18

RaviPatidar
RaviPatidar

Reputation: 1486

I think this is the best way to add button in grid column on render

{
   xtype: 'gridpanel',
   columns: [
       {text: 'name'},
       {
           text: 'add',
           align: 'center',
           renderer: function(value, meta, record) {
                var id = Ext.id();
                Ext.defer(function(){
                    new Ext.Button({
                        text: 'add',
                        handler : function(btn, e) {
                            // do whatever you want here
                        }
                    }).render(document.body, id);
                },50);
                return Ext.String.format('<div id="{0}"></div>', id);
            }
       }
   ]
}

Upvotes: 5

Serg Tomcat
Serg Tomcat

Reputation: 933

I stick my ore in (ExtJS 5.1):

{
   xtype: 'gridpanel',
   columns: [
       {text: 'NAME', dataIndex: 'name', width: 100},
       {text: 'SURNAME', dataIndex: 'surname', width: 100},
       {
           text: 'DELETE',
           align: 'center',
           stopSelection: true,
           xtype: 'widgetcolumn',
           widget: {
                  xtype: 'button',
                  _btnText: "myRandomText",
                  defaultBindProperty: null, //important
                  handler: function(widgetColumn) {
                        var record = widgetColumn.getWidgetRecord();
                        console.log("Got data!", record);
                  },
                  listeners: {
                        beforerender: function(widgetColumn){
                            var record = widgetColumn.getWidgetRecord();
                            widgetColumn.setText( widgetColumn._btnText ); //can be mixed with the row data if needed
                        }
                    }
            }
       }
   ]
}

Upvotes: 16

Related Questions