Buffered Grids No Longer Work In Tab Panels

**LisburnLad** · 6 Jan 2013 2:27 AM

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

**evant** · 6 Jan 2013 5:41 AM

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

In your current code, it's contained by a no layout panel.

**Animal** · 6 Jan 2013 5:52 AM

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

**LisburnLad** · 6 Jan 2013 9:52 AM

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

Buffered Grids No Longer Work In Tab Panels

Thread Tools

Search Thread

Display

Hybrid View

Buffered Grids No Longer Work In Tab Panels

Buffered Grids No Longer Work In Tab Panels

Tags for this Thread