Results 1 to 8 of 8

Thread: Adding button to grid toolbar fails

  1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    30
    Vote Rating
    0
      0  

    Default 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 - Community Support Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,746
    Vote Rating
    80
      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?
    Longtime Sencha engineer. Now surplus to requirements apparently...

  3. #3
    Sencha User
    Join Date
    Dec 2007
    Posts
    35
    Vote Rating
    0
      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
      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 - Community Support Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,746
    Vote Rating
    80
      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
    Longtime Sencha engineer. Now surplus to requirements apparently...

  6. #6
    Ext User
    Join Date
    Jul 2008
    Posts
    30
    Vote Rating
    0
      0  

    Default

    Animal,
    Thanks!

    Don

  7. #7
    Ext User
    Join Date
    Mar 2009
    Posts
    12
    Vote Rating
    0
      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
    8
    Vote Rating
    0
      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);
    }
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •