Thank you for reporting this bug. We will make it our priority to review this report.
-
Ext JS Premium Member
Defined ComboBox Select Event while inside Panel
Ext version tested:
Browser versions tested against:
Description:
- When adding a combo box that has been defined the select event fires the first time but will not fire after that. I have changed the event listener to beforeselect and it fires every time.
Steps to reproduce the problem:
- Please look for the //CHANGE ME comment for the only difference in my working vs non working code.
- For the configs that I passed into my js control I passed in an id and renderTo.
The result that was expected:
- The select event listener should fire and call the method that is setup as it is when the beforeselect event listener is setup.
The result that occurs instead:
- The select event listener fires the first time only.
For further information please see my post where I thought I got this working.
http://www.sencha.com/forum/showthre...282#post743282
Code:
Ext.namespace('STATS.Resources.Portal.Shared.Scripts.InputFieldControl');
STATS.Resources.Portal.Shared.Scripts.InputFieldControl = {
init: function (configs)
{
this.configs = configs;
this.defineFieldComboBox();
this.createColumnContainer(configs.id);
this.addColumn(configs.id);
},
defineFieldComboBox: function ()
{
Ext.define('fieldsComboBox', {
extend: 'Ext.form.ComboBox'
, initComponent: function ()
{
var me = this;
Ext.apply(me, {
width: 100
, queryMode: 'local'
, displayField: 'Text'
, valueField: 'value'
, store: new Ext.data.SimpleStore({
storeId: 'fieldsSS'
, data: [['0', 'Field Label'], ['1', 'Field Line'], ['2', 'Field Space'], ['3', 'Field Text']]
, fields: ['Value', 'Text']
})
});
me.callParent(arguments);
}
, onFieldsComboBoxSelect: function (combo, b, c)
{
alert("selected");
}
});
},
buildComboPanel: function (id, cnt)
{
var fcb = Ext.create('fieldsComboBox', { id: id + '_fieldsCombo_' + cnt });
fcb.on('select', fcb.onFieldsComboBoxSelect, fcb);
//CHANGE ME
//fcb.on('beforeselect', fcb.onFieldsComboBoxSelect, fcb);
this.comboPanel = Ext.create('Ext.panel.Panel', {
id: id + '_fieldsComboPanelContainer_' + cnt
, cls: 'manageInputFormPanelBorder'
, width: 215
, layout: {
type: 'vbox',
align: 'left'
}
, items: [{
xtype: fcb
}]
});
return this.comboPanel;
},
createColumnContainer: function(id)
{
Ext.create('Ext.panel.Panel', {
id: id + '_comboColumnContainer'
, cls: 'manageInputFormPanelBorder'
, width: 960
, layout: {
type: 'hbox'
, align: 'left'
}
, renderTo: this.configs.renderTo
});
},
addColumn: function (id)
{
var columnContainer = Ext.ComponentManager.get(id + '_comboColumnContainer');
var cnt = columnContainer.items.length;
var comboPanel = STATS.Resources.Portal.Shared.Scripts.InputFieldControl.buildComboPanel(id, cnt);
columnContainer.insert(cnt, comboPanel);
}
};
-
In your buildComboPanel method, you have this:
Code:
this.comboPanel = Ext.create('Ext.panel.Panel', {
id: id + '_fieldsComboPanelContainer_' + cnt
, cls: 'manageInputFormPanelBorder'
, width: 215
, layout: {
type: 'vbox',
align: 'left'
}
, items: [{
xtype: fcb
}]
});
but it looks like fcb is an instance of a combobox therefore that xtype isn't an xtype.
-
Ext JS Premium Member
Thanks again
I thought I had tried without that and it did not work. I was wrong. I guess my newborn is making me more tired than I thought. Sorry for the extra thread.
Thanks,
TJ
-
Ext JS Premium Member
I was pointed to the wrong file for testing, ugh
I changed it to the following code. I am still able to recreate the error as described originally.
Code:
var fcb = Ext.create('fieldsComboBox', { id: id + '_fieldsCombo_' + cnt });
fcb.on('select', fcb.onFieldsComboBoxSelect, fcb);
this.comboPanel = Ext.create('Ext.panel.Panel', {
id: id + '_fieldsComboPanelContainer_' + cnt
, cls: 'manageInputFormPanelBorder'
, width: 215
, layout: {
type: 'vbox',
align: 'left'
}
, items: [
fcb
]
});
return this.comboPanel;
Thanks again for your time,
TJ
-
Ext JS Premium Member
Help to narrow down why the event might not be firing
Here is a snippit from ext-all-debug for the combobox definition. The first time through me.isExpanded is true, the second time through it is false never calling the fireevent. I hope that helps narrow down things.
Thanks,
TJ
Code:
onListSelectionChange: function(list, selectedRecords) {
var me = this,
isMulti = me.multiSelect,
hasRecords = selectedRecords.length > 0;
if (!me.ignoreSelection && me.isExpanded) {
if (!isMulti) {
Ext.defer(me.collapse, 1, me);
}
if (isMulti || hasRecords) {
me.setValue(selectedRecords, false);
}
if (hasRecords) {
me.fireEvent('select', me, selectedRecords);
}
me.inputEl.focus();
}
},