1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    70
    Vote Rating
    0
    NeonMonk is on a distinguished road

      0  

    Default Adding buttons to Combobox PagingToolbar

    Adding buttons to Combobox PagingToolbar


    Hi guys,

    I'm just wondering if it is possibly to add items to a ComboBox pagingToolbar. Perhaps using a seperate pagingToolbar like you do for a grid. I've tried creating a paging toolbar and binding it to a store. If I don't have a pagesize on the combobox it simply doesn't load any data. If I have a pageSize it uses its own paging toolbar.

    Is there a simple way of doing this?

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Are you looking for this extension?

  3. #3
    Ext User
    Join Date
    Jan 2008
    Posts
    70
    Vote Rating
    0
    NeonMonk is on a distinguished road

      0  

    Default


    Unfortunately no...

    In the paging grid example this is how the pagingtoolbar for the grid is created:

    PHP Code:
    bbar: new Ext.PagingToolbar({
                
    pageSize25,
                
    storestore,
                
    displayInfotrue,
                
    displayMsg'Displaying topics {0} - {1} of {2}',
                
    emptyMsg"No topics to display",
                
    items:[
                    
    '-', {
                    
    pressedtrue,
                    
    enableToggle:true,
                    
    text'Show Preview',
                    
    cls'x-btn-text-icon details',
                    
    toggleHandlertoggleDetails
                
    }]
            }) 
    Notice the 'items' for additional toolbar items.

    I'm trying to figure out how to do this for a combobox paging toolbar. It seems the only way to create a pagingtoolbar for a combobox is to set the 'pageSize' in the config.

    I'd just like to add a toggle button either after creation or like the bbar above...

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Sorry, I misunderstood the question.

    Use:

    Code:
    var combo = new Ext.form.ComboBox({
      ...
      pageSize: 25,
      lazyInit: false,
      listeners: {
        render: function(c) {
          c.pageTb.addSeparator();
          c.pageTb.addButton({text: 'My Button'});
        }
      }
    });

  5. #5
    Ext User
    Join Date
    Jan 2008
    Posts
    70
    Vote Rating
    0
    NeonMonk is on a distinguished road

      0  

    Default


    Excellent thank you so much.

    I wasn't able to get it to work on render (pageTb had not properties blah blah). But did manage to get it to work on expand. I'm sure this is my fault but am in a slight rush to get this app functional so here is how I implemented it:

    PHP Code:
    expand: function(c) {
                      
    c.pageTb.addSeparator();
                      
    c.pageTb.addButton({text'My Button'});
                      
    c.purgeListeners();
                      
    c.addListener('change',function(){c.markInvalid();});
                    } 
    Many thanks.

  6. #6
    Ext User
    Join Date
    Jan 2008
    Posts
    70
    Vote Rating
    0
    NeonMonk is on a distinguished road

      0  

    Default


    It didn't work because I hadn't set lazyInit to false. Stupidly I thought it defaulted to false. Heh.

    Again, thanks for that Condor, saved me.

    Cheers.

  7. #7
    Sencha User sahadat's Avatar
    Join Date
    Jul 2010
    Location
    Montreal
    Posts
    6
    Vote Rating
    0
    sahadat is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    Sorry, I misunderstood the question.

    Use:

    Code:
    var combo = new Ext.form.ComboBox({
      ...
      pageSize: 25,
      lazyInit: false,
      listeners: {
        render: function(c) {
          c.pageTb.addSeparator();
          c.pageTb.addButton({text: 'My Button'});
        }
      }
    });
    var Item_Name_MAPPING = [ {name: 'id', mapping: 'id'},
    {name: 'country_id', mapping: 'country_id'},
    {name: 'name', mapping: 'name'}];
    var ItemNameDataStore = new Ext.data.Store({
    reader: ItemNameDataReader,
    proxy: new Ext.data.HttpProxy({url: 'data.php', method: 'GET'}),
    baseParams:{datatype: "TaxFee",}
    });
    var item_name = new Ext.form.ComboBox({
    store: ItemNameDataStore,
    fieldLabel: 'Item Names',
    name: 'item_name',
    valueField:'item_name',
    displayField:'item_name',
    typeAhead: false,
    forceSelection: false,
    editable:false,
    disableKeyFilter: true,
    allowBlank: false,
    resizable: true,
    tpl:ItemNameTpl,
    itemSelector: 'div.comboItemNameTpl-item',
    pageSize:10,
    width:200,
    msgTarget: 'side',
    minChars: 1,
    triggerAction:'all',

    pageSize: 25,
    lazyInit: false,
    listeners: {
    render: function(c) {
    c.pageTb.addSeparator();
    c.pageTb.addButton({text: 'My Button'});
    } }
    });
    My data are loading by ajax and Paging showed up but it did not add the button. it is not adding anything. Can you help.

  8. #8
    Sencha User sahadat's Avatar
    Join Date
    Jul 2010
    Location
    Montreal
    Posts
    6
    Vote Rating
    0
    sahadat is on a distinguished road

      0  

    Default


    never mind It works Thanks

  9. #9
    Sencha User sahadat's Avatar
    Join Date
    Jul 2010
    Location
    Montreal
    Posts
    6
    Vote Rating
    0
    sahadat is on a distinguished road

      0  

    Default


    it actually worked when use

    c.pageTb.doLayout();
    so My code looks like as following:

    listeners: {
    afterrender: function(c) {

    c.pageTb.addSeparator();
    c.pageTb.insertButton(c.pageTb.items.length+1,{text: 'New',iconCls: 'wa-grid-action-add', tooltip: 'Select as new', handler: function(){alert('Hello')} });
    c.pageTb.doLayout();


    }

    Thanks

Thread Participants: 2