Extjs - 4.1.1 - Moving between views in an Extjs app

[always.amita]

Hello,

I have a app.js - that lists 2 controllers registered in my app. on load of an html, the first controller renders its associated view. On click of an item in on this view, the contentbody is replaced with contents of the other view.
Here's the issue. When the first view is loaded, the stores referred in the second controller are also fired.
i see an ajax call made. I do not want to the store to load, until i render the second view.

Also, i have a certain data in the event as id and name, (see contrller 1 below), which i need on the view 2 for its store to fire a load event. How do i pass these.?

Kindly help.

app.js

Ext.application({name: 'NewApp',    
    controllers:['controller1','controller2' ],    
    autoCreateViewport: true
});
Ext.Loader.setConfig({enabled:true});

The controller1 :

Ext.define('NewApp.controller.controller1', {
    extend: 'Ext.app.Controller',
    
    models: ['XModel','YModel'],
    stores: ['XStore', 'YStore'],
    
    refs: [
         {ref: 'view1', selector: 'view1'},
        {ref: 'view2', selector: 'view2'},
         ],
 init: function() {
        var me = this;
        
       me.control({
            'view1': {
              itemclick : function(view, record, htmlElement, rowIndex, event, eventOpts) {
               Ext.getCmp("contentsbody").remove('view1');
           Ext.getCmp("contentsbody").add(Ext.create('NewApp.view.view3'));
        Ext.fly('id').dom.innerHTML = event.target.id;
        Ext.fly('name').dom.innerHTML = event.target.name;
}.........

Controller 2 :

Ext.define('NewApp.controller.controller2', {
    extend:'Ext.app.Controller',
    stores: ['store1','store2'],
    models: ['model1'],
    views: ['view3'],
    init:function () {
        var controller = this;
....events and handlers for components in view 3

}

[mitchellsimoens]

So don't have autoLoad set to true on your stores and then when you want them to load, execute the load method on the stores.

Also, sounds like you aren't using layouts or anything but just inserting html in, that is not recommended.

[always.amita]

Thank you much for replying,
I had made set the autoLoad to false and loaded the stores whenever needed.

This is my first time with Extjs and didnt much know of the layout. Could you give me some info on why moving inserting html in a 'contentBody' is not recommended.

[mitchellsimoens]

That is a progressive enhancement means of doing anything, the best way is to use layouts and switch between the components. For instance using card layout and using setActiveItem method to switch between child items

[always.amita]

This is my code for the viewport. The contentsbody would be replaced with various views.
Isnt this like a layout...with header, contents body etc.... Let me know wht kind of issues i could run into, with such an approach....rendering time issues????

Ext.define('mmm.view.Viewport', {
    extend: 'Ext.Viewport',
    requires:[
        'mmm.view.xyz',
        'mmm.view.abc    ],
    initComponent:function () {

        var me = this;
        Ext.apply(me, {
            items:[
                {
                    xtype:'panel',
                    border:false,
                    id:'viewport',

                    dockedItems: Ext.create('mmm.view.Header'), //Header
                    
                    items:[
                              {
                                      xtype:'container', id:'hdnav', autoEl:{ tag:'nav' },
                                items:Ext.create('mmm.view.Navigation') //Navigations
                              },
                              {
                                      xtype:'container', autoEl:{ tag:'section', cls:'contents-wrapper' }, 
                                      items:[
                                              { 
                                                  xtype:'container', id:'contentsbody', cls:'contents', autoEl:{ tag:'section'},
                                                //items:Ext.create('mmm.view.Dashboard') //Dashboard
                                             }
                                         ]
                              }
                          ]

                }
            ]
        });
        me.callParent(arguments);
   }
   
});