Defined ComboBox Select Event while inside Panel

[gouber80]

Ext version tested:

• Ext 4.1.0 Beta 2

Browser versions tested against:

• Chrome17
• IE9

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

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);
    }
};

[mitchellsimoens]

In your buildComboPanel method, you have this:

        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.

[gouber80]

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

[gouber80]

I changed it to the following code. I am still able to recreate the error as described originally.

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

[gouber80]

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

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();
        }
    },