Change child-view inside main-view Sencha Touch 2.4 - extjs

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?

Answer 1

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.

Answer 2

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