Results 1 to 4 of 4

Thread: Grid loses data on tab panel change after scrolling

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    69
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    69
    Vote Rating
    0
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Posting Permissions

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