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,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      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
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi