1. #1
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,346
    Vote Rating
    32
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default Ext.ux.toolbar.PagingOptions

    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
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  2. #2
    Sencha User
    Join Date
    May 2007
    Location
    Germany
    Posts
    73
    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 - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,346
    Vote Rating
    32
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      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.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  4. #4
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,346
    Vote Rating
    32
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      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
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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 Forum Manager
    ________________
    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 ?

    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 ?

    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 - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,346
    Vote Rating
    32
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


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

    I've fixed it in the original example.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  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()

    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
    73
    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