which is the bestway to write sencha touch code?

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.