Results 1 to 4 of 4

Thread: Help- Add portals placed in border layout inside tab

  1. #1

    Default Help- Add portals placed in border layout inside tab

    Please help me....I am adding tabs into viewport and able to see tabs.
    I want to show portals which are placed in border layout into one of the tab.
    I am doing but nothing is displayed into tab..please look the below code and plz let me know where I am wrong......

    //its portals inside border layout
    var contentPanel = {
    layout: 'border',
    items: [

    {
    xtype: 'portal',
    region: 'center',
    margins: '35 5 5 0',

    items: [{
    columnWidth: .99,
    style: 'padding:0px 0 0px 0px',
    items: [{
    title: 'Profile Pic11',

    html: '<div id="mainarea3"></div>'


    }, {
    title: 'Featured Stock3',

    html: '<div id="mainarea1"></div>'
    }]
    }, {
    columnWidth: .99,
    style: 'padding:0px 0 0px 0px',
    items: [{
    title: 'Stock Exhange Information11',



    html: '<div id="mainarea2"></div>'
    }]
    },

    {
    columnWidth: .99,
    style: 'padding:0px 0 0px 0px',
    items: [{
    title: 'LatsetNews',



    html: '<div id="mainarea4"></div>'
    }]
    }, {
    columnWidth: .99,
    style: 'padding:0px 0 0px 0px',
    items: [{
    title: 'Africa Market Roundup',


    html: '<div id="mainarea5"></div>'
    }, {
    title: 'Top Stock',


    html: '<div id="mainarea6"></div>'
    }]
    }]
    }]

    };

    //its tab panel containing portals - above code
    var tabsNestedLayouts = {
    xtype: 'tabpanel',
    id: 'tabsnestedpanel',
    title: 'TabPanel with Nested Layouts',
    activeTab: 0,
    region: 'center',
    items:[{
    title: 'Foo',
    items: [contentPanel]


    },{
    title: 'Bar',
    bodyStyle: 'padding:10px;',
    html: 'Nothing to see here.'

    }]
    };

    //this is viewport containing tab panel

    new Ext.Viewport({
    layout: 'border',
    title: 'Ext Layout Browser',
    items: [{
    layout: 'border',
    // id: 'layout-browser',
    region:'center',
    border: false,

    items: [tabsNestedLayouts]
    },

    ],

    });

  2. #2

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Posts
    356

    Default

    here

    Code:
    frame:true,   region:'center',
      bodyStyle:'background:#f1f1f1',   margins: '10 10 10 10'
     , 
    cmargins: '10 10 10 10',
      iconCls: 'tabs',
                    shim:false,
                    animCollapse:false,
     
                    constrainHeader:true,
     layout: 'fit', items:
                       new Ext.TabPanel({
                            activeTab:0, border:false,enableTabScroll: true,id: 'Tabs', 
                            items: [{
                               title: 'my portal',     xtype:'portal',  margins: '0 0 10 10',
    cmargins: '10 10 10 10' ,
                region:'center',
     
     
     
     
                items: [{  
                    columnWidth:.49,
                    style:'padding:10px 10 10px 10px',
                    items: [{
     
    frame:true,   iconCls: 'star1',       title: 'Panel 1', // html: Ext.get('news2').dom.innerHTML, 
     
                        tools: tools
                        }, {
        title: 'Panel 2',
                        tools: tools,
    frame:true,
                        html: 'This is panel 666666666323232'
                        }, {
        title: 'Panel 3',
                        tools: tools,
                        html: 'This is panel 3'
                        }, {
                        title: 'Panel 44444444444444',
                        tools: tools,
                      html: Ext.example.shortBogusMarkup
                        }]
                    },{
     
     
     
     
     
                    columnWidth:.49,
                    style: 'padding:10px 5px 10px 10px',
     
                    items: [{
     title: 'Panel 48888888888', //html: Ext.get('sport2').dom.innerHTML, 
                         tools: tools            
                        }, {
      title: '1222',html: Ext.example.shortBogusMarkup,
                         tools: tools            
                        }, {
                        title: 'Panel 4',
                        tools: tools,
                        html: Ext.example.shortBogusMarkup
                        }]
     
     
            }]     ,
     
                                border:false,  autoScroll:true, iconCls:'Address-Book-16x16',id:'menu',
                                header:false,bodyStyle:'background:#ffffff',
                                border:false
                            },{
                                title: 'Tab Text 3',
                                header:false,
                                html : '<p>Something useful would be in here.</p>',
                                border:false
                            },{
       title: 'Tab Text 3',
                                header:false,
                                html : '<p>Something useful would be in here.</p>',
                                border:false
                            },{
       title: 'Tab Text 3',
                                header:false,
                                html : '<p>Something useful would be in here.</p>',
                                border:false
                            },{
       title: 'Tab Text 3',
                                header:false,
                                html : '<p>Something useful would be in here.</p>',
                                border:false
                            },{
                                title: 'read me !',
                                header:false,closable: true,
                                html : '<p>Something useful would be in here.</p>',
                                border:false
                            }]
                        })
     
     
     
     
     
     
     
     
     
     }]
    my ext js site
    http://www.itoto4.com/

  4. #4

    Smile

    Thanks for the help...It works now.....

Posting Permissions

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