Results 1 to 5 of 5

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

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    7
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,552
    Answers
    3931
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    7
    Vote Rating
    0
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,552
    Answers
    3931
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    7
    Vote Rating
    0
      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);
       }
       
    });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •