-
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>
-
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
-
Yo.......It worked finally :D. 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.:(
-
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
