Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-8161 in 4.2.0.265.
  1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    Manchester, UK
    Posts
    112
    Vote Rating
    8
    LisburnLad will become famous soon enough

      0  

    Default Buffered Grids No Longer Work In Tab Panels

    Buffered Grids No Longer Work In Tab Panels


    I've just found that a grid, using a buffered store, no longer works when the grid is included on a tab panel, unless it's on the first tab. This used to work fine in 4.1 and also appears to be ok if the store isn't buffered.

    Here's the code I've been using to test this:

    Code:
    <!DOCTYPE html />
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Tabbed Grid Test</title>  
         
      <link rel="stylesheet" type="text/css" href="Lib/ExtJS/resources/css/ext-all.css"/>
      <script type="text/javascript" src="Lib/ExtJS/ext-all-debug-w-comments.js"></script>   
    
    
      <script type="text/javascript">
        Ext.Loader.setConfig({ enabled: true })
    
    
        Ext.require([
          'Ext.grid.*',
          'Ext.data.*',
          'Ext.util.*'
        ]);
    
    
        Ext.application(
        {
          name: 'Test',
    
    
          launch: function ()
          {
            Ext.define('ForumThread', 
            {
              extend: 'Ext.data.Model',
                fields: [{
                  name: 'title',
                  mapping: 'topic_title'
                }, {
                  name: 'forumtitle',
                  mapping: 'forum_title'
                }, {
                  name: 'forumid',
                  type: 'int'
                }, {
                  name: 'username',
                  mapping: 'author'
                }, {
                  name: 'replycount',
                  mapping: 'reply_count',
                  type: 'int'
                }, {
                  name: 'lastpost',
                  mapping: 'post_time',
                  type: 'date',
                  dateFormat: 'timestamp'
                },
                'lastposter', 'excerpt', 'topic_id'
              ],
              idProperty: 'post_id'
            });
    
    
            var forumStore = Ext.create('Ext.data.Store', {
              id: 'store',
              model: 'ForumThread',
              buffered: true,
              pageSize: 50,
              proxy: {
                type: 'jsonp',
                url: 'http://www.sencha.com/forum/topics-remote.php',
                reader: {
                  root: 'topics',
                  totalProperty: 'totalCount'
                }
              },
              autoLoad: true
            });
    
    
            function renderTopic(value, p, record)
            {
              return Ext.String.format(
                  '<a href="http://sencha.com/forum/showthread.php?p={1}" target="_blank">{0}</a>',
                  value,
                  record.getId()
              );
            }
    
    
            var forumGrid = Ext.create('Ext.grid.Panel', {
              width: 700,
              height: 500,
              title: 'ExtJS.com - Browse Forums',
              store: forumStore,
              loadMask: true,
              selModel: {
                pruneRemoved: false
              },
              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: false
              }, {
                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: false
              }]
            });
    
    
            Ext.create('Ext.container.Viewport',
            {
              layout: 'fit',
              items: Ext.create('Ext.tab.Panel',
              {
                activeTab: 0,
                items: [
    //            {
    //              title: 'Forum Grid',
    //              items: [forumGrid]  
    //            },
                {
                  title: 'Test',
                  html: 'test'    
                },
                {
                  title: 'Forum Grid',
                  items: [forumGrid]      
                }]
              })
            });
          }
        });
      </script>
    
    
    </head>
    <body>
    </body>
    </html>

    If the "buffered: true" attribute is removed from the store then everything works fine. Similarly, if the grid is moved to the first panel (by uncommenting the commented out section and commenting the current forum grid tab item), then again it works ok.

    I've also noticed that in Firebug that the calls are being made to the back end ok, it's just that nothing appears in the grid.

    I'm presuming this is a bug, unless there's some new config thing I'm missing that has been introduced in version 4.2?

    I've also just noticed that the data will actually appear if the grid is scrolled down (initially the grid is blank). This doesn't help me though, since some of my grids have only a few items and therefore the scroll bar doesn't appear.

    Steve

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,851
    Vote Rating
    610
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You're over-nesting. The grid should be the tab.

    In your current code, it's contained by a no layout panel.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  4. #4
    Sencha User
    Join Date
    Dec 2008
    Location
    Manchester, UK
    Posts
    112
    Vote Rating
    8
    LisburnLad will become famous soon enough

      0  

    Default


    @evant: I agree there's overnesting there - this is only a quick example thrown together to illustrate the problem and not my production code. However, the overnesting isn't the cause of the underlying problem, which is that a buffered grid in 4.2 isn't showing any results when displayed as a tab panel - remove the overnesting and the problem is still there. In 4.1, or with a non-buffered store, the problem doesn't occur.

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    63
    Vote Rating
    1
    gtsafas is on a distinguished road

      0  

    Default


    What version was this fixed in? It still does not work with the most recent 4.2.x download. Is there a patch I can apply to fix it here?

Thread Participants: 3

Tags for this Thread