PDA

View Full Version : Adding row of fields to form - list issue in new row combobox



rtirbany
18 Feb 2013, 7:14 AM
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?



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

rtirbany
18 Feb 2013, 5:33 PM
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.

scottmartin
19 Feb 2013, 11:20 AM
Sounds like you are filtering your store on the instance and then loading it again.. the filter will remain.

Scott.

rtirbany
19 Feb 2013, 2:30 PM
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?

rtirbany
19 Feb 2013, 5:45 PM
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!