Results 1 to 2 of 2

Thread: Paging plugin not working on tab swtich..load more disappear on tab swtich [urgent]

  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    2
    Vote Rating
    0
      0  

    Exclamation Unanswered: Paging plugin not working on tab swtich..load more disappear on tab swtich [urgent]

    Hi Everyone,
    I am using following code in which i'm displaying list on click of different tabs or 3 tabs. i have added paging plugin also applied one patch (overridden method for paging plugin checks size as per store).... i'm getting load more option after 25 records but once i click to other tab i'm getting error [dom element not found or trying to refer not existing node something like that ]or NO data ..but it calls store load method for other tab...but no data... can anyone solve this??? URGENT


    Code:
    views.mylist = Ext.extend(Ext.Panel, {
    
        layout: 'fit',
        stores: {}, 
        templates: {},
        identifier: undefined,
        params: {}
        
        initComponent: function(){
            this.dockedItems = this.buildDocks();
           views.mylist.superclass.initComponent.apply(this, arguments);
            this.on('afterrender', this.buildItems, this);
        },
        
        buildDocks: function(){
            var me = this;
           
            var toolbar = {
                xtype: 'toolbar',
                dock: 'top',
               
                items: [
                      //Back button code  
                    {
                    xtype: 'spacer'
                    },
                    
                ]
            };
            var mylist= {
                id:'mylist', 
                xtype: 'component',
                
                dock: 'top',
                scope: this,
                hidden:true                
            };
            
            var myToolBar = {
                xtype: 'toolbar',
                dock: 'top',
                
                items: [{
                    xtype: 'segmentedbutton',               
                    id:'segmentedbutton',
                    allowMultiple: false,
                    allowDepress: false,
                    layout: {
                        type: 'hbox', 
                        align: 'stretch',
                        pack: 'center'
                    },
                    items: [{
                        text: 'tab1',
                        id:'t1'
                    }, {
                        text: 'tab2',
                        id:'t2',
                        pressed: true
                    }, {
                        text: 'tab3',
                        id:'t3'
                    }],
                    listeners: {
                        toggle: this.mytogle,
                        scope: this
                    }
                }]
            };
            
            return [toolbar,mylist,myToolBar];
        },
        
        buildItems: function(){
            var me = this;
            var defaultType;
            var mylist=Ext.getCmp('mylist');
            
           
            defaultType = 'tab1';
            this.params.filter='t1';
            this.templates['tab1'] =mye01.TemplateManager.getTpl('myListtemplate');
           
            
            
            this.stores['tab1'] = new Ext.data.Store({
                 clearOnPageLoad: false,            
                 model: 'myListModel',
                              
            });
            this.stores.tab1.on('beforeload', function(){
                //applied some filter 
                        }, this);
            
             this.stores['tab2'] = new Ext.data.Store({
                 clearOnPageLoad: false,            
                 model: 'myListModel',
                              
            });
            this.stores.tab2.on('beforeload', function(){
    
                //applied some filter 
                        }, this);
            
              this.stores['tab3'] = new Ext.data.Store({
                 clearOnPageLoad: false,            
                 model: 'myListModel',
                              
            });
            this.stores.tab3.on('beforeload', function(){
                //applied some filter 
                        }, this);
            var list = new Ext.List({        
              
                typetab:defaultType,
                emptyText: '<div class="emty-list">No data found</div>',
                itemTpl: this.templates[defaultType],
                store: this.stores[defaultType],
                flex:1,
                /*listeners: {
                    itemtap: this.onListItemTap,
                    scope: me
                },*/
                
                plugins: [{//plugin bug patch is applied 
                    ptype: 'listpaging',
                    baseParams: this.params,
                    autoPaging: false
                }]
            });
            
            this.list = me.add(list);        
            this.doLayout();
            
            this.list.store.load({
                params: this.params,            
                callback: function(records, operation, success){
    
    
                    //check records and add some template to mylist
    
                }
                    
            });
        },
        ,
        
        mytogle: function(segButton, button, pressed){
        
           
                this.list.typetab = button.text;
                      
                this.list.itemTpl = this.templates[button.text];
                  
                this.list.initComponent();
                this.list.bindStore(this.stores[button.text]);                              
                this.list.store.load();
            }
        }
        
    });
    PLUGIN PATCH
    
    Ext.override(Ext.plugins.ListPagingPlugin, {
        onListUpdate : function() {
            if (this.list.store && this.list.store.data.length < (this.list.store.currentPage * this.list.store.pageSize)) {
                if (!this.rendered) {
                    return false;
                } else if (!this.autoPaging) {
                    this.el.removeCls('x-loading');
                    this.el.remove();   ///IF I COMMENT THIS below ERROR WONT  come ...but no data
                } else {
                    this.loading = false;
                }
                return false;
            }
            if (!this.rendered) {
                this.render();
            }
            this.el.appendTo(this.list.getTargetEl());  //ERROR OCCURS SOMETIME HERE 
            if (!this.autoPaging) {
                this.el.removeCls('x-loading');
            }
            this.loading = false;
        },
        
        onScrollEnd : function(scroller, pos) {
            if (this.list.store && this.list.store.data.length < (this.list.store.currentPage * this.list.store.pageSize)) {
                return false;
            }
            if (pos.y >= Math.abs(scroller.offsetBoundary.top)) {
                this.loading = true;
                this.list.store.nextPage();
            }
        }    
    });
    ...ON 3 tabs i am getting data from same model and json having same data............

    THANKS IN ADVACNE

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,323
    Answers
    3884
    Vote Rating
    1294
      0  

    Default

    Is this ever getting called in your override?

    Code:
            if (!this.rendered) {
                this.render();
            }
    I haven't used your code, just looking at it. When you do this.el.remove() and then you try to use this.el which is removed so you can't. I believe this is why you have the this.render(); but do you ever set this.rendered to false so that this.render() will fire?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

Tags for this Thread

Posting Permissions

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