Position of tab.panel

**Payal Anand** · 16 Mar 2013 11:57 PM

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

**bricemason** · 17 Mar 2013 6:55 PM

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:

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'
                    }
                ]
            }
        ]
    }
});

Your question is centered on the concept of layouts so a study of the layout guide will probably help you further:

http://docs.sencha.com/touch/2-1/#!/guide/layouts

I hope this helps you,

Brice

**grgur** · 18 Mar 2013 3:31 AM

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

**mitchellsimoens** · 18 Mar 2013 6:02 AM

I removed the duplicate.

**Payal Anand** · 18 Mar 2013 12:23 PM

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

**bricemason** · 18 Mar 2013 1:00 PM

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

**Payal Anand** · 18 Mar 2013 1:14 PM

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.

**bricemason** · 18 Mar 2013 3:28 PM

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

**Payal Anand** · 18 Mar 2013 7:36 PM

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>

**grgur** · 19 Mar 2013 1:40 AM

Enclose your source code in CODE tags, please

Position of tab.panel

Thread Tools

Search Thread

Display

Unanswered: Position of tab.panel

Unanswered: Position of tab.panel

Tags for this Thread