1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    30
    Vote Rating
    0
    dmcclean is on a distinguished road

      0  

    Default Adding button to grid toolbar fails

    Adding button to grid toolbar fails


    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

    Code:
    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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Works fine.

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

    Code:
    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?

  3. #3
    Ext User
    Join Date
    Dec 2007
    Posts
    34
    Vote Rating
    0
    DhakouaniM is on a distinguished road

      0  

    Default


    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

  4. #4
    Ext User
    Join Date
    Jul 2008
    Posts
    30
    Vote Rating
    0
    dmcclean is on a distinguished road

      0  

    Default


    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:

    Code:
     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:

    Code:
    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

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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

  6. #6
    Ext User
    Join Date
    Jul 2008
    Posts
    30
    Vote Rating
    0
    dmcclean is on a distinguished road

      0  

    Default


    Animal,
    Thanks!

    Don

  7. #7
    Ext User
    Join Date
    Mar 2009
    Posts
    12
    Vote Rating
    0
    samith143 is on a distinguished road

      0  

    Default


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

  8. #8
    Sencha User aswini.nayak's Avatar
    Join Date
    Aug 2010
    Location
    India - Hyderabad
    Posts
    7
    Vote Rating
    0
    aswini.nayak is on a distinguished road

      0  

    Default


    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);
    }
    });