您的位置：首页 > Web前端 > JavaScript

Extjs combox和checkboxgroup组合案例以及参数提交

2011-06-27 17:42 295 查看 
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="http://zhangwei12hao.blog.163.com/blog/<%=basePath%>">

<title>My JSP 'pzxf_operations.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"    href="http://zhangwei12hao.blog.163.com/blog/../javascript/library/extjs/resources/css/ext-all.css" mce_href="http://zhangwei12hao.blog.163.com/blog/../javascript/library/extjs/resources/css/ext-all.css">
<mce:script type="text/javascript" src="http://zhangwei12hao.blog.163.com/blog/../javascript/library/extjs/adapter/ext/ext-base.js" mce_src="http://zhangwei12hao.blog.163.com/blog/../javascript/library/extjs/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="http://zhangwei12hao.blog.163.com/blog/../javascript/library/extjs/ext-all.js" mce_src="http://zhangwei12hao.blog.163.com/blog/../javascript/library/extjs/ext-all.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var myCheckboxItems = [];
var myCheckboxGroup;

var stationstore = new Ext.data.Store({//用于下拉框
proxy: new Ext.data.HttpProxy({
url: "/Elements",
method: "POST"
}),
reader: new Ext.data.JsonReader({
root: ""
}, [
{name: "id",

},
{name: "name"}
])
});
stationstore.on("beforeload", function(sto, opt) {
sto.baseParams.query = 'Station';
sto.baseParams.parentid = 'admin_station';
});

var store= new Ext.data.Store({//用于填充checkboxgroup
proxy: new Ext.data.HttpProxy({url:'/All'}),
reader: new Ext.data.JsonReader({
root:''
},[{
name:'id'
},{
name:'name'
}])
});
store.load(
{
params:{query:'OperationType'}
}
);//load

store.on('load',function(){
for(var i=0;i<store.getCount();i++){
var boxLabel = store.getAt(i).get("name");
var name = store.getAt(i).get("id");
myCheckboxItems.push({
boxLabel : boxLabel,
name : name
})

}
var columNum=3; //设置checkbox的列数,默认是3
if(columNum<3)   //如果checkbox个数小于3时，列的长度设成checkbox个数
columNum=comData.length;
myCheckboxGroup = new Ext.form.CheckboxGroup({
name:'operationShow',
xtype : 'checkboxgroup',
columns:columNum,
items : myCheckboxItems
});

var stationForm=new Ext.form.FormPanel({
labelAlign:'right',
labelWidth:60,
title:'配置下发',
frame:true,
width:650,
method:"post",
url:'/Update',
items:[{
layout:'column',
items:[{
columnWidth:.95,
layout:'form',
items:[{
id:'station',
xtype:'combo',
width:150,
fieldLabel:'网点名称',
emptyText:'请选择网点',
name:'station_id',
mode: 'remote',
typeAhead: true,
store: stationstore,//store*/
triggerAction: 'all',
forceSelection: true,
displayField: 'name',
hiddenName:'id',
valueField: 'id',
labelSeparator: ':'
},{
xtype:'fieldset',
title:'业务内容',
name:'operations',
fieldLabel:'可选业务',
width:599,
items:[myCheckboxGroup]
},{
xtype:'textfield',
fieldLabel:'测试2',
width:150
},{
xtype:'hidden',
name:'query',
value:'Station'
}]

}]
}],
buttons:[{
text:'提交',
handler:sub_button
}]

});//stationForm
stationForm.render('body');
function sub_button(){
var opes3="";
var opes2='[';
var opera=stationForm.getForm().findField("operationShow").getValue();
for(var i=0;i<opera.length;i++){
opes2=opes2+opera[i].name+',';
}
opes3 =  opes2.substring(0, opes2.length-1)+']';
stationForm.getForm().submit({         //当提交时执行
method:"post",
url:'/Update',
params:{
operations:opes3
},
success:function(){
Ext.Msg.alert("提示",'您成功的提交信息');
},

failure:function(){
Ext.Msg.alert("信息","对不起,您提交信息失败");
}
});
};// sub_button
});//on

});

// --></mce:script>

</head>

<body>
<div id="body"></div>
<!--  <div id="hello"></div> -->
</body>
</html>


本文链接地址为：http://zhangwei12hao.blog.163.com/blog/static/240030432011464157285/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航