Position of tab.panel
HI all,
I want an image above my tab panel. but tab panel position can be changed to either top or bottom. Can anyone suggest me how to place an image at the top of the page, then the tab panel. Any help is deeply appreciated. As in I want such effect, please follow the link https://docs.google.com/file/d/0Bzdd...it?usp=sharing
I see that you've posted this question twice, so I just picked this one. Please remove the other thread, it's not necessary. I couldn't review your Google document because I didn't have permission to it so I made an assumption on what you needed help with. Here is an example of a layout with an image on top of a tab panel:
Your question is centered on the concept of layouts so a study of the layout guide will probably help you further:Code:Ext.define('MyApp.view.Main', { extend : 'Ext.Container', xtype : 'main', requires : [ 'Ext.tab.Panel', 'Ext.Img' ], config : { items : [ { xtype : 'image', src : 'http://placehold.it/320x75', width : 320, height : 75 }, { xtype : 'tabpanel', items : [ { title : 'Welcome', iconCls : 'home', html : 'home content' }, { title : 'Get Started', iconCls : 'action', html : 'getting started content' } ] } ] } });
http://docs.sencha.com/touch/2-1/#!/guide/layouts
I hope this helps you,
Brice
Brice Mason
Front End Developer
Modus Create
@bricemason
bricemason.com
Sencha Touch Screencasts
Vimeo - Sencha Touch Channel
Github Projects:
Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.
Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.
Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.
Payal, your question seems to be a duplicate of this: http://www.sencha.com/forum/showthre...abBar-position
Please mark it as answered if Brice's answer works for you
<div style="float: left; width: 70px;">http://appac.us/mcs.png</div><div style="float: left; height: 100px;">Grgur Grisogono
Ext JS in Action SE co-author
Exercising awesomeness at Modus Create - Official Sencha Partner
Get in touch for Sencha Touch Training
@ggrgur</div><div style="clear:both;"></div>
I removed the duplicate.
Mitchell Simoens @LikelyMitch
Modus Create, Senior Frontend Engineer
________________
Need any sort of Ext JS help? Modus Create is here to help!
Check out my GitHub:
https://github.com/mitchellsimoens
Can you please explain me the code. You have mentioned MyApp.view.main. As much as i know this main is also a JS file. What would it contain. Please explain the code once. I am a novice to sencha touch 2
Payal,
Do you have an app working right now? What code have you written so far? If you're just beginning, you can refer to this link:
http://senchatouchdev.com/wordpress/...tting-started/
It's to the point with updated content. It will walk you through the process of generating an app. Once you're to the point of having an app, we can help you integrate and understand the code I posted earlier.
We'll need to know where you're at in your development though to offer more guidance.
Brice
Brice Mason
Front End Developer
Modus Create
@bricemason
bricemason.com
Sencha Touch Screencasts
Vimeo - Sencha Touch Channel
Github Projects:
Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.
Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.
Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.
Thanx for the link, really helpful. I have made a simple app which contains only html and js files using wordstorm editor. In it i have made a tab panel with 4 tabs and html content in it. I have not made anything using MVC architecture or included any json file.
Okay good, please post the view code that has your tab panel that you want the image on top of. If you can, try to review the code that I posted and see how you could integrate it into what you have.
If you post the code that you have now, we can help you further too.
Brice
Brice Mason
Front End Developer
Modus Create
@bricemason
bricemason.com
Sencha Touch Screencasts
Vimeo - Sencha Touch Channel
Github Projects:
Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.
Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.
Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.
Here is my simple code
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Franchise India</title>
//Included all 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>
Enclose your source code in CODE tags, please
<div style="float: left; width: 70px;">http://appac.us/mcs.png</div><div style="float: left; height: 100px;">Grgur Grisogono
Ext JS in Action SE co-author
Exercising awesomeness at Modus Create - Official Sencha Partner
Get in touch for Sencha Touch Training
@ggrgur</div><div style="clear:both;"></div>
Reply With Quote
