CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2sencha-architect
shujaat
shujaat

Reputation: 383

Different View inside tab panel - Sencha touch 2

Img

Hello All,

I am new to ST2, I am sorry if its a very dumb question.

I need to make a UI as in this pic. When a button is pressed in side bar, the view in right hand side changes. Side bar can also be hidden.

Is there any way in ST2 to add another view in a container at run time just like in ios we use "[self.view addSubView:tV_coverage_view]?

For example if a user presses "TV Coverage" button, I should create an instance of "TV_Coverage_View" and add it to the right hand side container.And "TV_Coverage_Controller" will handle all the thing inside that view.

What sort of container should I use for left side buttons panel and right hand side.

A little code sample will be helpful.

Upvotes: 1

Views: 1692

Answers (1)

Swar
Swar

Reputation: 5503

For the left and right part, you should use a hbox container. Example:

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            width : 250
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 1,
            layout : 'card'
        }
    ]
});

Now, because you need multiple panels at right, you need a card layout as a parent. Hence the second panel. For any sencha application, understanding the layout concepts is very important. Do consult sencha guide for this.

Now for switching between pages at right, use add() and animateActiveItem() functions.

Upvotes: 1

Related Questions