1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    6
    Vote Rating
    0
    Payal Anand is on a distinguished road

      0  

    Default Unanswered: Position of tab.panel

    Unanswered: 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

  2. #2
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      1  

    Default


    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
    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.

  3. #3
    grgur's Avatar
    Join Date
    Aug 2007
    Location
    Split, Croatia
    Posts
    155
    Answers
    10
    Vote Rating
    24
    grgur has a spectacular aura about grgur has a spectacular aura about

      1  

    Default


    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
    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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,206
    Answers
    3516
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I removed the duplicate.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Posts
    6
    Vote Rating
    0
    Payal Anand is on a distinguished road

      0  

    Default


    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

  6. #6
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Mar 2013
    Posts
    6
    Vote Rating
    0
    Payal Anand is on a distinguished road

      0  

    Default


    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.

  8. #8
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    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.

  9. #9
    Sencha User
    Join Date
    Mar 2013
    Posts
    6
    Vote Rating
    0
    Payal Anand is on a distinguished road

      0  

    Default


    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>

  10. #10
    grgur's Avatar
    Join Date
    Aug 2007
    Location
    Split, Croatia
    Posts
    155
    Answers
    10
    Vote Rating
    24
    grgur has a spectacular aura about grgur has a spectacular aura about

      0  

    Default


    Enclose your source code in CODE tags, please
    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