You found a bug! We've classified it as EXTJS-8037 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Germany
    Posts
    181
    Vote Rating
    0
    Michi_72 is on a distinguished road

      0  

    Default 4.2.0 Beta: Content from TabPanel is not shown

    4.2.0 Beta: Content from TabPanel is not shown


    Hello,

    after changing to 4.2.0 beta the following code works no longer. The first tab is shown correctly - the second one is empty instead of all required code is loaded. There are no errors in the chrome console shown.

    With 4.1.1 everything is working correctly.

    PHP Code:
    Ext.Loader.setPath('Ext.ux''system/extjs/examples/ux/'); 

    Ext.require([ 'Ext.ux.RowExpander' ]); 

    Ext.define('AM.view.system.info' ,{ 
        
    extend'Ext.panel.Panel'
        
    alias 'widget.system_info'
        
    iconCls 'settings'
        
    title 'Systeminformation'
        
    closabletrue
          
    tools:[{ 
                
    type:'help'
                
    qtip'Hilfe anzeigen'
                
    handler: function(eventtoolElpanel){ id 1hilfe_aufruf(id); 
                } 
        }], 
        
    initComponent: function() { 
                
            
    this.items =  [ 
                { 
                    
    xtype'tabpanel'
                    
    activeTab0
                      
    items: [ 
                        { 
                             
    title'Allgemein'
                               
    items: [ 
                                    { 
                                         
    xtype'system_details'
                                         
    nameColumnWidth 170
                                         
    iconCls ''
                                         
    title '' 
                                    

                            ] 
                           }, 
                           { 
                            
    title'Update History'
                            
    items: [ 
                                    { 
                                    
    xtype'gridpanel'
                                    
    store'nav.system_update'
                                    
    columns: [ 
                                                 {
    text'Build kalkTOOL'flex1dataIndex'prg_version'summaryType'count'
                                                 
    summaryRenderer: function(value){ 
                                                          return ((
    value === || value 1) ? '' value ' Patches' '1 Patch'); 
                                                  } 
                                                  }, 
                                               {
    text'Kategorie'dataIndex'prg_kategorie'}, 
                                               {
    text'Datum'dataIndex'prg_time_real'rendererExt.util.Format.dateRenderer('d.m.Y H:i')}, 
                                               {
    xtype:'actioncolumn'width20
                                                    
    items: [{ 
                                                         
    icon'system/icons/page_white_acrobat.png'
                                                         
    handler: function(gridrowIndexcolIndex) { 
                                                                 
    this.fireEvent('show_pdf'thisgridrowIndexcolIndex); 
                                                         } 
                                                    }] 
                                                } 
                                    ], 
                                    
    viewConfig: {     
                                        
    stripeRowstrue
                                        
    loadingText'Daten werden geladen...' 
                                    
    }, 
                                    
    features: [{ftype:'groupingsummary',  
                                                
    groupHeaderTpl'{name}'
                                                
    startCollapsedtrue
                                                
    enableGroupingMenufalse 
                                    
    }], 
                                    
    plugins: [{ 
                                                
    ptype'rowexpander'
                                                
    rowBodyTpl : [ 
                                                
    '<p><b>Informationen zum Patch:<br><br></b> {prg_text}</p>' 
                                                

                                    }] 
                            } 
                            ] 
                           } 
                ] 
                } 
            ]; 
             
          
    this.callParent(arguments); 
        } 
    }); 
    Any tip is useful!

    Thanks in advance!

    Michi

  2. #2
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,513
    Vote Rating
    176
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of

      0  

    Default


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

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

      0  

    Default


    Why have you nested that GridPanel inside a layoutless Panel?

    Please post a cleaned up version.

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

      0  

    Default


    Any why is your AM.view.system.info class a layoutless Panel which contains a TabPanel?

    Whyt is it not just a TabPanel?

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

      0  

    Default


    Drop this completely unchanged into your SDK examples/<anywhere> directory.

    It will run without you having to untangle it.

    It has a grid as the second tab.

    It works.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Stateful Array Grid Example</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../shared/example.css" />
    
        <!-- GC -->
    
        <script type="text/javascript" src="../../ext-all.js"></script>
    
        <!-- page specific -->
        <style type="text/css">
            /* style rows on mouseover */
            .x-grid-row-over .x-grid-cell-inner {
                font-weight: bold;
            }
            /* shared styles for the ActionColumn icons */
            .x-action-col-cell img {
                height: 16px;
                width: 16px;
                cursor: pointer;
            }
            /* custom icon for the "buy" ActionColumn icon */
            .x-action-col-cell img.buy-col {
                background-image: url(../shared/icons/fam/accept.png);
            }
            /* custom icon for the "alert" ActionColumn icon */
            .x-action-col-cell img.alert-col {
                background-image: url(../shared/icons/fam/error.png);
            }
    
            .x-ie6 .x-action-col-cell img.buy-col {
                background-image: url(../shared/icons/fam/accept.gif);
            }
            .x-ie6.x-action-col-cell img.alert-col {
                background-image: url(../shared/icons/fam/error.gif);
            }
    
            .x-ie6 .x-action-col-cell img {
                position:relative;
                top:-1px;
            }
        </style>
        <script type="text/javascript">
    Ext.require([
        '*'
    ]);
    
    // Define Company entity
    // Null out built in convert functions for performance *because the raw data is known to be valid*
    // Specifying defaultValue as undefined will also save code. *As long as there will always be values in the data, or the app tolerates undefined field values*
    Ext.define('Company', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float', convert: null,     defaultValue: undefined},
           {name: 'change',     type: 'float', convert: null,     defaultValue: undefined},
           {name: 'pctChange',  type: 'float', convert: null,     defaultValue: undefined},
           {name: 'lastChange', type: 'date',  dateFormat: 'n/j h:ia', defaultValue: undefined}
        ],
        idProperty: 'company'
    });
    
    Ext.onReady(function() {
        Ext.QuickTips.init();
        
        // setup the state provider, all state information will be saved to a cookie
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    
        // sample static data for the store
        var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
            ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
            ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function change(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function pctChange(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
        // create the data store
        var store = Ext.create('Ext.data.ArrayStore', {
            model: 'Company',
            data: myData
        });
    
        // create the Grid
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            collapsible: true,
            multiSelect: true,
            columns: [
                {
                    text     : 'Company',
                    flex     : 1,
                    sortable : false,
                    dataIndex: 'company'
                },
                {
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    renderer : 'usMoney',
                    dataIndex: 'price'
                },
                {
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change'
                },
                {
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                },
                {
                    text     : 'Last Updated',
                    width    : 85,
                    sortable : true,
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                },
                {
                    menuDisabled: true,
                    sortable: false,
                    xtype: 'actioncolumn',
                    width: 50,
                    items: [{
                        icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
                        tooltip: 'Sell stock',
                        handler: function(grid, rowIndex, colIndex) {
                            var rec = store.getAt(rowIndex);
                            alert("Sell " + rec.get('company'));
                        }
                    }, {
                        getClass: function(v, meta, rec) {          // Or return a class from a function
                            if (rec.get('change') < 0) {
                                return 'alert-col';
                            } else {
                                return 'buy-col';
                            }
                        },
                        getTip: function(v, meta, rec) {
                            if (rec.get('change') < 0) {
                                return 'Hold stock';
                            } else {
                                return 'Buy stock';
                            }
                        },
                        handler: function(grid, rowIndex, colIndex) {
                            var rec = store.getAt(rowIndex);
                            alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
                        }
                    }]
                }
            ],
    
            title: 'Array Grid',
            viewConfig: {
                stripeRows: true,
                enableTextSelection: true
            }
        });
        
        new Ext.tab.Panel({
            height: 400,
            width: 600,
            activeTab: 0,
            items: [{
                title: 'Tab 1'
            }, grid],
            renderTo: document.body
        })
    });
    </script>
    </head>
    <body style="padding:10px"></body>
    </html>

  6. #6
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Germany
    Posts
    181
    Vote Rating
    0
    Michi_72 is on a distinguished road

      0  

    Default


    Hello Animal,

    i have changed the code and removed the useless panel - the code looks like:

    PHP Code:
    Ext.Loader.setPath('Ext.ux''system/extjs/examples/ux/');

    Ext.require([ 'Ext.ux.RowExpander' ]);

    Ext.define('AM.view.system.info' ,{
        
    extend'Ext.tab.Panel',
        
    alias 'widget.system_info',
        
    iconCls 'settings',
        
    title 'Systeminformation',
        
    activeTab0,
        
    closabletrue,
          
    tools:[{
                
    type:'help',
                
    qtip'Hilfe anzeigen',
                
    handler: function(eventtoolElpanel){ id 1hilfe_aufruf(id);
                }
        }],
        
    initComponent: function() {
               
            
    this.items = [
                {
                    
    title 'Allgemein',
                    
    items : [
                    {
                        
    xtype           'system_details',
                        
    nameColumnWidth 170,
                        
    iconCls         '',
                        
    title           ''
                    
    }
                    ]
                },
                {
                    
    title 'Update History',
                    
    items : [
                    {
                        
    xtype      'gridpanel',
                        
    store      'nav.system_update',
                        
    columns    : [
                        {
                            
    text            'Build kalkTOOL',
                            
    flex            1,
                            
    dataIndex       'prg_version',
                            
    summaryType     'count',
                            
    summaryRenderer : function(value) {
                                return ((
    value === || value 1) ? '' value ' Patches' '1 Patch');
                            }
                        },
                        {
                            
    text      'Kategorie',
                            
    dataIndex 'prg_kategorie'
                        
    },
                        {
                            
    text      'Datum',
                            
    dataIndex 'prg_time_real',
                            
    renderer  Ext.util.Format.dateRenderer('d.m.Y H:i')
                        },
                        {
                            
    xtype 'actioncolumn',
                            
    width 20,
                            
    items : [
                            {
                                
    icon    'system/icons/page_white_acrobat.png',
                                
    handler : function(gridrowIndexcolIndex) {
                                    
    this.fireEvent('show_pdf'thisgridrowIndexcolIndex);
                                }
                            }
                            ]
                        }
                        ],
                        
    viewConfig :
                        {
                            
    stripeRows  true,
                            
    loadingText 'Daten werden geladen...'
                        
    },
                        
    features   : [
                        {
                            
    ftype              'groupingsummary',
                            
    groupHeaderTpl     '{name}',
                            
    startCollapsed     true,
                            
    enableGroupingMenu false
                        
    }
                        ],
                        
    plugins    : [
                        {
                            
    ptype      'rowexpander',
                            
    rowBodyTpl : ['<p><b>Informationen zum Patch:<br><br></b> {prg_text}</p>'
                            
    ]
                        }
                        ]
                    }
                    ]
                }
                ];
            
          
    this.callParent(arguments);
        }
    }); 
    I have tried your example and it is working to me.

    Instead of removing nothing changed and the second tab isn't shown correctly! Do not know what the diffenrece is to your working example.

    Is the my problem caused using mvc?

    Thanks!

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

      0  

    Default


    Instead of a Panel with no layout (WILL NOT LAY OUT ITS CHILD COMPONENT) with title "Update History" as the second tab, just configure the grid with title "Update History" and use that as the second item.

    As you saw in the example I posted, and every example of a TabPanel in documentation and example code.

    Why did you add that extra, layoutless layer?

  8. #8
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Germany
    Posts
    181
    Vote Rating
    0
    Michi_72 is on a distinguished road

      0  

    Default


    Hello Animal,

    i have changed the code to this and i removed all unneccessary panels (i hope so):

    PHP Code:
    Ext.Loader.setPath('Ext.ux''system/extjs/examples/ux/');

    Ext.require([ 'Ext.ux.RowExpander' ]);

    Ext.define('AM.view.system.info' ,{
        
    extend'Ext.tab.Panel',
        
    alias 'widget.system_info',
        
    iconCls 'settings',
        
    layout'fit',
        
    title 'Systeminformation',
        
    activeTab0,
        
    closabletrue,
          
    tools:[{
                
    type:'help',
                
    qtip'Hilfe anzeigen',
                
    handler: function(eventtoolElpanel){ id 1hilfe_aufruf(id);
                }
        }],
        
    initComponent: function() {
               
            
    this.items = [

                {
                    
    xtype           'system_details',
                    
    title           'Allgemein',
                    
    nameColumnWidth 170,
                    
    iconCls         ''
                
    },
                {

                    
    xtype      'gridpanel',
                    
    title      'Updateverlauf',
                    
    store      'nav.system_update',
                    
    columns    : [
                    {
                        
    text            'Build kalkTOOL',
                        
    flex            1,
                        
    dataIndex       'prg_version',
                        
    summaryType     'count',
                        
    summaryRenderer : function(value) {
                            return ((
    value === || value 1) ? '' value ' Patches' '1 Patch');
                        }
                    },
                    {
                        
    text      'Kategorie',
                        
    dataIndex 'prg_kategorie'
                    
    },
                    {
                        
    text      'Datum',
                        
    dataIndex 'prg_time_real',
                        
    renderer  Ext.util.Format.dateRenderer('d.m.Y H:i')
                    },
                    {
                        
    xtype 'actioncolumn',
                        
    width 20,
                        
    items : [
                        {
                            
    icon    'system/icons/page_white_acrobat.png',
                            
    handler : function(gridrowIndexcolIndex) {
                                
    this.fireEvent('show_pdf'thisgridrowIndexcolIndex);
                            }
                        }
                        ]
                    }
                    ],
                    
    viewConfig :
                    {
                        
    stripeRows  true,
                        
    loadingText 'Daten werden geladen...'
                    
    },
                    
    features   : [
                    {
                        
    ftype              'groupingsummary',
                        
    groupHeaderTpl     '{name}',
                        
    startCollapsed     true,
                        
    enableGroupingMenu false
                    
    }
                    ],
                    
    plugins    : [
                    {
                        
    ptype      'rowexpander',
                        
    rowBodyTpl : ['<p><b>Informationen zum Patch:<br><br></b> {prg_text}</p>'
                        
    ]
                    }
                    ]
                }

                ];
            
          
    this.callParent(arguments);
        }
    }); 
    This change makes my app a little faster, but unfortunately the second tab is still empty.

    Any ideas yet?

    Thanks!

    Michael

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

      0  

    Default


    OK, that looks good.

    I suspect that there is some overnesting and lack of layouts above that in the container hierarchy.

    Also, what browser, OS? And if on OSX, do you have scrollbars turned off?

  10. #10
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Germany
    Posts
    181
    Vote Rating
    0
    Michi_72 is on a distinguished road

      0  

    Default


    Hello Animal,

    thanks for your reply!

    The needed informations are:

    OS: Windows 7
    Browser: Chrome 23.0.1271.97.m

    I added this content and controller to the center region of my viewport like this:

    PHP Code:
    this.getController(addTabController); //in my example controller = system.info
    content prg_content //in my example content = system_info

    var tab main_tab.add({
         
    items: [{
              
    xtypecontent
         
    }]
    }) 
    The center region and main_tab look like this:

    PHP Code:
    main_tab Ext.create('Ext.tab.Panel',{
          
    activeTab0,
          
    items: [
          {
            
    title'Information' //adding a first empty Tab to the panel
          
    }
          ]
    });

    ...
    {
      
    region'center',
      
    autoScroll'true',
      
    items: [
                 
    main_tab
      
    ]
    }
    ... 
    I hope this are the right informations!

    Thanks!

    Michi

Thread Participants: 2

Tags for this Thread