Change child-view inside main-view Sencha Touch 2.4

Question

I am learning sencha touch and extjs using citybars sample app provided by sencha itself.

Here is the link http://docs.sencha.com/architect/3/tutorials/first_mobile_application.html

This app is very good for learning purpose and now i want to create an demo app in which i have following things:

There is a mainview which contains, static/fixed header (name view1).
Main view contains another view, let say view2 which is variable or can be changed.

Question

How can i achieve this functionality in which view2 change dynamically?

Sample Image

score 1 · Answer 1 · answered Mar 04 '15 at 11:57

I can guide you with what you want to achieve.

If you need a slide navigation then first try this. I am providing you with an sample code which will give you some idea on your desired layout. Try this view:

Ext.define('Sample.view.Main', {
        extend: 'Ext.Container',
        xtype: 'main',
        requires: [
        'Ext.dataview.List'
        ],
        config: {
          layout: 'hbox',
          cls: 'main',
          items: [{
            xtype: 'list',
            itemTpl: '{title}',
            data: [{ title: 'Red', val: 'red' },
            { title: 'Blue', val: 'blue' },
            { title: 'Orange', val: 'orange' },
            { title: 'Purple', val: 'purple' }],
            flex: 1,
            listeners: {

                itemtap: function(el, index, target, record, e) {
                    var me = this,
                    element = Ext.get(e.target),
                    main = element.parent('.main'), //assign the dom of 'Main' view to 'main'
                    newCls = record.get('val');

                    if(me.lastAddedCls) {
                        main.removeCls(me.lastAddedCls).addCls(newCls);
                    } else {
                        main.addCls(newCls);
                    }

                    me.lastAddedCls = newCls; // Keeps track of last added view so that it can be further removed
                }
            }
        }, {
            cls: 'viewTwo',
            flex: 2
        }]
    }
});

Here suppose the first section is navigation panel and second section is you desired variable view 2. You can now add some styling in a css file(say style.css)

.main.red {
    background-color: red;
}
.main.blue {
    background-color: blue;
}
.main.purple {
    background-color: purple;
}
.main.orange {
    background-color: orange;
}

NB: Don't forget to add this css file in bootstrap.json and app.json files.

I showed this example by changing the background color. You can try adding and removing views here.

Feel free to ask any query.

Thanks Anand. The provided link is very helpful. Thanks again :) — Mohit Pandey, Mar 04 '15 at 12:40

score 0 · Answer 2 · answered Mar 02 '15 at 18:49

You could use a TabPanel with a docked top toolbar. The TabPanel bottom bar would then allow your users to navigate between the views in your app.

A very simple example which you could build on for your own use:

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: 'My title'
        },
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});

The items would just be your own views created in Architect:

items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'My title'
            },
            {
                xtype: 'mylistview',
                iconCls: 'home'
            },
            {
                xtype: 'mymapview',
                iconCls: 'map'
            }
        ]

Read more here => http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.tab.Panel

When i use `tabpanel`, it contains two tab button. I don't want them. Instead i want a textfield at center, a menu icon on left, such that when user clicks it, an overlay menu is shown. How can i achieve this? — Mohit Pandey, Mar 03 '15 at 05:55
OK well this is turning into a 'Someone write my code for me...' type of question I suggest you look at Ext.Menu in the docs which you could show\hide with a docked top toolbar button click handler. — mindparse, Mar 03 '15 at 09:18
I don't want you to write any code for me. I am just asking for some suggestions which helps me to use best practices of Sencha Touch :) — Mohit Pandey, Mar 03 '15 at 09:42

Change child-view inside main-view Sencha Touch 2.4

2 Answers2