1. #1
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,353
    Vote Rating
    33
    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,353
    Vote Rating
    33
    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,353
    Vote Rating
    33
    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,754
    Vote Rating
    828
    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,353
    Vote Rating
    33
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi