which is the bestway to write sencha touch code? - sencha-touch-2

Question

Ext.define('App.view.Main', {
extend: 'Ext.Container',
xtype: 'mainview',
requires: [
'App.view.Main1',
'App.view.Menu2',
'App.view.My1',
'App.view.My2',
'App.view.Form'
],
config: {
items: [
{
xtype: 'file1'
},
{
xtype: 'file2',
hidden: true
},
{
xtype: 'file3',
hidden: true
},
{
xtype: 'file4',
hidden: true
},
{
xtype: 'file5',
hidden: true
},
{
xtype: 'file6',
hidden: true
},
{
xtype: 'file7',
hidden: true
}
]
}
});
In the above code Main file is mainview and I am doing hiding all those xtypes and showing what i want. But it is very difficult to maintain project for hiding and showing.
In my project i have a view files of morethan 30.
Is there any way to add files whatever i want without this hide and show?

Answer 1

If your views are relatively similar, you should create them programmatically. So follow these steps:
Create your main view with no items, give it an id, says "main-view".
Place this function somewhere you feel suitable:
addItemsToMainView: function(numberOfFiles){
var mainView = Ext.getCmp('main-view');
for (var i=1; i<= numberOfFiles; i++){
var xtypeName = "file" + i.toString();
mainView.add({xtype: xtypeName, id: i.toString()});
}
// if you want to show and hide all of them
for (var i=1; i<= numberOfFiles; i++){
Ext.getCmp(i.toString()).hide();
// or Ext.getCmp(i.toString()).show();
}
}
The above code snippet is just an example but I believe you can get an idea of how it works.
Hope this helps.