PDA

View Full Version : Controller "control" function and arbitrary selector



andrej_marincic
18 Jan 2012, 3:56 AM
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
18 Jan 2012, 4:41 AM
Try this instead, noting that I removed the > from your selector statement:




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

andrej_marincic
19 Jan 2012, 1:35 AM
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
19 Jan 2012, 5:07 AM
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
19 Jan 2012, 5:20 AM
Yes now i'm using TreePanel and it works.

thank you for your answer.