Controller Question

[landed]

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

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');
	}




});

[mitchellsimoens]

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.

[landed]

Are you saying remove the mainLayout from the control segment.

How do I call a function from ref ?

[mitchellsimoens]

I'm saying replace mainLayout from the control with a valid ComponentQuery selector.

[landed]

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

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

[mitchellsimoens]

It's correct if you have specified those id

[landed]

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.

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.

[fhellwig]

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.

[landed]

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 ?

[fhellwig]

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.