Adding button to grid toolbar fails

[dmcclean]

I am attempting to add a button to a top toolbar after it has been created in
a grid, but I get a 'toolbar.addButton is not a function' error. Same thing
when I attempt to use 'toolbar.add' . The code is

function addGridDeleteButtonTopToolbar(grid,url) {
   //Add button to top toolbar      
   var toolbar = grid.getTopToolbar();
   var button = toolbar.addButton( {
                     text: 'Delete Selected',
                     disabled:true,
                     iconCls:'remove',
                     handler : function(){
                         selectedRecords = grid.getSelectionModel().getSelections();
                          Ext.each(selectedRecords, function(record) {
                             grid.store.remove(record);
                          });  
                          updateRecords(grid,url,this,selectedRecords,true);
                         }
                     }); 
...

Stepping through with firebug, there is a toolbar object being returned from the
grid.getTopToolbar() method, but I cannot call add or addButton on it. What
am I doing wrong?

Thanks,
Don Mc

[Animal]

Works fine.

Run up examples/grid/grid3.html and in Firebug's command line type

Ext.getCmp("button-grid").getTopToolbar().addButton({text: 'Test'})

The button appears.

When you break in that function in Firebug, what is "toolbar"? Your toolbar configuration object by any chance?

[DhakouaniM]

Is you toolbar created in your grid's config ?
Example:
new Ext.grid.GridPanel({
...,
tbar: new Ext.Toolbar({
height: 26,
...
}),
...
});

Please note that you might need to specify a default height for your toolbar if you want it rendered empty at the beginning...

A+ Mehdi

[dmcclean]

Animal,
The example works fine. I took the same toolbar config from the example and put it in my code as a test. It still fails. The code looks like this:

 var ipGroupGrid = new Ext.grid.EditorGridPanel({
                    title:'IP Groups',
                    name:'ipGroupGrid',
                    id:'ipGroupGrid',
                    stripeRows: true,
                    region:'center',
                    layout:'fit',
                    height:350,
                    split:true,
                    store: ipGroupStore, 
                    sm: smIpGroup,
                    colModel:  new Ext.grid.ColumnModel([
                       new Ext.grid.RowNumberer(),         
                       {
                         id: 'group_id',
                         header: "Group",
                         dataIndex: 'group_id',
                         renderer: function(v, m, r) { 
                            return r.get('group_name'); 
                         },
                         editor: groupCombo
                       },
                  
                       {
                         id: 'created_at',
                         header: "Create date",
                         dataIndex: 'created_at'
                      },
                      {
                         id: 'updated_at',
                         header: "Last update",
                         dataIndex: 'updated_at'
                      },
                      {
                         id: 'updated_by',
                         header: "Updated By",
                         dataIndex: 'updated_by'
                      } 
                 
                     
                   ]),
                          
                   iconCls:'icon-grid',
   tbar:[{
            text:'Add Something',
            tooltip:'Add a new row',
            iconCls:'add'
        }, '-', {
            text:'Options',
            tooltip:'Blah blah blah blaht',
            iconCls:'option'
        },'-',{
            text:'Remove Something',
            tooltip:'Remove the selected item',
            iconCls:'remove'
        }],    
                 
                   bbar:new Ext.PagingToolbar( { 
                     pageSize: 10,
                     displayInfo: true,
                     store: ipGroupStore,
                     items: ['-',  saveIpGroupUpdateButton ]
                   })
      });  
     
    addGridDeleteButtonTopToolbar('ipGroupGrid','/ip_group/update/1.json');

The function looks like this:

function addGridDeleteButtonTopToolbar(gridname,url) {
   //Add button to top toolbar      
   var grid = Ext.getCmp(gridname);
   var toolbar = grid.getTopToolbar();
   var button = toolbar.addButton( {
                     text: 'Delete Selected',
                     disabled:true,
                     iconCls:'remove',
                   }); ...

I still get the message that toolbar does not have an 'addButton' function. Looking at it in firebug, indeed I don't see any of the add functions.


It acts like I am getting a toolbar config, as you said, but I sure don't know how.
Probably something simple, but I am baffled.

Regards,
Don Mc

[Animal]

It's the config Array until its rendered, at which point it becomes an actual Toolbar.

Just push the button config onto the end of the Array

[dmcclean]

Animal,
Thanks!

Don

[samith143]

How can i remove a tool bar button from data grid.

[aswini.nayak]

I am creating the NavigationPanel class and trying to add a new button on the tbar. Please help me and let me know how I can add a new button on the cellclick.

Ext.ns('aa');
aa.NavigationPanel = Ext.extend(Ext.Panel, {
title: 'NavigationPanel',
layout: 'card',
activeItem: 0,
configData: null,
dataGrid: null,
url: null,
btn:null,

/**
* initComponent
* @protected
*/
initComponent: function () {

this.addEvents({
next: true,
prev: true
});

var rowData = eval(this.configData.rowData);
var fieldList = eval(this.configData.headersList);
var headerList = eval(this.configData.columnsData);
var classObjName = this.configData.classObjName;
var filterSet = eval(this.configData.filterSet);
var pageSize = parseInt(this.configData.pageSize);
var sortBy = this.configData.sortBy
var sortOrder = this.configData.sortOrder

var filters = new Ext.ux.grid.GridFilters({
// encode and local configuration options defined previously for easier reuse
encode: true, // json encode the filter query
remotesort: true, // json encode the filter query
local: false, // defaults to false (remote filtering)
filters: filterSet
});

var relatedClassArr = new Array();

if (this.configData.relatedClasses != undefined) {
for(var i=0; i < this.configData.relatedClasses.length; i++) {
var key = this.configData.relatedClasses[i].identifier;
var text = this.configData.relatedClasses[i].text;
relatedClassArr[i] = text;
}
}

// build the header first
// send the request to generate the arraystore
var proxy = new Ext.data.HttpProxy({
api: {
read: new Ext.data.Connection({ url: this.url, method: 'POST', timeout: 120000 }),
create: null,
update: null,
destroy: null
}
});

var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
root: 'data',
fields: fieldList
});

var store = new Ext.data.Store({
autoLoad: true,
proxy: proxy,
remoteSort: true,
reader: reader,
sortInfo: { field: sortBy, direction: sortOrder },
autoLoad: {
params: {
start: 0,
limit: pageSize
}
}
});

this.dataGrid = new Ext.grid.GridPanel({
store: store,
columns: headerList,
stripeRows: true,
loadMask: true,
plugins: [filters],
layout: 'fit',
frame:true,
autoSizeColumns: true,
autoSizeGrid: true,
AllowScroll : true,
minColumnWidth: 100,
columnLines: true,
classObjName: classObjName,
enableColumnMove: false,
bbar: new Ext.PagingToolbar({
pageSize: pageSize,
store: store,
displayInfo: true,
autoScroll: true,
plugins: [filters]
})
});

this.dataGrid.on('cellclick',function(grid,rowIndex,columnIndex,e){

/**** how to add a new toolbar button here ************/

}
});

this.items = [
this.dataGrid
];

this.tbar = this.buildToolbar();

// super
aa.NavigationPanel.superclass.initComponent.call(this);
},

buildToolbar: function () {
return [{
id: "card-1",
xtype:"tbbutton",
tooltip:'Crum 1',
text:'1...',
disabled: false,
handler: this.onOpen,
scope: this
}]
},

onOpen: function (btn, ev) {
var l = this.getLayout();
var i = l.activeItem.id.split('card-')[1];
var next = parseInt(i, 10) + 1;
l.setActiveItem(next);
var t = this.getTopToolbar();

t.add([{
id: "card-btn-"+i,
xtype: "tbbutton",
tooltip: 'Crum '+i,
text: i+'...',
disabled: false,
handler: this.onOpen,
scope: this
}]);

t.doLayout();
this.fireEvent('next', this, i);
}
});