1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    28
    Vote Rating
    0
    pgraju is on a distinguished road

      0  

    Question Strange behaviour : Dynamic Tabs with Grids using Viewport

    Strange behaviour : Dynamic Tabs with Grids using Viewport


    Hi all

    First of all here is my situation:

    I have created a Toolbar which has menu items, when a Menu Item is clicked a Tab is dynamically added to the 'Center' Region of my Viewport layout at the same time the Tab is added I also add a Grid to it.

    The problem:

    The grid displays fine but no data is visible also there is a strange effect when I maximize the browser the grid stays cut off and doesnt resize/rerender - see the screenshot.

    Firstly I create my Grid:

    Code:
    Ext.ns('Example');
     
    Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
     
    Example.Grid = Ext.extend(Ext.grid.GridPanel, {
        initComponent:function() {
            Ext.apply(this, {
                 store: new Ext.data.SimpleStore({
                     id:0
                    ,fields:[
                        {name: 'company'}
                       ,{name: 'price', type: 'float'}
                       ,{name: 'change', type: 'float'}
                       ,{name: 'pctChange', type: 'float'}
                       ,{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
                       ,{name: 'industry'}
                       ,{name: 'desc'}
                    ]
                    ,data:[
                        ['3m Co',71.72,0.02,0.03,'8/1 12:00am', 'Manufacturing'],
                        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
                        ['Altria Group Inc',83.81,0.28,0.34,'10/1 12:00am', 'Manufacturing'],
                        ['American Express Company',52.55,0.01,0.02,'9/1 10:00am', 'Finance'],
                        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 11:00am', 'Services'],
                        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
                        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
                        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
                        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
                        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
                        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
                        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
                        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
                        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
                        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
                        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
                        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
                        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
                        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
                        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
                        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
                        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
                        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'],
                        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
                        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
                        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
                        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
                        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
                        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
                        ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
                    ]
                })
                ,columns:[
                     {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'}
                    ,{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}
                    ,{header: "Change", width: 20, sortable: true, dataIndex: 'change'}
                    ,{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'}
                    ,{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
                ]
                ,viewConfig:{forceFit:true}
                ,bbar:[]
                ,plugins:[new Ext.ux.grid.Search({
                    mode:'local'
                })]
            }); // eo apply
    
            // call parent
            Example.Grid.superclass.initComponent.apply(this, arguments);
        } // eo function initComponent
    
    });
    Then I create my toolbar menu with items:

    Code:
     Ext.onReady(function(){  
    
    Ext.QuickTips.init();
    
    // Create the Navigation Toolbar
        var menu = new Ext.menu.Menu({
            id: 'mainMenu',
            items: [{
                        text: 'Sports',
                        iconCls: 'bsports',
                        handler:     function(){ updateTab('11','Sports','bsports'); }
                    }]
    });
    Then I create the Tab Panel and store it as a variable:

    Code:
        var tabs = new Ext.TabPanel({
                    region:'center',
                    layoutOnTabChange: true,
                    activeTab:0,
                    style: 'padding-left:5px;',
                    enableTabScroll:true,
                    items:[{
                        id: '01',
                        title: 'Home',
                        iconCls: 'bhome',
                        autoScroll:true,
                    }]
                })
    Then I create my Viewport:

    Code:
    ar p = new Ext.Viewport({
                layout: 'border',
                style: 'padding: 10px;',
                items : [
                    tabs,                //Tab panel as center
                {
                    //...north region
                    bbar:new Ext.Toolbar({
                        iconCls: 'bteams',
                        id:'toolbar',
                        style: 'border: 1px solid #99bbe8',
                        items:[{
                                    text:'Home',
                                    iconCls: 'bhome',
                                    handler: function(){ updateTab('01','Home','bhome'); }
                                },'-',{
                                    text:'Manage',
                                    iconCls: 'bteams',
                                    menu: menu
                                }
                                ]
                        })      
                },{
                   //...south region
                        })
                }
                ]
        });
    Here is my UpdateTab function which checks if a tab is already added:

    Code:
    function updateTab(tabId,title,cls) {
            var tab = tabs.getItem(tabId);
            if(tab){
    //do nothing
            }else{
                tab = addTab(tabId,title,cls);
            }
            tabs.setActiveTab(tab);
        }
    Here is the function to add the Tab with a Grid:

    Code:
        function addTab(tabId,title,cls){
            tabs.add({
                title: title,
                id: tabId,
                iconCls: cls,
                closable:true,
                items: [{
                        title:'Grid Tab'
                        ,id:'gridtab'
                        ,xtype:'examplegrid'
                        ,autoScroll:true
                }]
            }).show();
        }
    Can anyone identify why I can't seem to display any data and also why there are some strange rendering issues?

    Thanks in advance!
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    The problem is that you are wrapping the Grid inside a no-layout Panel, and then adding that Panel to the TabPanel!

    Simple add the Grid to the TabPanel as quite clearly explained in the docs: http://extjs.com/deploy/dev/docs/?class=Ext.Container

  3. #3
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    No need to nest like that:
    Code:
        function addTab(tabId,title,cls){
            tabs.add({
                title: title,
                iconCls: cls,
                closable:true,
                        ,id:'gridtab'
                        ,xtype:'examplegrid'
            }).show();
        }
    I would highly suggest you stick to ONE type of comma structure.

  4. #4
    Ext User
    Join Date
    Sep 2008
    Posts
    28
    Vote Rating
    0
    pgraju is on a distinguished road

      0  

    Default


    Thanks heaps guys!

Thread Participants: 2