Menu
I have a combo box which displays item quantity. Based on item quantity selection i am displaying price value of the item. By default i am setting price value to first item value. However when i load the page, i want my combo box to display first item qty i.e 100.
Problem: it should load Qty : 100 rather loading blank
So i have a store defined as
Store = new Ext.data.JsonStore({
storeId: 'Store',
root: 'storevalue',
autoLoad: false,
baseParams: { itemid: '${itemID!""}',
adjustPrice: '${adjustPrice}',
overrideShowPrice: '${overrideShowPrice}' },
url: 'ListQtyPrice.epm',
fields: [ 'qty', 'rawprice', 'displayPrice' ]
});
Combo box to display Qty
<#if Select>
new DBEComboBox({
name: 'orderqty',
displayField: 'qty',
valueField: 'qty',
id: 'order-qty',
store: Store,
forceSelection: true,
mode: 'remote',
triggerAction: 'all',
allowBlank: true,
listWidth: 202,
triggerClass: 'orderqty-trigger',
width: 200
,defaultValue: 100
,listeners: {
// for price adjustments
}
});
</#if>
Store.load({
callback: function() {
alert("reached");
Ext.getCmp('order-qty').setValue(Store.getAt(0).get('qty'));
var oqc = Ext.getCmp('order-qty');
var value = Ext.getCmp('order-qty').getValue();
alert(" hey :" +value);
}
});
Able to see hey: 100 in alert statements
363
I've run into this problem a couple times. The only way I've actually gotten this resolved was to call setValue on the combobox after the store has loaded, you could just add a listener on the store, but that always seemed somewhat messy to me. I usually have a stand-alone event listener like this:
Store.on('load',function(store) {
Ext.getCmp('order-qty').setValue(store.getAt('0').get('qty'));
});
EDIT: 18 Jan 2012
OK as mentioned here is a complete working example of ComboBox with a default value being set. This is done using ExtJS 4.02, should work fine with 4.07 though, not sure about 4.1.
Make sure you put your correct extjs path in the links (see brackets at the top of html), otherwise just put both combo-example and data.json at the same directory level and they should run fine:
data.json:
[
{"value":1,"name":"Option 1"},
{"value":2,"name":"Option 2"},
{"value":3,"name":"Option 3"}
]
combo-example.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Combo Box Example</title>
<link rel="stylesheet" type="text/css" href="[your extjs path]/resources/css/ext-all.css">
<script type="text/javascript" src="[your extjs path]/ext-all.js"></script>
<script type="text/javascript" >
Ext.onReady(function() {
// the datastore
var myStore = new Ext.data.Store({
fields: ['value', 'name'],
proxy: {
type: 'ajax',
url : 'data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
// a window to hold the combobox inside of a form
myWindow = Ext.create('Ext.Window', {
title: 'A Simple Window',
width: 300,
constrain: true,
modal: true,
layout: 'fit',
items: [{
// the form to hold the combobox
xtype: 'form',
border: false,
fieldDefaults: {
labelWidth: 75
},
bodyPadding: '15 10 10 10',
items: [{
// the combobox
xtype: 'combo',
id: 'myCombo',
fieldLabel: 'A Label',
valueField: 'value',
displayField: 'name',
store: myStore,
//queryMode: 'local',
typeAhead: true,
forceSelection: true,
allowBlank: false,
anchor: '100%'
},{
// shows the selected value when pressed
xtype: 'button',
margin: '10 0 0 100',
text: 'OK',
handler: function() {
alert('Name: ' + Ext.getCmp('myCombo').getRawValue() +
'\nValue: ' + Ext.getCmp('myCombo').value);
}
}]
}]
});
// show the window
myWindow.show();
// function to give the combobox a default value
myStore.on('load',function(store) {
Ext.getCmp('myCombo').setValue(store.getAt('0').get('value'));
});
});
</script>
</head>
<body>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
