3.3.3Ext.form.ComboBox -动态绑定数据库
前台代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="Extjs/3.3.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="Extjs/3.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Extjs/3.3.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget="qtip";
//设置信息来源
var frmWarehouse_store = new Ext.data.Store({
id:"FrmWarehouseId"
// ,root:"combo_store"
,reader:new Ext.data.JsonReader({
totalProperty:"total"
,root:"records"
},[{name:"frmWarehouse"
//,mapping:"frmWarehouse" //创建映射值 对应后台返回frmWarehouse
,type:"string"
},{name:"id"
//,mapping:"id"
,type:"int"
}]
)
,url:"BarCode/getFrmWarehouse.action"
,remoteSort :false //设置不能排序
})
//provice_store.load();
var loginform = new Ext.form.FormPanel({
renderTo:'container',
title:'用戶登陆',
labelSeparator:":",
collapsible :true,
width:280,
height:225,
id:'login',
labelWidth: 40,
bodyStyle: 'padding:5px 5px 0 0',
border: false,
name:'login',
frame:true,
buttonAlign: 'center',
defaults:{width:178,xtype:'textfield'},
items:[
new Ext.form.TextField({
frame:true,
fieldLabel:"用户名",
name:'userName',
allowBlank:false,
blankText:'用户名不能为空'
}),{
fieldLabel:"密码",
name:'password',
allowBlank:false,
inputType:'password',
blankText:'密码不能为空'
},{
xtype:'fieldset',
title:'設定維度',
width:230,
autoHeight:true,
hideLables:true,
items:[{
xtype:'combo',
name:'fromWarehouse',
fieldLabel:'由仓库',
store:frmWarehouse_store,//绑定数据源
mode : 'remote',//设置下拉列表读取数据的模式,local表示本地读取，remote表示远程读取
displayField :'frmWarehouse',//被显示在下拉列表框中的值所对应的字段名，
valueField : 'id',//设置数据值对应的字段
forceSelection : true,//是否严格匹配列表中的值，true表示只能输入列表中的值
editable:false,//是否可以编辑
forceSelection : true,//当获取焦点的时候立即选择一个已存在的列表项,与editable:true一起使用,否则无意义
triggerAction : 'all',//单击触发按钮的时候显示全部查询的数据,默认为query,设置all会执行allQuery查询
queryParam :'search_provice',//查询参数,涉及到和后台交互
emptyText:"請選擇由倉庫"
}]
}],
keys:{
key: 13,
fn:login
},
buttons:[{
text:'提 交',
handler:login
},{
text:'重 置',
handler:function reset(){
loginform.form.reset();
},{
text:"列表框的值",
handler:function(){
// Ext.Msg.alert("值","實際值："+ frmLocation.getValue()+";顯示值:"+frmWarehouse.getRawValue());
Ext.Msg.alert("好想哭啊","今晚的晚餐只是一個小小的月餅！");
}
}]
});
function login(){
var form=Ext.getCmp("login").getForm();
form.submit({
//clientValidation: true,
url:"/Env_1/BarCode/selectUser.action",
params:{
},
success: function(form, action) {
// Ext.Msg.alert('Success', "恭喜，登陆成功！");
location.href = 'index.jsp';
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', '用户名或密码不能为空');
resetInfo();
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax 連接失敗！');
resetInfo();
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', "您的输入有误，请核实后重新输入");
resetInfo();
}
}
});
}
function resetInfo(){
loginform.form.reset();
}
})
</script>
</head>
<body>
<div id="outer" align="center">
<br><br><br><br><br><br><br><br>
<div id="container"></div>
</div>
</body>
</html>
后台代码：
package com.barcode.Web;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.barcode.Model.FrmWarehouse;
import com.barcode.Service.FrmWarehouseService;
@Controller
public class FrmWarehouseController {
private FrmWarehouseService frmWarehouseService;
@Autowired
public void setFrmWarehouseService(FrmWarehouseService frmWarehouseService) {
this.frmWarehouseService = frmWarehouseService;
}
@RequestMapping(value="BarCode/getFrmWarehouse.action")
public @ResponseBody Map<String,Object> getFrmWarehouse(){
Map<String,Object> map=new HashMap<String,Object>();
List<FrmWarehouse>list=this.frmWarehouseService.getFrmWarehouse();
System.out.println(list);
map.put("total", list.size());
map.put("records",list);
map.put("success", true);
map.put("message", "Successful");
System.out.println(map);
return map;
}
}