Results 1 to 9 of 9

Thread: Layout border in Ext.tab.Panel

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    39

    Default Answered: Layout border in Ext.tab.Panel

    Hi,
    I'm try to use border layout inside Ext.tab.Panel, but it doesn't work. Regions did not appear. But if I remove "layout: border" regions are rendered like a hbox layout.
    Can anyone tell me why?

    Here is my code:
    Code:
    Ext.onReady(function() {
         Ext.create('Ext.tab.Panel', {
    layout : {
    type : 'border',
    padding: 5
    },
    renderTo: document.body, activeTab: 2, items: [{ title: 'Tab1', html: 'text' },{ title: 'Tab2', id : 'tabInfo', layout: { type: 'table', columns: 3 }, defaults: {frame: true, width: 400, height: 200, margin: '5 5 5 5'} },{ title: 'Tab3', height : "300", layout:{ type: 'border', padding: 5 }, items : [{ region: 'north', title: 'North', html: 'north' },{ region: 'center', collapsible: false, title: 'center', height: 100, minHeight: 60, html: 'center', },{ region: 'west', collapsible: true, title: 'Starts at width 30%', split: true, width: '30%', minWidth: 100, minHeight: 140, html: 'west<br>I am floatable' }] },{ title: 'Tab4', html: 'Text.' } });
    });
    Regards.

  2. Yes you must specify a center, but you can not specify
    Code:
    layout : {
    type : 'border',
    padding: 5
    },
    on a tabpanel, only on its tabs so far I know because a tabpanel has a card layout. But even if you can you havent specified any region on your tabpanel items.

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    A TabPanel has a fixed card layout, else it isn't a tabpanel. If you want to use a border layout then you can better take a normal panel.

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Karlsruhe, Germany
    Posts
    12

    Default

    Another thing is that (like discribed in the API http://docs.sencha.com/ext-js/4-0/#!...ntainer.Border ) layout: 'border' must have a child with " region:'center' "

    cheers

  5. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    Yes you must specify a center, but you can not specify
    Code:
    layout : {
    type : 'border',
    padding: 5
    },
    on a tabpanel, only on its tabs so far I know because a tabpanel has a card layout. But even if you can you havent specified any region on your tabpanel items.

  6. #5
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    Below works as expected, you only forgot a bracket at your fourth tab

    Code:
       Ext.onReady(function() {
         Ext.create('Ext.tab.Panel', {
            layout : {
                padding: 5
            },
            renderTo: document.body,
            activeTab: 2,
            items: [{
                title: 'Tab1',
                html: 'text'
               
            },{
                title: 'Tab2',
                id : 'tabInfo',          
                layout: {
                    type: 'table',
                    columns: 3
                },
                defaults: {frame: true, width: 400, height: 200, margin: '5 5 5 5'}                
            },{
                title: 'Tab3',
                height : "300",
               
                layout:{
                    type: 'border',
                    padding: 5    
                },
                items : [{
                    region: 'north',
                    title: 'North',
                    html: 'north'
                },{
                    region: 'center',
                    collapsible: false,
                    title: 'center',
                
                    height: 100,
                    minHeight: 60,
                    html: 'center'
                },{
                    region: 'west',
                    collapsible: true,
                    title: 'Starts at width 30%',
                    split: true,
                    width: '30%',
                    minWidth: 100,
                    minHeight: 140,
                    html: 'west<br>I am floatable'
                }]
            },{
                title: 'Tab4',
                html: 'Text.'          
             }] // <--you forgot to close the item array
            });   
    });

  7. #6
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    39

    Default

    Quote Originally Posted by tvanzoelen View Post
    Below works as expected, you only forgot a bracket at your fourth tab
    It was Ctrl+C - Ctrl+V error )

  8. #7
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    39

    Default

    Thanks for your advice. I change my code and it works. But I have one more question.. How can i fill the whole region in tab? I want layout like 'fit' on each tab.panel, but i need to set height property.

    Code:
    Ext.create('Ext.tab.Panel', {
            layout : {
                type : 'fit',
                padding: 5
            },
            renderTo: document.body,
            activeTab: 2,
            items: [{
                title: 'Management',
                html: '<br /> Text text text'
            },{
                title: 'Info',
                id : 'tabInfo',
                layout: {
                    type: 'table',
                    columns: 3
                } 
            },{
                title: 'Stats',
                //height : "600",
                //layout : 'fit',
                items : [             
                {
                    region: 'center',
                    collapsible: false,  
                    title: 'center',
                    height: '900',
                    minHeight: 60,
                    layout:  'border',
                    items: [
                    {
                        title: 'South Region',
                        region: 'south',     
                        xtype: 'panel',
                        height: 100,
                        split: true,         
                        margins: '0 5 5 5'
                    },{
    title: 'West Region is collapsible',
                        region:'west',
                        xtype: 'panel',
                        margins: '5 0 0 5',
                        split: true,
                        width: 200,
                        id: 'west-region-container',
                        layout: 'fit'
                    },{
                        title: 'Center Region',
                        region: 'center',     
                        xtype: 'panel',
                        split : true,
                        layout: 'fit',
                        margins: '5 5 0 0'
                    }]
                }]
            },{
                title: 'Log',
                html: 'This tab is not ready yet.'
            }]
        });

  9. #8
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    Code:
    layout : {
                type : 'fit'       
            },
    above on a tabpanel will not work, tabpanel has a fixed card layout you can not change. You can specify a default layout for its children under the defaults property.

    I think fit will work if you add a new panel or component to that tab like

    Code:
    {
                        title: 'Center Region',
                        region: 'center',
                        xtype: 'panel',
                        split: true,
                        layout: 'fit',
                        items:[{ html: 'hello'}],
                        margins: '5 5 0 0'
    }

  10. #9
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    39

    Default

    Thank you for your reply, but it was not my problem. I decided to use Ext.viewPort with tabs and inside 3rd tab I paste a new central region with items to automatically fill all tab's area and all works (it seems ).
    Code:
    Ext.create('Ext.container.Viewport', {
            id: 'appViewPort',  
            layout:{
                type: 'border',
                padding: 5    
            },
            items: [
            {
                region: 'center',
                xtype: 'tabpanel', // TabPanel itself has no title
                 activeTab: 2,      // Third tab active by default
                items: [
                {
                    title: 'Manage',
                    html: 'Text tex text'
                },{
                    title: 'Info',
                    id : 'tabInfo',
                    layout: {
                        type: 'table',
                        columns: 3
                    },
                    defaults: {frame: true, width: 400, height: 200, margin: '5 5 5 5'}                
                },{
                    title: 'Stat',
                    region: 'center',
                    collapsible: false,
                    //height: '500',
                    layout:  'border',
                    items: [
                    {
                        title: 'South Region',
                        region: 'south',     
                        xtype: 'panel',
                        split: true,    
                        autoScroll : true,     
                        margins: '0 5 5 5',
                        items :[simpleGrid]
                    },{
                        title: 'West Region is collapsible',
                        region:'west',
                        xtype: 'panel',
                        margins: '5 0 0 5',
                        split: true,
                        width: 200,
                        id: 'west-region-container',
                        layout: 'fit'
                    },{
                        title: 'Center Region',
                        region: 'center',
                        xtype: 'panel',
                        split : true,
                        layout: 'fit',
                        margins: '5 5 0 0'
                    }]
                },{
                    title: 'Log',
                    html: 'This tab is not ready yet.'
                }]
            }]
        });
    Here is my result:
    window_CP.jpg

Tags for this Thread

Posting Permissions

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