Results 1 to 3 of 3

Thread: Accessing Component from Another Controller

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Indonesia
    Posts
    23

    Default Answered: Accessing Component from Another Controller

    Hi all,

    Right now I am currently developing apps that need to change a child component on a view. I have a HomeIndex view which is created from HomeController. I build an XTemplate that listen to a tap function that will function to redirect to another Controller which is OrderController.

    In HomeIndex view I have a panel with card layout which I give ID : 'HomeIndex_panelOrderDate'. Right now my problem is I have to change only the active item in this panel when I am in OrderController after tapping.

    For illustration this is my HomeController code :
    Code:
    Ext.regController('Home', {
        Index: function(params) {           
            if(params.authenticated) {
                this.HomeIndex = new App.views.HomeIndex();
                App.views.viewport.setActiveItem(this.HomeIndex, params.animation);    
            } else {
                Ext.dispatch({
                    controller: 'Home',
                    action: 'Login',
                    urlHistory: 'Home/Login',
                    animation: {
                        type: 'slide',
                        direction: 'right'
                    }                     
                })  
            }                                                   
        },
        Login: [...]
    });
    And this is my HomeIndex view code with corresponding panel :

    Code:
    App.views.HomeIndex = Ext.extend(Ext.Panel, {
        initComponent: function() {
                                             
            [....] 
            var templateOrderDate = Ext.XTemplate.from('template-order-date');
            
            [...] 
            var dataviewOrderDate = new Ext.DataView({
                id: 'HomeIndex_dataviewOrderDate',
                tpl: templateOrderDate,
                store: App.stores.OrderDate,
                itemSelector: 'div.order-date',
                listeners: {
                    el: {
                        tap: function(el) {     
                            el = el.target.parentNode;
                            var dish_meal_period, meal_order_date;     
                            dish_meal_period = childValueSelectorByName(el, 'dish_meal_period');
                            meal_order_date = childValueSelectorByName(el, 'meal_order_date');
                            Ext.dispatch({
                                controller: 'Order',
                                action: 'Index',
                                urlHistory: 'Order/Index',
                                dish_meal_period: dish_meal_period,
                                meal_order_date: meal_order_date
                            });
                        },
                        delegate: 'img.calendar-button'
                    }   
                }    
            });
                
            [....]
            var panelOrderDate = new Ext.Panel({
                id: 'HomeIndex_panelOrderDate',
                layout: {
                    type: 'card',
                    pack:'center'
                },
                items: [dataviewOrderDate],
                flex: 1    
            });
                    
            Ext.apply(this, {              
                layout: {
                    type: 'vbox',   
                    align: 'stretch'   
                },              
                dockedItems: [toolbarTop],
                items: [panelInfo, panelOrderDate]    
            })
            
            App.views.HomeIndex.superclass.initComponent.call(this);
        },       
        onLogoutAction: function() {
            Ext.dispatch({
                controller: 'Home',
                action: 'Login',
                urlHistory: 'Home/Login',
                logout: true 
            })
        },
        onCalendarAction: function() {
            
        }                   
    });
    
    
    Ext.reg('App.views.HomeIndex', App.views.HomeLogin);
    Right now I can access the panel from the order controller using Ext.getCmp('HomeIndex_panelOrderDate'), and I can use setActiveItem() to change the active item in the panel. However I found screencast that said that the usage of Ext.getCmp is dangerous and not recommended for developing application (http://extjsinaction.com/258). I just curious, in practical what is the best thing I need to do to achieve my task without using Ext.getCmp().

    Is there anyone that have tried using different approach for my cases here? Thanks you for your reply beforehand

  2. Each component has an xtype and your app has a hierarchy of components. getCmp isn't the dangerous part, it's the id config that is dangerous. ComponentQuery is a robust and flexible solution to go up and down the hierarchy of components via xtypes and properties.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    Each component has an xtype and your app has a hierarchy of components. getCmp isn't the dangerous part, it's the id config that is dangerous. ComponentQuery is a robust and flexible solution to go up and down the hierarchy of components via xtypes and properties.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Sep 2011
    Location
    Indonesia
    Posts
    23

    Default

    Oh I see. As long I can maintain my ID so it should be okay right? Thanks Mitchell for your answer.

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
  •