Results 1 to 4 of 4

Thread: ComboBox inside Panel Select Event Trouble

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2010
    Posts
    21
    Vote Rating
    0
      0  

    Default ComboBox inside Panel Select Event Trouble

    I defined a combo to use in panels like the following.

    Code:
    defineFieldComboBox: function ()
        {
            var fieldsSS = new Ext.data.SimpleStore({
                storeId: 'fieldsSS'
                , data: [['0', 'Field Label'], ['1', 'Field Line'], ['2', 'Field Space'], ['3', 'Field Text']]
                , fields: ['Value', 'Text']
            });
    
    
            Ext.define('fieldsComboBox', {
                extend: 'Ext.form.ComboBox',
                constructor: function (config)
                {
                    Ext.apply(this, {
                        id: config.id
                        , width: 100
                        , queryMode: 'local'
                        , displayField: 'Text'
                        , valueField: 'value'
                        , store: fieldsSS
                        , forceSelection: true
                        , trigggerAction: 'all'
                        , listeners: { 'select': STATS.Resources.Portal.Shared.Scripts.InputFieldControl.onFieldsComboBoxSelect }
                    });
                    this.superclass.constructor.apply(this, config);
                }
            });
        },
    Initially the select event is fired. When I add items to the panel, the event is no longer fired. When I first saw this it was easy to just drop and recreate the combo and the event. However, I created the combo into a panel that allows users to enter text or select from another combo based on this selection. This comboBoxPanel is inside another set of panels to create columns and rows of user selections. The events work for multiple comboBoxPanels if I add multiple columns or rows at once without making a selection from the fieldsComboBox. I can make as many selections as I want, but once I add columns/rows, the events are no longer fired except for the new columns/rows. Does anyone have any ideas?

    Thank You,
    TJ

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Couple things that jump out at me right away. You are creating a custom ComboBox class but using a single store instance. All instances of your fieldsComboBox will share that single store instance, you should create a new store instance for each instance of fieldsComboBox.

    Second thing is you are using the listeners config to add listeners. If you ever want to add your own listeners when you create an instance, this will overwrite those. You should use this.on() to create a listener in your class definition.

    http://mitchellsimoens.com/2011/12/e...-property-bad/
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2010
    Posts
    21
    Vote Rating
    0
      0  

    Default Thank You Thank You Thank You

    It is nice to be outside the box(combobox haha) to see these things sometimes. That was the exact issue. I will also change the store so that I do not run into other issues later on.

    Thanks,
    TJ

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2010
    Posts
    21
    Vote Rating
    0
      0  

    Default I spoke too soon, but I still got it

    I had an extra g in my triggerAction and my forceSelection seemed to be causing some issues as well. Here is my code if anyone else runs into a similar issue.

    Code:
            Ext.define('fieldsComboBox', {
                extend: 'Ext.form.ComboBox',
                constructor: function (config)
                {
                    Ext.apply(this, {
                        id: config.id
                        , 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']
                        })
                        , triggerAction: 'all'
                    });
    
    
                    this.superclass.constructor.apply(this, config);
    
    
                    this.on('select', this.onFieldsComboBoxSelect, this);
                },
    
    
                onFieldsComboBoxSelect: function (combo, b, c)
                {
    .........
    Thanks again,
    TJ

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •