Results 1 to 3 of 3

Thread: [Risolto]TabPanelScrollbar:plz make work this simple example

  1. #1

    Default [Risolto]TabPanelScrollbar:plz make work this simple example

    Hi all,
    i need to make works this simple example to understand the behaviour of TabPanel.
    I read a lot of thread about it and the answer is often
    -make the item (grid in this example) directly child of tabpanel
    or
    -set grid size fixed to fill the entire space of tab

    BUT
    my target is to obtain an item of the tab with size greater than the tab size so the tab must have scrollbar
    I can't set the item(grid) directly child of tabpanel because the tabpanel layout fix the size of the tab so you can't have scrollbars

    This code build the tabpanel:
    Code:
                var vp=new Ext.Viewport({
                    
                    layout:'border',
                    id:'view1',
                    items:[
                        {
                            xtype:'panel',
                            region:'north',
                            title:'north'
                        },{
                            xtype:'panel',
                            region:'east',
                            title:'east'
                        },{
                            xtype:'panel',
                            region:'center',
                            title:'center',
                            items:[
                                {
                                    xtype:'tabpanel',
                                    title:'Tabpanel',
                                    id:'tabpanel',
                                    activeTab:'tab',    
                                    autoWidth:false,
                                    autoHeight:false,
                                    defaults:{autoScroll:true},
                                    items: 
                                    [
                                        {
                                            xtype:'panel',
                                            title:'grid',
                                            id:'tab',
                                            autoWidth:false,
                                            autoHeight:false,
                                            defaults:{autoScroll:true},
    
                                            items:grid
                                        }
                                    ]
                                }
                            ]
                        },{
                            xtype:'panel',
                            region:'west',
                            title:'west'
                        }
                        
                    ]
                });
                vp.show();
    
                alert("tabpanel: " + Ext.getCmp('tabpanel').getWidth() +"\ngrid: " + Ext.getCmp('grid').getWidth());
    And this code build the grid (taken from ext example)

    Code:
        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']
        ];
            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;
        }
    
        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;
        }
           var store = new Ext.data.ArrayStore({
            fields: [
               {name: 'company'},
               {name: 'price',      type: 'float'},
               {name: 'change',     type: 'float'},
               {name: 'pctChange',  type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ]
        });
    
        store.loadData(myData);
    
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {
                    id       :'company',
                    header   : 'Company', 
                    width    : 500, 
                    sortable : true, 
                    dataIndex: 'company'
                },
                {
                    header   : 'Price', 
                    width    : 75, 
                    sortable : true, 
                    renderer : 'usMoney', 
                    dataIndex: 'price'
                },
                {
                    header   : 'Change', 
                    width    : 75, 
                    sortable : true, 
                    dataIndex: 'change'
                },
                {
                    header   : '% Change', 
                    width    : 75, 
                    sortable : true, 
                    dataIndex: 'pctChange'
                },
                {
                    header   : 'Last Updated', 
                    width    : 300, 
                    sortable : true, 
                    dataIndex: 'lastChange'
                },
                
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            height: 1000,
            width: 2000,
            title: 'Array Grid',
            id:'grid',
            // config options for stateful behavior
            stateful: true,
            autoscroll:true,
            stateId: 'grid'
        });
    The alert result is

    tabpanel: 1297
    grid: 2000

    but no scrollbar appears

    Please help me,
    thank's for your attention

  2. #2

    Default

    my target is to have a Portal inside a tab with:
    -dynamic number of columns
    -fixed size of each columns

    So if I add a column, I need that portal raise his width

    Please some help!!

  3. #3

    Default

    Found the solution:
    The TabPanel is not receiving a height from its surrounding layout due to how it is being placed, so I must insert a layout fit in the center region

Similar Threads

  1. How to make checkbox stateful (should be simple)
    By wuschba in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 2 Jan 2018, 8:28 AM
  2. Make a plain simple BorderLayout
    By Strato in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 4 Aug 2008, 7:17 AM
  3. Simple Ajax request : can't make it work
    By Ywg in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 21 Dec 2007, 7:07 AM
  4. Trying to make a simple Dialogue Box
    By Bobafart in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 22 Jan 2007, 5:47 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •