1. #1
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default Answered: Adding row of fields to form - list issue in new row combobox

    Answered: Adding row of fields to form - list issue in new row combobox


    Hi all, first thanks to everyone for their contributions/assistance to these forums. I've searched online for days and I can't /find a solution to/figure out what's wrong.
    I have a form panel, which initially has a single row (container using hbox layout) of a set of fields (comboboxes, textfields, buttons, etc) which a user can use to build boolean statement. This container also has buttons for 'AND', 'OR' and 'DEL' which can be used for appending another row (boolean statement) or deleting the current row to the form panel. I have local stores for the combobox values and this works all works fine/good...sort of.
    My problem is after a user has typed in a value into any of the comboboxes and when they add a new row, the combobox list of the new row is limited to what was chosen in the prior row - and only that value.
    I can see that the store of the new row's combobox has all the right values via firebug, but these aren't accessible through the GUI. I thought it was a browser issue, but can't shake it in Ffox nor IE. It's never a problem if they only select via the mouse. I've tried stripping down the combobox config, etc, searching online, using a fieldset instead of container. Any thoughts/ideas?

    Code:
    Ext.define('SearchTool.view.main.component.QueryBuilderRow', {
        extend: 'Ext.container.Container',
        alias: 'widget.builderRow',
        requires: ['SearchTool.config.Config'],
        layout: 'hbox',
        items: [{
            xtype: 'combo',
            cls: 'cboxFields',
            store: new Ext.data.SimpleStore({
                fields: ['fieldname', 'fieldvalue'],
                data: [
                    ['field1', 'FIELD1'],
                    ['field2', 'FIELD2'],
                    ['field3', 'FIELD3'],
                    ['field4', 'FIELD4']
                ]
            }),
            editable: true,
            selectOnFocus: false,
            forceSelection: true,
            displayField: 'fieldname',
            valueField: 'fieldvalue',
            emptyText: '(Select Field)',
            typeAhead: true,
            value: '',
            triggerAction: 'query',
            queryMode: 'local',
            width: '15%'
        }, {
            xtype: 'combo',
            cls: 'cboxOpers',
            store: operStore,
            displayField: 'opername',
            valueField: 'opervalue',
            emptyText: '(Select Oper)',
            forceSelection: true,
            typeAhead: true,
            triggerAction: 'query',
            shrinkWrap: 1,
            selectOnFocus: false,
            queryMode: 'local',
            width: '15%',
            enableKeyEvents: true,
            listeners: {
                'change': function (t, n, o, opts) {
                     //some code here to enable/disable other row fields
                }//change
            }//listeners
        }, {
            xtype: 'textfield',
            //        itemId: 'val1',
            width: '18%',
            emptyText: '(Enter value...)',
            regex: SearchTool.config.Config.qryBuilderTextFieldRegex,
            regexText: SearchTool.config.Config.qryBuilderErrText,
            enableKeyEvents: true
        }, {
            xtype: 'combo',
            cls: 'cboxAndOr',
            store: andorStore,
            minChars: 1,
            disabled: true,
            displayField: 'opername',
            valueField: 'opervalue',
            typeAhead: true,
            emptyText: '(AND/OR)',
            allowBlank: true,
            enforceMaxLength: true,
            matchFieldWidth: true,
            mode: 'local',
            width: '12%'
        }, {
            xtype: 'textfield',
            width: '17%',
            emptyText: '(Enter value...)'
        }, {
            xtype: 'hidden',
            value: ''
        }, {
            xtype: 'button',
            iconCls: 'icon-btnAdd',
            text: 'AND',
            width: '7%',
            handler: function (t) {
                var n = Ext.create('SearchTool.view.main.component.QueryBuilderRow');
                t.up('panel').add(n);  //add new row
                t.up('panel').items.items[t.up('panel').items.items.length - 2].down('button').next('button').next('button').hide();
                t.prev('hidden').setValue(' AND '); //to be passed in w/ form
            }
        }, {
            xtype: 'button',
            iconCls: 'icon-btnAdd',
            text: 'OR',
            width: '6.5%',
            handler: function (t) {
                var n = Ext.create('SearchTool.view.main.component.QueryBuilderRow');
                t.up('panel').add(n); //add new row
                t.up('panel').items.items[t.up('panel').items.items.length - 2].down('button').next('button').next('button').hide();
                t.prev('hidden').setValue(' OR ');
             }
        }, {
            xtype: 'button',
            iconCls: 'icon-btnDelete',
            text: 'DEL',
            width: '7%',
            handler: function (t, e, o) {
                var i = t.up('panel').items.items;
                var l = i.length; //length of the array of items
                if (l > 2) i[l - 2].down('button').next('button').next('button').show();
                i[t.up('panel').items.items.length - 2].down('hidden').setValue(''); //prev row hidden reset
    
                t.up('panel').remove(t.up('container')); //remove this row
            }
        }]
    });
    Attached Images
    Last edited by scottmartin; 19 Feb 2013 at 11:17 AM. Reason: format your code

  2. Sounds like you are filtering your store on the instance and then loading it again.. the filter will remain.

    Scott.

  3. #2
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    So here's an interesting find.... As part of my testing I'm doing this:
    If the combobox value is typed out in FULL (every letter) it causes this issue.
    Tying it partially and tabbing or hitting up/down arrow, etc...will not cause the issue.

  4. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,866
    Answers
    652
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Sounds like you are filtering your store on the instance and then loading it again.. the filter will remain.

    Scott.

  5. #4
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    Thanks so much for taking a look at this, Scott!
    What you've said kinda makes sense to me...but I'm not sure I get it fully. Isn't doing:

    var n = Ext.create('SearchTool.view.main.component.QueryBuilderRow'); t.up('panel').add(n); //add new row

    creating a new instance (sans filter)? Examining the new obj in firebox, I see the full store, as I'd stated.
    This is what the handlers are doing. TBH, I was a little surprised that I was able to get away w/ doing this/adding a new instance from a button within a row.
    Now that I've stated that it that way & given what you said about preserving a filter this sounds suspect...is there another/better way to add a row and/or clear the filter?

  6. #5
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    filters were cached! so I just had to clear it out:
    (search for last combobox, assigned to var cbox)
    delete cbox.lastQuery;
    cbox.store.clearFilter();

    did the trick!

Thread Participants: 1

Tags for this Thread