Refs in dynamic view and multiple controllers

[jbeduya]

I have been struggling with this and hopefully somebody can shed some light with my problem. I have an MVC ST2 app and I structured it this way:

app.js

...
   controllers: ['Main', 'Module1'],
   launch: function() {
      Ext.Viewport.add(Ext.create('app.view.Main'));
   }
...

view/Main.js

Ext.define("app.view.Main", {
    extend: 'Ext.navigation.View',
    config: {
        id: 'root-view',
        items: [
            {
                 xtype: 'list',
                 id: 'homemenu',
                 ...
            }
        ]
         ...
    }
    ....

Now I have two controllers to separate things up, since they look like modules to me. I have Main and Module1 controllers.

Ext.define('app.controller.Main', {
	extend: 'Ext.app.Controller',

	config: {
		routes: {
			'module1': 'loadModule1'
		},
		refs: {
			homeNav: '#homemenu',
			rootView: '#root-view'
		},
		control: {
			homeNav: {
				itemsingletap: 'homeClick'
			}
		}
	},

        homeClick: function(view, index, target, record, e, eOpts) {
		if (record.get("name") == "Module 1") {
			this.redirectTo('module1/home');
		}
	},
        ...

controller/Module1.js

Ext.define('app.controller.Module1', {
	extend: 'Ext.app.Controller',

	config: {

		routes: {
			'module1/home': 'showHome'
		},
		refs: {
			homeNav: '#module1-homenav',
			rootView: '#root-view'
		},
		control: {
			homeNav: {
				itemsingletap: 'homeClick'
			}
		}
	},

	showHome: function() {
		this.getRootView().push(Ext.create('app.view.module1.Home', { id: '#module1-homenav' }));
	},

	homeClick: function(view, index, target, record, e, eOpts) {
		console.log(record);
	}
        ...

My problem is with the itemsingletap listener of 'homeNav' in Module1 controller. It's not executed, probably because it's dynamically inserted into the view after the controller has been initialized.

How can I make this work? Am I doing this the wrong way?

[jbeduya]

Anyway, what I came up with is something like this in Module1.js:

...
	showHome: function() {
                if (Ext.getCmp('module1-homenav')) return;
		var menu = this.getRootView().push(Ext.create('app.view.module1.Home', { id: '#module1-homenav' }));
                menu.down('list').on('itemsingletap', this.homeClick, this);
	},
        ...

It works just fine but it might not be the best solution out there.

[haduki]

controller/Module1.js

homeNav: '#module1-homenav'

'#module1-homenav' is not 'list' i think.

homeNav: '#module1-homenav > list'

[jbeduya]

You are absolutely right. Thank you so much!

- Junrey

controller/Module1.js

'#module1-homenav' is not 'list' i think.

homeNav: '#module1-homenav > list'