PDA

View Full Version : reload extjs combo issue while onchange the select box



ramsu
21 Sep 2010, 11:59 AM
Hi,

While onchanging select box the below method getAssetList gets invoked and returns the result.
But extjs combo box is not getting replaced with a new datas.

http://www.sencha.com/home/senthil/Desktop/issue.gif
var assetStore = null;
function getAssetList(propertyName){

var urlaccess = "runtime/assetAction.action?method=getAssets&property="+propertyName.value;
assetStore = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: urlaccess
}),
reader: new Ext.data.JsonReader({ root: 'assetNameList'}, [{ name: 'value' }, { name: 'label'}])
});

assetStore.load();
renderCombo();
}
function renderCombo(){
var assetField = new Ext.form.ComboBox({
id:'assetField',
store: assetStore,
name :'asset',
valueField:'value',
displayField:'label',
bodyStyle:'padding-top: 5px 5px 0px',
hiddenName: 'assetName',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a asset...',
selectOnFocus:true,
applyTo: 'assetId'
});

<s:select id="property" name="property" list="#{'Web':'Web','FAST Hosting':'FAST Hosting'}" displayName ="Property"
cssStyle="width:187px;" onchange="getAssetList(this);"/>


<input type="text" id="assetId" name="assetId" size="30"/>





Thanks in advance.

httpdotcom
21 Sep 2010, 1:50 PM
It would be easier if you showed more of the code (like whether you are applying a comboBox to id:property, rather than mixing HTML and ExtJS form elements), and to wrap the code in CODE tags for easier reading.

if you were using an ExtJS combo for id:property,


var assetField = new Ext.form.ComboBox( {
...
,hidden: true
} ) ;

var property = new Ext.form.ComboBox( {
...
,listeners: [
select: function( f,r,i) {
assetField.getStore().load( { params: { property: r.get("key") } } ) ;
assetField.show() ;
}
]
} ) ;

ramsu
22 Sep 2010, 6:07 AM
Hi...,

Am using the select box as struts property. while onchanging the select box it gets the values from database and returns the result in json format as

{"assetNameList":[{"value":"1226244","label":"1226244"},{"value":"1226250","label":"1226250"},{"value":"FSJC-LBM-R4S1","label":"FSJC-LBM-R4S1"},{"value":"Ordered-287218-5435320","label":"Ordered-287218-5435320"}]}

But my problem is extjs combo box is not getting loaded with new datas as shown above in json format.



<html>
<head>
<title>Asset</title>
<script type="text/javascript">

setTimeout(function(){renderCombo();}, 200);

var assetStore = null;

function getAssetList(propertyName){

var urlaccess = "runtime/utsAssetSuppressionAction.action?method=getAssets&property="+propertyName.value;
if(assetStore !=null){
assetStore.load();
}

assetStore = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: urlaccess
}),
reader: new Ext.data.JsonReader({ root: 'assetNameList'}, [{ name: 'value' }, { name: 'label'}])
});

assetStore.load();

}

function renderCombo(){
var assetField = new Ext.form.ComboBox({
id:'assetField',
store: assetStore,
name :'asset',
valueField:'value',
displayField:'label',
bodyStyle:'padding-top: 5px 5px 5px',
hiddenName: 'assetName',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a asset...',
selectOnFocus:true,
applyTo: 'assetId'
});
}

</script>
</head>
<body>
<form name="asset_form" id="asset_form"
action="runtime/assetAction.action?method=processAsset"
method="POST" enctype="multipart/form-data">
<table border="0" width="100%">
<tr>
<td align="left">
<table>
<tr>
<td align="left" width="235" height="10"><label
style="color: #131399;font-size: 12px;font-weight: bold;">&nbsp;&nbsp;&nbsp;Property :</label></td>
<td>
<table>
<tr>
<td ><s:select id="property" name="property" list="#{'Web':'Web','FAST Hosting':'FAST Hosting'}" displayName ="Property"
cssStyle="width:187px;" onchange="getAssetList(this);"/>

</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr></tr>
<tr>
<td colspan="2" height="10"></td>
</tr>
<tr>
<td align="left">
<table>
<tr>
<td align="left" width="235" height="10"><label
style="color: #131399;font-size: 12px;font-weight: bold;">&nbsp;&nbsp;&nbsp;Asset Name :</label></td>
<td>
<table>
<tr>
<td > <input type="text" id="assetId" name="assetId" size="30"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" height="10"></td>
</tr>
<tr>
<td align="left">
<table>
<tr>
<td align="left" width="235" height="10"><label
style="color: #131399;font-size: 12px;font-weight: bold;">&nbsp;&nbsp;&nbsp;Suppression Start Time :</label></td>
<td>
<table>
<tr>

<td><s:textfield name="suppressionStartTime" size="30" style="width:185px" diplayName="Suppression Start Time" id="suppressionStartTime" cssClass="doubleCol date-time-pick required" />

</td>



</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" height="8"></td>
</tr>
<tr>
<td align="left">
<table>
<tr>
<td align="left" width="235" height="10"><label
style="color: #131399;font-size: 12px;font-weight: bold;">&nbsp;&nbsp;&nbsp;Suppression Duration(hrs) :</label></td>
<td>
<table>
<tr>
<td ><s:textfield name="suppressionDuration" displayName="Suppression Duration(hrs)"style="width:185px" size="25" id="suppressionDuration" cssClass="doubleCol required number" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" height="8"></td>
</tr>
<tr>
<td align="left">
<table>
<tr>
<td align="left" width="235" height="10"><label
style="color: #131399;font-size: 12px;font-weight: bold;">&nbsp;&nbsp;&nbsp;Suppression Reason :</label></td>
<td>
<table>
<tr>
<td ><s:textarea name="suppressionReason" cols="50" displayName="Suppression Reason"
rows="7" id="suppressionReason" cssClass="required" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table><br><center>
<input align="right" id="suppressAsset" type="submit" value="Suppress Asset" /></center>
</form>
</body>
</html>

Could any one help with my code....

Thanks in Advance...