Sencha Touch event delegate for multiple items - extjs

Question

I'm trying to delegate an event for multiple items by a common class name, but, it seems not to be working. Delegating for multiple IDs should work but I'm getting an error message about: "Invalid ComponentQuery selector".
This is what I have at the moment:
Ext.define("App.view.Main", {
extend : "Ext.Container",
config : {
listeners : {
disclose : {
fn : "onElementDisclose",
delegate : [ "#onelist", "#anotherlist" ] // this don't work
// delegate : ".lists" <- this also don't work
// delegate : "#onelist, #anotherlist" <- this don't work either
// delegate : "#onelist" <- but this work!
}
},
},
initialize : function() {
this.callParent(arguments);
this.add([ {
xtype : "slideshow",
}, {
xtype : "onelist",
}, {
xtype : "anotherlist",
} ]);
},
onElementDisclose : function () {
console.log("click");
},
});
Both lists have "onItemDisclosure : true" and "cls: lists".
How can I achieve this?

Answer 1

This certainly works to a degree and you don't have to delegate it in the controller as demonstrated here:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
title: 'Test',
layout: 'vbox',
items: [{
xtype: 'panel',
layout: 'fit',
flex: 1,
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'List 1'
}, {
xtype: 'list',
name: 'list 1',
cls: 'myList',
id: 'list1',
onItemDisclosure: true,
itemTpl: "List1 item {name}",
model: Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'name',
type: 'string'
}]
}
}),
data: [{
name: 'John'
}, {
name: 'Jane'
}]
}]
}, {
xtype: 'panel',
layout: 'fit',
flex: 1,
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'List 2'
}, {
xtype: 'list',
name: 'list 2',
cls: 'myList',
id: 'list2',
onItemDisclosure: true,
itemTpl: "List2 item {make}",
model: Ext.define('Car', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'make',
type: 'string'
}]
}
}),
data: [{
make: 'Volkswagen'
}, {
make: 'Audi'
}]
}]
}],
listeners: {
disclose: {
fn: function(list, record, target, index, e, eOpts) {
console.log(list);
var greeting = '';
if (typeof(record.data.make) != 'undefined') {
greeting = "I am a car and my make is " + record.data.make + "!";
} else if (typeof(record.data.name) != 'undefined') {
greeting = "I am a user and my name is " + record.data.name + "!";
};
console.log('disclosing from list ' + list.config.name, greeting);
},
// delegate : 'list' // this works as you are querying by xtype of list
// delegate : 'component [onItemDisclosure]' // this works as you are targeting by attribute of onItemDisclosure
// delegate : '[onItemDisclosure]' // this works as you are targeting by attribute
// delegate : '[name="list 1"]' // this works as you are targeting by attribute of name = 'list 1'
// delegate : '[cls="myList"]' // this unfortunately doesn't work
// delegate : "#list1, #list2" <- this don't work either
// delegate : "#list1" <- but this work!
}
}
});
}
});
However there are some pitfalls with the above as you can see.
Demo: https://fiddle.sencha.com/#fiddle/g49

Answer 2

You cannot fire same function using common events on multiple control defining listeners in view.
Yes you can do the same in controller. it will work undoubtedly..
Thanks
Sachin