Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2010
    Posts
    21
    Vote Rating
    0
    gouber80 is on a distinguished road

      0  

    Default Defined ComboBox Select Event while inside Panel

    Defined ComboBox Select Event while inside Panel


    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

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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2010
    Posts
    21
    Vote Rating
    0
    gouber80 is on a distinguished road

      0  

    Default Thanks again

    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

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2010
    Posts
    21
    Vote Rating
    0
    gouber80 is on a distinguished road

      0  

    Default I was pointed to the wrong file for testing, ugh

    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

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2010
    Posts
    21
    Vote Rating
    0
    gouber80 is on a distinguished road

      0  

    Default Help to narrow down why the event might not be firing

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

Thread Participants: 1