1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    7
    Vote Rating
    0
    always.amita is on a distinguished road

      0  

    Default Answered: Extjs - 4.1.1 - Moving between views in an Extjs app

    Answered: Extjs - 4.1.1 - Moving between views in an Extjs app


    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

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

    Code:
    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 :
    Code:
    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
    }

  2. 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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    7
    Vote Rating
    0
    always.amita is on a distinguished road

      0  

    Default


    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.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    7
    Vote Rating
    0
    always.amita is on a distinguished road

      0  

    Default


    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????
    Code:
    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);
       }
       
    });

Thread Participants: 1

Tags for this Thread