You found a bug! We've classified it as EXTJS-8161 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    Manchester, UK
    Posts
    103
    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,129
    Vote Rating
    516
    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,483
    Vote Rating
    35
    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
    103
    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.

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar