PDA

View Full Version : Reload of Combobox



javarooster
9 Feb 2012, 7:35 AM
Hi guys,

I have three Comboboxes in my form. i want to reload the second combobox when change occurs in first box. I am trying

Box.store.reload = StoreFn.fn(combo.getValue());
in Listeners(select). but it dosent load anything.

Please help me.

Thanks

javarooster
9 Feb 2012, 9:25 AM
i am getting this error when trying to use reload

Box.store.reload is not a function

friend
10 Feb 2012, 6:02 AM
Here's a functional sample, noting that I did everything inline for simplicity/clarity. I assume that you're doing Ajax loads of your combos, so just swap out the store.loadData() with store.load();



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Combo Load Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="resources/css/solutions.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

Ext.create('Ext.window.Window', {
bodyPadding: 5,
height: 300,
title: 'Combo Load Test',
width: 300,
items: [{
xtype: 'combobox',
fieldLabel: 'Person Combo',
displayField: 'personName',
listeners: {
change: function(field, newValue, oldValue, eOpts) {
var name = field.getRawValue();

field.up('window').down('#combo2').getStore().loadData([
{detail: name + ' Height', detailId: 1},
{detail: name + ' Weight', detailId: 2},
{detail: name + ' Age', detailId: 3},
{detail: name + ' Eye Color', detailId: 4},
]);
}
},
queryMode: 'local',
store: {
fields: [
{name: 'personName', type: 'string'},
{name: 'personId', type: 'int'}
],
data : [
{personName: 'Peter Venkman', personId: 1},
{personName: 'Bluto Blutarsky', personId: 2}
]
},
valueField: 'personId',
value: 1
},{
xtype: 'combobox',
fieldLabel: 'Details',
displayField: 'detail',
itemId: 'combo2',
queryMode: 'local',
store: {
fields: [
{name: 'detail', type: 'string'},
{name: 'detailId', type: 'int'}
],
data : []
},
valueField: 'detailId'
}]
}).show();

});

</script>

</head>

<body>
</body>
</html>

javarooster
13 Feb 2012, 7:59 AM
My code looks like this it dosent reload when i make change in firstBox secondBox stays the same, but it works for first select. i tries reload instead of load and it says reload is not a function for Extjs 4


items: [{
xtype: 'combobox',
id: 'firstbox',
name: 'first',
hidden: true,
store: firstStore,
size: 20,
displayField: 'name',
valueField: 'name',
emptyText: 'first',
forceSelection: true,
typeAhead: false,
editable: false,
allowBlank: false,
listeners:{select:{fn:function(combo, value) {
var secondBox = Ext.getCmp('secondbox');
secondBox.setValue('');
secondBox.setDisabled(false);
secondBox.store = secondStoreFn.fn(combo.getValue());
}}
}
},{
xtype: 'combobox',
id: 'secondbox',
name: 'second',
hidden: true,
store: secondStoreFn.fn(''),
size: 20,
displayField: 'name',
valueField: 'name',
emptyText: 'please select first',
forceSelection: true,
typeAhead: false,
editable: false,
allowBlank: false,
listeners:{select:{fn:function(combo, value) {
var thirdBox = Ext.getCmp('thirdbox');
thirdBox.setValue('');
thirdBox.setDisabled(false);
thirdBox.store = thirdStoreFn.fn(combo.getValue());
}}
}
},{
xtype: 'combobox',
id: 'thirdbox',
name: 'third',
hidden: true,
store: thirdStoreFn.fn(''),
size: 20,
displayField: 'name',
valueField: 'name',
emptyText: 'please select second',
forceSelection: true,
typeAhead: false,
editable: false,
allowBlank: false
}]

skirtle
13 Feb 2012, 9:02 AM
You can't assign the store like that. Changing the store for a combobox is possible but much trickier than that. You'd be much better to keep the store fixed and simply load new data into it.

Set the comboboxes to queryMode: 'local' so that they don't load the stores themselves. You can then call the load method of the store passing it whatever parameters you need.


store.load({
params: {
...
}
});

javarooster
14 Feb 2012, 10:31 AM
Thanks again. I am able to reload after using store.load and setting queryMode as local.

One more weird issue i faced is loading icon dosent disappear after second load of combobox. I found solution for that here

http://as400samplecode.blogspot.com/2012/01/extjs-combobox-loadmask-second-time.html