PDA

View Full Version : Find div element created inside tpl



vishalagarwal
30 Apr 2015, 2:51 PM
Hi,

I am adding before tpl for a combo box initialize:

tpl = Ext.create('Ext.XTemplate',
'<div id="selectalldiv">' + me.selectAllLabel + '</div>',
'<tpl for=".">',
'<div class="x-boundlist-item value-bound-list-'+"{[xindex % 2 === 0 ? 'even' : 'odd']}"+'">',
'<span class="combo-box-bound-list">{'+me.displayField+'}</span>',
'</div>',
'</tpl>');

Then added a click handler for the div:

Ext.apply(combo, {
listConfig: {
listeners: {
el: {
click: {
delegate: 'div#selectalldiv',
fn: function(ev, element) {
console.log('******in select all click***********');
}
}
}
}
}
});


I want to write a method to invoke this click event. Issue is I am not able to find the div element. I tried document.getElementById and others. They all return null.

Please help!!!

skirtle
30 Apr 2015, 8:26 PM
My first thought is that you should stay clear of ids, use a CSS class instead. Also, does it 'work' as expected if you remove the delegate selector completely?

I suggest putting together a Sencha Fiddle so we can see exactly what you're doing.

vishalagarwal
1 May 2015, 7:36 AM
Thanks for your response. I am new to Ext JS and JS world. I am trying to create a multi-select combobox with (Select All) option. I am facing two issues with the below code:

1. If I try to add CSS class "x-boundlist-item" then I get error "Uncaught TypeError: Cannot read property 'internalId' of undefined" while opening the combo. I avoid styling while initialize for now.
2. Main issue for me is unable to locate the "selectall" element outside the click event.

I tried removing the delegate still same issue.

Below is the complete code on the control:

Ext.define('My.view.controls.ComboMultiSelect', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.combomultiselect',
multiSelect: true,
editable: false,
selectAllLabel: '(Select All)',
deSelectAllLabel: '(Deselect All)',
selectAllHtml: '<div class="x-boundlist-item">' + '<span class="combo-box-bound-list">(Select All)</span>' + '</div>',
deSelectAllHtml: '<div class="x-boundlist-item x-boundlist-selected">' + '<span class="combo-box-bound-list">(Deselect All)</span>' + '</div>',
selectAllEl: '',
tpl: '',
displayField: 'field1',
valueField: 'field1',
initComponent: function () {
var me = this;
me.callParent(arguments);


if (!me.tpl) {
if (me.displayField) {
me.tpl = Ext.create('Ext.XTemplate',
'<div class="selectalldiv">' + me.selectAllLabel + '</div>',
'<tpl for=".">',
'<div class="x-boundlist-item value-bound-list-' + "{[xindex % 2 === 0 ? 'even' : 'odd']}" + '">',
'<span class="combo-box-bound-list">{' + me.displayField + '}</span>',
'</div>',
'</tpl>');
}
}
me.on('afterrender', me.attachSelectAllListener, me);
me.on('select', me.onSelectItem, me);


},
attachSelectAllListener: function (combo) {
var me = this;
Ext.apply(combo, {
listConfig: {
listeners: {
el: {
click: {
delegate: '.selectalldiv',
fn: function (ev, element) {
me.selectAllEl = element;
if (me.selectAllEl.innerHTML === me.selectAllHtml ||
me.selectAllEl.innerHTML === me.selectAllLabel) {
combo.select(combo.getStore().getRange());
me.selectAllEl.innerHTML = me.deSelectAllHtml;
} else {
combo.select('');
me.selectAllEl.innerHTML = me.selectAllHtml;
}
}
}
}
}
}
});
},
onSelectItem: function (combo, records) {
var me = this;
if (records.length === combo.getStore().getCount()) {
me.selectAllEl.innerHTML = me.deSelectAllHtml;
} else {
me.selectAllEl.innerHTML = me.selectAllHtml;
}
},
SelectAll: function (ev, element) {
// How to reference the select all class/div element here?
}
});

skirtle
1 May 2015, 8:07 AM
Please provide a Fiddle:

https://fiddle.sencha.com/
https://www.sencha.com/forum/showthread.php?268535-Using-Fiddle-within-the-forums

It's quite difficult to read your code because you haven't wrapped it in [CODE] tags. At first glance your use of innerHTML looks highly dubious - use the update method to set it and never rely on reading it.

It's not immediately clear why you're using an afterrender listener either.

You also might want to consider subclassing BoundList rather than trying to poke in a lot of customizations from the combobox.