PDA

View Full Version : CSS Attribute Selector partly doesn't work in ExtJS



parovoz
16 Sep 2011, 1:57 AM
Hi all.
I use ExtJS 4.0.6 and my app based on MVC pattern. As a result all events (e.g. button click) are catched by Controllers.

Now about my problem:

I have a toolbar with some menu elements. Menu elements has dinamically generated ID value, i.e. during menu creation I just know small part of ID value (e.g. id = someId + "-menu-actionProject").

View:



...
text: textValue,
id: someId + '-menu-actionProject',
cls: 'menu-button',
icon: iconPath
...


Controller:
Controller just catch click event of the button and make some actions.



init: function() {
this.control({
'button[id$="menu-actionProject"]': {
click: function(button, e, opt) {
...
}
}
})
}


Issue:
CSS selector button[id$="menu-actionProject"] doesn't work.
BUT when I write full ID name then it works perfect: button[id="th-toolbar_2-menu-actionProject"]. And it doesn't metter what kind of selector I use: E[foo*="bar"], E[foo^="bar"] or E[foo~="bar"].
It only works when the whole ID value is used in Selector.

Please help me, because it very urgent.

skirtle
19 Sep 2011, 8:14 AM
Though the syntax for component queries is similar to that of CSS selectors it is important to realize that it is not a CSS selector and it is not safe to assume that the rules for CSS selectors carry across.

If you take a look at the source and specifically the method filterByAttribute:

http://docs.sencha.com/ext-js/4-0/source/ComponentQuery.html#Ext-ComponentQuery

you'll see that the operator is actually ignored. If you work back to the original regex you'll find that operator is the bit with the equals sign. Though it seems likely that future versions will support all of the operators that are supported in CSS selectors it appears that currently it does not.

If your button cannot be identified by xtype then the easiest way is just to add a dummy property purely for matching purposes. This may seem a bit hacky but it should be noted that the ref config option was removed with this technique in mind.

e.g.


text: textValue,
matchMe: true,
cls: 'menu-button',
icon: iconPath


this.control({
'button[matchMe]': {
...
}
});

parovoz
19 Sep 2011, 9:55 AM
Thx a lot for your suggestion!