<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ext JS in Action Chapter 06 | Listing 6.4 Implementing a remote combobox</title>
<link rel="stylesheet" type="text/css" href="./ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext3/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var remoteJsonStore = new Ext.data.JsonStore({
root : 'records',
totalProperty : 'totalCount',
baseParams : {
column : 'fullName'
},
fields : [
{
name : 'name',
mapping : 'fullName'
},
{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.ScriptTagProxy({
url : 'http://extjsinaction.com/dataQuery.php'
})
});
var combo = {
xtype : 'combo',
fieldLabel : 'Search by name',
forceSelection : true,
displayField : 'name',
valueField : 'id',
hiddenName : 'customerId',
loadingText : 'Querying....',
pageSize : 5,
minChars : 1,
triggerAction : 'all',
store : remoteJsonStore
};
var onSuccessOrFail = function(form, action) {
var formPanel = Ext.getCmp('myFormPanel');
formPanel.el.unmask();
var result = action.result;
if (result.success) {
Ext.MessageBox.alert('Success',action.result.msg);
}
else {
Ext.MessageBox.alert('Failure',action.result.msg);
}
};
var submitHandler = function() {
var formPanel = Ext.getCmp('myFormPanel');
formPanel.el.mask('Please wait', 'x-mask-loading');
formPanel.getForm().submit({
url : 'newbackgroundprograma.action',
success : onSuccessOrFail,
failure : onSuccessOrFail
});
};
var buttons = [
{
text : 'Submit',
handler : submitHandler
},
{
text : 'load'
}
];
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
labelWidth : 100,
bodyStyle : 'padding: 5px',
width : 600,
id : 'myFormPanel',
title : 'Our complex form',
height : 350,
frame : true,
layout : 'form',
layoutConfig : {
align : 'stretch'
},
items : [
combo
],
buttons : buttons
});
});
</script>
</body>
</html>
后台action可以用request.getparameter("customerId");取得id的值,这就是hiddenName的作用
{success: true, msg : 'Form submitted successfully'}
{success: false, msg : 'This is an example error message', errors : {firstName : 'Cannot contain "!" characters.',lastName : 'Must not be blank.'}}
