1. #1
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    69
    Vote Rating
    0
    scancubus is on a distinguished road

      0  

    Default Grid loses data on tab panel change after scrolling

    Grid loses data on tab panel change after scrolling


    Hello,

    I have an app with two grids bound to the same store. After I move the scroller in one of them, and then switch tabs to view the other grid, the scroller on the second grid scrolls to the top, and the grid is blank. The way to break this example is as follows:

    1. Scroll down infinite grid in Tab Panel 1,
    2. Click on Tab Panel 2(notice that the scroller is at the same position and grid is still visible)
    3. Click on Tab Panel 1 again ( notice that grid is blank)

    Also, the row numberer is not displaying in Tab Panel 2 grid AT ALL. Both grids are the same xtype.

    as always, a complete example. We all know how much you like this Thanks ahead of time for fixing!
    Code:
    Ext.require(['*']);
    Ext.onReady(function() {
        var cw;
    
    
        function closeRegion (e, target, header, tool) {
            var region = header.ownerCt;
            newRegions.unshift(region.initialConfig);
            viewport.remove(region);
        }
       /*Create Infinite Grid
       */
       Ext.define('ForumThread', {
            extend: 'Ext.data.Model',
            fields: [
                'title', 'forumtitle', 'forumid', 'username', {
                    name: 'replycount', 
                    type: 'int'
                }, {
                    name: 'lastpost', 
                    mapping: 'lastpost', 
                    type: 'date', 
                    dateFormat: 'timestamp'
                },
                'lastposter', 'excerpt', 'threadid'
            ],
            idProperty: 'threadid'
        });
    
    
        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            id: 'store',
            model: 'ForumThread',
            remoteSort: true,
            // allow the grid to interact with the paging scroller by buffering
            buffered: true,
            proxy: {
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                type: 'jsonp',
                url: 'http://www.sencha.com/forum/remote_topics/index.php',
                reader: {
                    root: 'topics',
                    totalProperty: 'totalCount'
                },
                // sends single sort as multi parameter
                simpleSortMode: true
            },
            sorters: [{
                property: 'lastpost',
                direction: 'DESC'
            }]
        });
    
    
        function renderTopic(value, p, record) {
            return Ext.String.format(
                '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
                value,
                record.data.forumtitle,
                record.getId(),
                record.data.forumid
            );
        }
    
    
        Ext.define('My.Infinite.Grid', {
    		extend:'Ext.grid.Panel',
    		alias:'widget.infiniteGrid',
            //width: 1000,
            //height: 500,
            title: 'ExtJS.com - Browse Forums',
            store: store,
            loadMask: true,
            selModel: {
                pruneRemoved: false
            },
            multiSelect: true,
            viewConfig: {
                trackOver: false
            },
            // grid columns
            columns:[{
                xtype: 'rownumberer',
                width: 50,
                sortable: false
            },{
                tdCls: 'x-grid-cell-topic',
                text: "Topic",
                dataIndex: 'title',
                flex: 1,
                renderer: renderTopic,
                sortable: false
            },{
                text: "Author",
                dataIndex: 'username',
                width: 100,
                hidden: true,
                sortable: true
            },{
                text: "Replies",
                dataIndex: 'replycount',
                align: 'center',
                width: 70,
                sortable: false
            },{
                id: 'last',
                text: "Last Post",
                dataIndex: 'lastpost',
                width: 130,
                renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
                sortable: true
            }]
        });
    
    
        // Load a maximum of 100 records into the prefetch buffer (which is NOT mapped to the UI)
        // When that has completed, instruct the Store to load the first page from prefetch into the live, mapped record cache
    
    
       
        Ext.define('My.Tab.Item', {
    		extend:'Ext.panel.Panel',
    		alias:'widget.tabItem',
            layout: {
                type: 'border',
                padding: 5
            },
            defaults: {
                split: true
            },
            items: [{
                region: 'north',
                collapsible: true,
                title: 'North',
                split: true,
                height: 100,
                minHeight: 60,
                html: 'north'
            },{
                region: 'west',
                collapsible: true,
                title: 'Starts at width 30%',
                split: true,
                width: '30%',
                minWidth: 100,
                minHeight: 140,
                html: 'west<br>I am floatable'
            },{
                region: 'center',
    			layout:'fit',
                title: 'Center',
                minHeight: 80,
                items: [
    				{
    					xtype:'infiniteGrid'
    				}]
            },{
                region: 'east',
                collapsible: true,
                floatable: true,
                split: true,
                width: 200,
                title: 'East'
            },{
                region: 'south',
                collapsible: true,
    			collapsed:true,
                split: true,
                height: 200,
                minHeight: 120,
                title: 'South'
            }]
        });
    	var tabPanel=Ext.create('Ext.tab.Panel', {
        items: [
            {
    			xtype:'tabItem',
    			title:'Tab Item 1'
    		},{
    			xtype:'tabItem',
    			title:'Tab Item 2'
    		}
        ]
    });
    	var viewport=Ext.create('Ext.Viewport',{
    		layout:'fit',
    		items:tabPanel,
    		renderTo:Ext.getBody()
    	});
    	store.prefetch({
            start: 0,
            limit: 99,
            callback: function() {
                store.guaranteeRange(0, 49);
            }
        });
    	});

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    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


    I cannot get your code to work...

    You should not use Ext.define within Ext.onReady. The way you had it setup, your two grids would share the same store. Moving Ext.define statements outside Ext.onReady produced a lot of errors with your code and your classes are going to be sharing a lot of the same things.
    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.

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    69
    Vote Rating
    0
    scancubus is on a distinguished road

      0  

    Default


    What is the error that you are getting?


    You guys use Ext.Define in a lot of your examples. For example:

    http://docs.sencha.com/ext-js/4-0/#!...te-scroll.html

    Ext.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.ux', '../ux/');Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.grid.PagingScroller']);Ext.onReady(function(){ Ext.define('ForumThread', {
    Are you saying that two grids cannot share the same store? I'm not sure how to interpret your comment. Thanks.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    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


    For our examples it's best. Each class should really have it's own file in a structure filesystem.

    Your grids can share the same store if you wish but if you make a change in one grid that will be reflected in the other grid... like sorting or filtering.
    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