Position of tab.panel

**Payal Anand** · 19 Mar 2013, 3:28 AM

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Franchise India</title>
    //included al JS and CSS files
    <script type="text/javascript">
        Ext.application({
            name:'fro2013',
            launch:function(){
                Ext.create("Ext.tab.Panel",{
                    fullscreen:true,
                tabBarPosition:'top',
                    //tabBar:{layout:{pack:"center"}},
                    items:[ {
                               title:'Home',
                        iconCls: 'home',
                        iconMask: true,
                        scrollable:true,
                        styleHtmlContent:true,
                      
                        html:['    Text to be displayed
                        ]
                    },
                        {
                            title:'Register',
                            iconCls:'compose',
                            html:['Text to be displayed'
                ]
                        },
                        {
                            title:'conference',
                            iconCls:'team' ,
                            scrollable:true,
                            styleHtmlContent:true,
                            html:['Text to be displayed
                        ]
                        }   ,
                        {
                             title: 'download',
                            iconCls:'download' ,
                            xtype: 'panel',
                            styleHtmlContent : true,
                            html: ['<div><iframe style="width:100%;height:100%;" src="http://www.franchiseindia.net/pdf/fro2013_Brochure_hyderabad.pdf"></iframe></div>']
                        }]
                });
            }
        });
    </script>
</head>
<body>

</body>
</html>

**bricemason** · 19 Mar 2013, 10:40 AM

Based on your snippet which shows you creating a tab panel in the launch function, here's a snippet that will dock an image at the top of a tab panel. You should be able to integrate this into your own code now:

Code:

Ext.create('Ext.tab.Panel', {
    tabBarPosition : 'top',
    fullscreen     : true,
    items          : [
        {
            xtype  : 'image',
            src    : 'http://placehold.it/320x75',
            width  : 320,
            height : 75,
            dock   : 'top'
        },
    
        {
            title   : 'Home',
            iconCls : 'home',
            html    : 'home content'
        },
        
        {
            title   : 'Register',
            iconCls : 'action',
            html    : 'register content'
        }
    ] 
});

Just specify a config option of 'dock' with a value of 'top' for the item that you want to be above the tab panel.

Brice

**Payal Anand** · 19 Mar 2013, 11:04 AM

Yo.......It worked finally

. But its taking padding by itself . Is there a way to remove the padding from left atleast?Is it that tabpanel is not browser resizable? I mean when I resize my window it doesn't fit in however the html content does. Any solution?

And another issue is I wanted image at the top only on home page, on rest of the pages, I had to keep panel on top.

**bricemason** · 19 Mar 2013, 3:22 PM

I'm not sure what you mean by the padding issue. Post the code that you ended up using as well as a screenshot of what's rendering.

Brice

Thread: Position of tab.panel

Thread Tools

Search Thread

Display

Tags for this Thread

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News