1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    2
    Vote Rating
    0
    niks is on a distinguished road

      0  

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

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    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


    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 @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.

Thread Participants: 1

Tags for this Thread