1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    255
    Answers
    6
    Vote Rating
    2
    landed is on a distinguished road

      0  

    Question Answered: Controller Question

    Answered: Controller Question


    Please see my controller. I understand that I use ref to get a reference to visual class elements that I may need to change in some way (from within my/this controller).

    '#setBttn' works and then uses ref to find the button and hide it - ALL GOOD !

    But I cannot seem to get the mainLayout class which is a tabpanel to alert me when the active panel is changed. When it is changed I want to set the title of the main toolbar to represent the new section. I figured this was better than having a toolbar in each individual item - so I just have a root global toolbar. I digress but I cant seem to do it please can you see what I may be doing wrong ? Thanks

    Code:
    Ext.define('bv2.controller.Layout', {  extend: 'Ext.app.Controller',
      
        config: {
    		
    		refs:{
                popup: '#thePopup',
    			
    			mainlayout: {
                    selector:'#theTabPanel',
                    xtype: 'tabpanel',
                    autoCreate: true
                }
    
    
            },
    		
    		
            control: {
    
    
                '#setBttn': { tap: 'doSettings'},
    			mainLayout: { activeitemchange:'onTabChange'},
    			mainLayout: { tap:'onTabChange'}
    	
    		}
    	}
        ,
    	
    	doSettings: function() {
    			//console.log(this.getPopup());//by convention popup becomes getPopup !!!
    			this.getPopup().show();		
        },
    	onTabChange:function(){
    			alert('change view');
    	}
    
    
    
    
    });

  2. Thanks, I got it working by setting the id NOT in the define area but IN THE create area - then this works. I'm always unsure what is happening with define and create - separating the two things must be for a good reason but it gives us noobs a learning curve.
    Code:
    Ext.define('bv2.view.Layout', {
    extend: 'Ext.TabPanel',
    // DO NOT PUT ID IN HERE !!
    
    xtype: 'mainLayout',
    require:['Ext.List','marketPanel','chartPanel','bv2.store.Market']
    });
      
    var mainTabBar=Ext.create('Ext.TabPanel', {
    	id:'theTabPanel' PUT ID IN HERE
    Thanks for your help with this I feel that I have really learnt something about the controller now.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3461
    Vote Rating
    827
    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


    I would practice using 4 spaces instead of tabs, most editors will convert tabs to 4 spaces but may not be enabled by default. Your code is hard to read.

    You have mainLayout in control which means it will try to match the events fired with the xtype mainLayout. The control config does not bind event listeners and refs, they are separate.
    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
    Feb 2012
    Posts
    255
    Answers
    6
    Vote Rating
    2
    landed is on a distinguished road

      0  

    Default


    Are you saying remove the mainLayout from the control segment.

    How do I call a function from ref ?

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3461
    Vote Rating
    827
    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


    I'm saying replace mainLayout from the control with a valid ComponentQuery selector.
    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
    Feb 2012
    Posts
    255
    Answers
    6
    Vote Rating
    2
    landed is on a distinguished road

      0  

    Default


    control: {
    '#setBttn': { tap: 'doSettings'},
    '#theTabPanel': { activeitemchange:'onTabChange'}
    }

    like this ? Its still not working, is that syntax right please - continued thank you.

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3461
    Vote Rating
    827
    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


    It's correct if you have specified those id
    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.

  8. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    255
    Answers
    6
    Vote Rating
    2
    landed is on a distinguished road

      0  

    Cool Improtant where to set id:''

    Improtant where to set id:''


    Thanks, I got it working by setting the id NOT in the define area but IN THE create area - then this works. I'm always unsure what is happening with define and create - separating the two things must be for a good reason but it gives us noobs a learning curve.
    Code:
    Ext.define('bv2.view.Layout', {
    extend: 'Ext.TabPanel',
    // DO NOT PUT ID IN HERE !!
    
    xtype: 'mainLayout',
    require:['Ext.List','marketPanel','chartPanel','bv2.store.Market']
    });
      
    var mainTabBar=Ext.create('Ext.TabPanel', {
    	id:'theTabPanel' PUT ID IN HERE
    Thanks for your help with this I feel that I have really learnt something about the controller now.

  9. #8
    Sencha User
    Join Date
    Feb 2012
    Location
    Virginia, USA
    Posts
    21
    Answers
    1
    Vote Rating
    0
    fhellwig is on a distinguished road

      0  

    Default


    The id is the actual DOM object identifier. They must be unique for each object instance that is created in the app. The Ext.define operation creates a class template for which any number of instances can be created so having an id there would not be valid since any number of objects can be instantiated. This is why the id only makes sense on an Ext.create operation. I hope that this helps explain the OP's question regarding the rational of the id config property placement.

  10. #9
    Sencha User
    Join Date
    Feb 2012
    Posts
    255
    Answers
    6
    Vote Rating
    2
    landed is on a distinguished road

      0  

    Default Thanks - that helps understand what is happening

    Thanks - that helps understand what is happening


    in this case then can i do the create in a different class at a different time...later on
    can i have a single class doing ALL my defines that i loads in index.html , then as my custom class files just do the creates ?

  11. #10
    Sencha User
    Join Date
    Feb 2012
    Location
    Virginia, USA
    Posts
    21
    Answers
    1
    Vote Rating
    0
    fhellwig is on a distinguished road

      0  

    Default


    You could, but that is not the Sencha Touch/ExtJS recommended architecture. You should define each class in the appropriate file located in the correctly-namespaced directory. For example, the class "MyController" should be placed in a file under the path "app/controller/MyController". Then, in your Ext.application statement, you add MyController to the controllers array and let the framework do the instantiation for you.

    This separation of responsibility (defining classes in the correct files and deferring instantiation to the framework) is detailed in the various examples and API code snippets.