1. #1
    Sencha - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,416
    Vote Rating
    55
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice

      0  

    Default Ext.ux.toolbar.PagingOptions

    One of the extensions I always end up building is a PagingToolbar with an additional ComboBox for selecting the page size. I've done this a million times in Ext 3.x - but here's my attempt at building it in 4.x

    I'm guessing that there's a few improvements that could be made... so any feedback is certainly welcome!

    PHP Code:
    /**
     * @class Ext.ux.toolbar.PagingOptions
     * @namespace Ext.ux.toolbar
     * @extends Ext.toolbar.Paging
     * @constructor
     * @param {object} configObj
     */
    Ext.define('Ext.ux.toolbar.PagingOptions', {
        
    extend'Ext.toolbar.Paging',

        
    getPagingItems: function() {
            var 
    me this,
                
    pagingButtons me.callParent();

            if (!
    Ext.ModelManager.getModel('PageSize')) {
                
    Ext.define('PageSize', {
                    
    extend'Ext.data.Model',
                    
    fields: [{ name'pagesize' type'int'}]
                });
            }

            if (!
    me.pageSizeOptions) {
                
    me.pageSizeOptions = [
                    { 
    pagesize10 },
                    { 
    pagesize25 },
                    { 
    pagesize50 },
                    { 
    pagesize100 },
                    { 
    pagesize250 },
                    { 
    pagesize500 }
                ];
            }

            
    pagingButtons.push({
                
    xtype'combobox',
                
    queryMode'local',
                
    triggerAction'all',
                
    displayField'pagesize',
                
    valueField'pagesize',
                
    width100,
                
    lazyRendertrue,
                
    enableKeyEventstrue,
                
    valueme.pageSize,
                
    forceSelectionme.forceSelection || false,
                
    store: new Ext.data.Store({
                    
    model'PageSize',
                    
    datame.pageSizeOptions
                
    }),
                
    listeners: {
                    
    select: function(thisFieldvalue) {
                        
    me.fireEvent('pagesizeselect'value[0].get('pagesize'));
                    },
                    
    keypress: function(thisFieldeventObj) {
                        if (
    eventObj.getKey() !== eventObj.ENTER) { return false; }
                        
    me.fireEvent('pagesizeselect'thisField.getValue());
                    }
                }
            });

            return 
    pagingButtons;
        },

        
    initComponent : function() {
            var 
    me this;

            
    me.callParent();

            
    me.addEvents(
                
    'pagesizeselect'
            
    );
        }
    }); 
    Updates:
    - 5/10/2011: Corrected name of "pagesizeselect" event
    - 5/25/2011: Added condition on combo "keypress" to only fire event on ENTER key
    - 12/21/2011: Added UX to GitHub
    - https://github.com/arthurakay/Ext.ux....PagingOptions
    Last edited by arthurakay; 21 Dec 2011 at 7:09 AM. Reason: updated the code

  2. #2
    Sencha User
    Join Date
    May 2007
    Location
    Germany
    Posts
    77
    Vote Rating
    1
    AlxH is on a distinguished road

      0  

    Default

    This is a great extension. In 3.x i used the pagesizeplugin in almost every grid.
    What I like to see is a config option to set the predefined page sizes and an option to force to use the predefined sizes. E.g. pagesizeValues und forceSelection.

  3. #3
    Sencha - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,416
    Vote Rating
    55
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice

      0  

    Default

    I could work that in there... I need to update the code above to reflect changes in the 4.0.0 API anyways. I'll post the updates when I get a chance.

  4. #4
    Sencha - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,416
    Vote Rating
    55
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice

      0  

    Default

    I updated my original post to include:
    - forceSelection config (defaults to false)
    - pageSizeOptions config (JSON array of values)

    I also removed the "regModel()" call, as that is deprecated in 4.0.0

  5. #5
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,215
    Vote Rating
    1044
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    Here is my version. Basically just extracted the combobox out to it's own function to make it a bit more customizable. Did some other personal code touchups, we all have out own style

    Code:
    /**
     * @class Ext.ux.toolbar.PagingOptions
     * @namespace Ext.ux.toolbar
     * @extends Ext.toolbar.Paging
     * @constructor
     * @param {object} configObj
     */
    Ext.define('Ext.ux.toolbar.PagingOptions', {
        extend : 'Ext.toolbar.Paging',
    
        getPagingItems: function() {
            var me            = this,
                pagingButtons = me.callParent();
    
            Ext.applyIf(me, {
                pageSizeOptions : [
                    { pagesize : 10  },
                    { pagesize : 25  },
                    { pagesize : 50  },
                    { pagesize : 100 },
                    { pagesize : 250 },
                    { pagesize : 500 }
                ]
            });
    
            pagingButtons.push(me.buildComboBox());
    
            return pagingButtons;
        },
    
        buildComboBox: function() {
            var me = this;
    
            Ext.define('PageSize', {
                extend : 'Ext.data.Model',
                fields : [
                    { name : 'pagesize' , type : 'int'}
                ]
            });
    
            return {
                xtype           : 'combobox',
                queryMode       : 'local',
                triggerAction   : 'all',
                displayField    : 'pagesize',
                valueField      : 'pagesize',
                width           : 100,
                lazyRender      : true,
                enableKeyEvents : true,
                value           : me.pageSize,
                forceSelection  : me.forceSelection || false,
                store           : new Ext.data.Store({
                    model : 'PageSize',
                    data  : me.pageSizeOptions
                }),
                listeners       : {
                    select   : function(combo, value) {
                        me.fireEvent('pagesizeselect', value[0].get('pagesize'));
                    },
                    keypress : function(combo) {
                        me.fireEvent('pagesizeselect', combo.getValue());
                    }
                }
            };
        },
    
        initComponent : function() {
            var me = this;
    
            me.callParent();
    
            me.addEvents(
                'selectpagesize'
            );
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Location
    Brasov, Romania
    Posts
    4
    Vote Rating
    0
    tatacalu is on a distinguished road

      0  

    Default typo ?

    Thank you for this example.
    Last edited by tatacalu; 10 May 2011 at 6:34 AM. Reason: Accidentally submitted the reply before it was finished

  7. #7
    Sencha User
    Join Date
    Mar 2011
    Location
    Brasov, Romania
    Posts
    4
    Vote Rating
    0
    tatacalu is on a distinguished road

      0  

    Question typo ?

    Thank you for this example.
    I wanted to ask if there is an error in both of the scripts:
    Code:
                 listeners       : {
                    select   : function(combo, value) {
                        me.fireEvent('pagesizeselect', value[0].get('pagesize'));
                    },
                    keypress : function(combo) {
                        me.fireEvent('pagesizeselect', combo.getValue());
                    }
                }
    
    //...
    
    
    me.addEvents(             'selectpagesize'         );
    Shouldn't the event names coincide ?

    Thanks!

  8. #8
    Sencha - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,416
    Vote Rating
    55
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice

      0  

    Default

    Nice catch... yes that was a typo on my part.

    I've fixed it in the original example.

  9. #9
    Sencha User
    Join Date
    Mar 2011
    Location
    Brasov, Romania
    Posts
    4
    Vote Rating
    0
    tatacalu is on a distinguished road

      0  

    Question Ext4: constructor, config, initConfig()

    Thank you for the reply.

    I saw in ExtJS4 Class System that a new construct has been introduced for configuration options management:

    Code:
    config: {
    option1: defaultValue1,
    option2: defaultValue2
    // , ... etc...
    }
    In conjunction with it I saw that you can use the following syntax:

    Code:
    constructor: function(config) {
    //...
    this.initConfig(config);
    //...
    return this;
    }
    I tried to modify the first script posted on this thread in order to have configuration management via the Ext4 way but failed. Also I saw that the initComponent function was called before the constructor function. Does that have anything to do with the asynchronous nature of the new class system ?

    I took my information regarding this subject from http://dev.sencha.com/deploy/ext-4.0...ss_system.html but AFAIK it is still a work in progress.

    Also I tried to call:
    Code:
    this.initConfig(config);
    this.callParent();
    in either order, in the constructor with no luck, strange JS errors kept popping up in Firebug.

    Could you please show me a working example of the script with the aforementioned features ?

    Thank you!

  10. #10
    Sencha User
    Join Date
    May 2007
    Location
    Germany
    Posts
    77
    Vote Rating
    1
    AlxH is on a distinguished road

      0  

    Default

    I'm curious about this, too.
    This seems to work:
    PHP Code:
    constructor: function(config) {
            
    this.initConfig(config);
            
    Ext.apply(this,config);
            
    this.callParent(config);
            return 
    this;
        } 
    But if I understand the docs correctly, it should work without the "Ext.apply".

Similar Threads

  1. Nested Panels, Constant bottom toolbar, Page-Dependent top toolbar
    By matrym in forum Sencha Touch 1.x: Examples and Showcases
    Replies: 3
    Last Post: 20 Jul 2011, 7:06 AM
  2. [FIXED-450] Toolbar's shadow covers top of lower toolbar on iPad 3.2
    By Steffen Hiller in forum Sencha Touch 1.x: Bugs
    Replies: 2
    Last Post: 5 Nov 2010, 3:18 PM
  3. Replies: 6
    Last Post: 23 Mar 2010, 4:09 PM
  4. insert button into toolbar wont update the toolbar.items
    By Dr. Flink in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 16 Feb 2009, 11:13 PM

Thread Participants: 10