Controller "control" function and arbitrary selector

[andrej_marincic]

Hello,

for whole day now i'm trying to create simple MVC application. What i'm trying to do is create Viewport with west and center region like this:


Ext.create('Ext.container.Viewport', {

layout: 'border',
renderTo: Ext.getBody(),
items: [
{
region: 'west',
layout: 'fit',
width: 200,
html: "<ul id='main-menu'><li>option 1</li><li>option 2</li><li>option 3</li></ul>"
},
{
region: 'center',
layout: 'fit',
xtype: 'userlist'
}]
});

in controller init() function i put:


this.control({

'#main-menu > li': {
click: function(){
alert("clicked");
}
}
});

but click handler never gets called.

Can control function only handle events on components or can i attach events to arbitrary HTML node?

best regards, and thank you for answer :-)

[friend]

Try this instead, noting that I removed the > from your selector statement:




this.control({
'#main-menu li': {
click: function(){
alert("clicked");
}
}
});

[andrej_marincic]

No this also doesent work :/

I think you can only hook "standard" components or if you make custom component that is sending this application events.

[friend]

My apologies, I glossed over your code sample too quickly and only just now noticed that you're shoving HTML into a panel.

You'll need to use some kind of Components in your west panel if you want to easily integrate events in your Controller. It looks like you're trying to build a side-bar menu system; have you considered a Tree panel instead?

[andrej_marincic]

Yes now i'm using TreePanel and it works.

thank you for your answer.