最近几天在学习ExtJS这个强大的前端框架,俗话说好记性不如烂笔头,为了怕以后写过的例子给忘了,现在把写完的页面记录下来,以便未来的日子复习以下,O(∩_∩)O哈哈~
废话不多说,今天带来的是ExtJS中的FormPanel组件,EXT的搭建环境略过。。以后在整理:
HTML页面:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>查看详细</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--请自己手动引入extjs的相关文件-->
<script type="text/javascript" src="testFormPane.js"></script>
</head>
<div id="form"></div>
</html>
testFormPanel.js
Ext.onReady(function(){
/*****************************************分割符**************************************************************
*/
//htmlEditor需要这个
Ext.QuickTips.init();
//定义查询数据条件
var data = [['文本1','文本1'],['文本2','文本2']];
var storeCombo = new Ext.data.ArrayStore({
fields:['value','text'],
data:data
});
var form = new Ext.form.FormPanel({
labelAlign : 'right',
labelWidth : 50,
width : 1000,
title : 'form测试',
frame : true,
tbar : [
{
xtype :'label',
style : 'padding:5px 5px 5px 15px;',
text : '文本:',
columnWidth : 0.05
},{
itemId : 'wenben',
xtype : 'combo',
store : storeCombo,
displayField : 'text',
valueField : 'value',
mode : 'local',
allowBlank : false,// 不为空
columnWidth : 0.1,
emptyText : '请输入......'
}, {
text : '查询',
xtype : 'button',
iconCls : 'search',
columnWidth : 0.07,
handler : function() {
// 查询方法
querywb();
}
}],
items : [{
layout : 'column',
items : [{
columnWidth :.7,
xtype : 'fieldset',
checkboxToggle : true,
title : '输入区域',
autoHeight : true,
defaults : {width: 300},
defaultType : 'textfield',
items : [{
fieldLabel : '文本',
name : 'text',
emptyText : '请输入文本'
},{
xtype : 'numberfield',
fieldLabel : '数字',
name : 'num',
emptyText : '请输入数字类型值'
},{
xtype : 'combo',
fieldLabel : '选择框',
name : 'combo',
store : new Ext.data.SimpleStore({
fields : ['value','text'],
data : [
['value1','选项一'],
['value2','选项二'],
['value3','选项三']
]
}),
displayField : 'text',
valueField : 'value',
mode : 'local',
emptyText : '请选择选项'
},{
xtype : 'datefield',
fieldLabel : '日期',
name : 'date',
format : 'Y-m-d',
emptyText : '请选择日期'
},{
xtype : 'timefield',
fieldLabel : '时间',
name : 'time',
emptyText : '请选择时间',
minValue :'10:00 AM',
maxValue : '14:00 PM',
format:'H:i:s',
increment : 30
},{
xtype : 'textarea',
fieldLabel : '多行',
name : 'textarea',
maxLength : 50,
minLength : 10
},{
xtype : 'hidden',
name : 'hidden'
}]
},
{
columnWidth : .3,
layout : 'form',
items : [{
xtype : 'fieldset',
checkboxToggle : true,
title : '多选',
autoHeight : true,
hideLabels : true,
style : 'margin-left:10px;',
bodyStyle : 'margin-left:20px;',
items :[{
name : 'expResult',
anchor : '90%',
xtype : 'checkboxgroup',
items : [{
boxLabel : '1',
name : 'check1',
value : '1',
inputValue :'1',
checked : true,
width : 'auto'
},{
boxLabel : '2',
name : 'check2',
value : '2',
inputValue :'2',
checked : true,
width : 'auto'
},{
boxLabel : '3',
name : 'check3',
inputValue :'3',
value : '3',
checked : true,
width : 'auto'
}]
}]
},{
xtype : 'fieldset',
checkboxToggle : true,
title : '单选',
autoHeight : 'true',
hideLabel : true,
style : 'margin-left:10px;',
bodyStyle : 'margin-left : 20px;',
items : [
{
name :'radio',
xtype:'radiogroup',
items :[
{
boxLabel : '渴望自由',
name : 'rad',
value : '1',
checked : true,
width : 'auto'
},{
boxLabel : '祈求爱情',
name : 'rad',
value : '2',
width : 'auto'
}]
}]
}]
}]
},{
layout : 'form',
labelAlign : 'top',
items : [{
xtype : 'htmleditor',
fieldLabel : '在线编辑器',
name :'editor',
id : 'editor',
anchor : '98%'
}]
}],
buttons : [{
text : '保存',
handler : function(){
save();
}
},{
text : '读取'
},{
text : '取消'
}]
});
form.render("form");//将formpanel面板渲染到页面div中
var save = function(){
var savedata;//用来存放获取的要保存的数据
var saveCheckresult = [];
var inputValues = [];
var checkresult = form.getForm().findField('expResult').getValue();//获取复选框的内容
for (var i = 0; i< checkresult.length;i++){
//saveCheckresult.push(checkresult[i].vlaue);
inputValues.push(checkresult[i].inputValue);
}
var radioresult = form.getForm().findField('radio').getValue();
saveData = "{'id':'"+form.getForm().findField('hidden').getValue()+"',";
saveData += "'wenben':'"+form.getForm().findField('text').getValue()+"',";
saveData += "'num':"+form.getForm().findField('num').getValue()+",";
saveData += "'cdate':'"+form.getForm().findField('date').getRawValue()+"',";
saveData += "'ctime':'"+form.getForm().findField('time').getValue()+"',";
saveData += "'combo':'"+form.getForm().findField('combo').getValue()+"',";
saveData += "'area':'"+form.getForm().findField('textarea').getRawValue()+"',";
saveData += "'checked':'"+inputValues+"',";
saveData += "'radioed':'"+form.getForm().findField('radio').getValue().value+"',";
saveData += "'msg':'"+form.getForm().findField('editor').getValue()+"'";
saveData += "}";
console.log(saveData);
//第一种提交方法,使用baseform的submit方法提交
form.getForm().submit({
url : pkuhrms.ContextRoot + '/pageFlows/test/submitFormPanel.do',//提交后的路径,相当于调用的action',
params: {
saveData: saveData
},
success :function(form,action){
Ext.Msg.alert('信息',"保存成功");
},
failure : function(){
Ext.Msg.alert('错误',"操作失败")
}
});
}
//查询方法
var querywb = function(){
//获取查询条件
var queryParam = form.getTopToolbar().getComponent('wenben').getValue();
if(Ext.isEmpty(queryParam)){
Ext.Msg.alert("请输入要查询的内容!");
return;
}
console.log(form.getTopToolbar().getComponent('wenben').getValue());
Ext.Msg.wait("正在查询...","提示");
Ext.Ajax.request({
url:pkuhrms.ContextRoot + '/pageFlows/test/queryFormPanel.do',
params : {wenben : queryParam},
success : function(response,options){
Ext.MessageBox.hide();
var json = Ext.decode(response.responseText);
console.log(json);
//赋值
volutionOne(json);
//给复选框赋值
var myCheckgroup = form.getForm().findField('expResult');
var checkResult = (json.rows[0].checked).split(',');
if (json.rows.length > 0) {
for(var i = 0; i < checkResult.length; i++){
if(checkResult[i] === '1'){
myCheckgroup.items.items[0].setValue(true);
}
if(checkResult[i] === '2'){
myCheckgroup.items.items[1].setValue(true);
}
if(checkResult[i] === '3'){
myCheckgroup.items.items[2].setValue(true);
}
}
}
//给单选框赋值
var myRadio = form.getForm().findField('radio');
var radioResult = json.rows[0].radioed;
if(radioResult === "1"){
myRadio.items.items[0].setValue(true);
}
if(radioResult === "2"){
myRadio.items.items[1].setValue(true);
}
console.info(checkResult);
console.info(radioResult);
},
failure : function(response, options) {
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "查询失败,请稍后重试!")
}
});
}
var volutionOne = function(json){
//设置查询出来的值
form.getForm().findField('text').setValue(json.rows[0].wenben);
form.getForm().findField('combo').setValue(json.rows[0].combo);
form.getForm().findField('num').setValue(json.rows[0].num);
form.getForm().findField('date').setValue(json.rows[0].cdate);
form.getForm().findField('time').setValue(json.rows[0].ctime);
form.getForm().findField('textarea').setValue(json.rows[0].area);
form.getForm().findField('editor').setValue(json.rows[0].msg);
form.getForm().findField('hidden').setValue(json.rows[0].id);
}
});
运行效果图:
经过这两天的修正,这个formPanel总算能用了。。
下面说下与后台的交互实现思路:
第一:保存方法save()
看源码说话:
var save = function(){
var savedata;//用来存放获取的要保存的数据
var saveCheckresult = [];
var inputValues = [];
var checkresult = form.getForm().findField('expResult').getValue();//获取复选框的内容
for (var i = 0; i< checkresult.length;i++){
saveCheckresult.push(checkresult[i].vlaue);
inputValues.push(checkresult[i].inputValue);
}
var radioresult = form.getForm().findField('radio').getValue();
saveData = "{'id':'"+form.getForm().findField('hidden').getValue()+"',";
saveData += "'wenben':'"+form.getForm().findField('text').getValue()+"',";
saveData += "'num':"+form.getForm().findField('num').getValue()+",";
saveData += "'cdate':'"+form.getForm().findField('date').getRawValue()+"',";
saveData += "'ctime':'"+form.getForm().findField('time').getValue()+"',";
saveData += "'combo':'"+form.getForm().findField('combo').getValue()+"',";
saveData += "'area':'"+form.getForm().findField('textarea').getRawValue()+"',";
saveData += "'checked':'"+inputValues+"',";
saveData += "'radioed':'"+form.getForm().findField('radio').getValue().value+"',";
saveData += "'msg':'"+form.getForm().findField('editor').getValue()+"'";
saveData += "}";
console.log(saveData);
//第一种提交方法,使用baseform的submit方法提交
form.getForm().submit({
url : pkuhrms.ContextRoot + '/pageFlows/test/submitFormPanel.do',//提交后的路径,相当于调用的action',
params: {
saveData: saveData
},
success :function(form,action){
Ext.Msg.alert('信息',"保存成功");
},
failure : function(){
Ext.Msg.alert('错误',"操作失败")
}
});
}
大概思路如下:获取到表单的内容,自己拼接成一个json数组,然后使用form表单自带的submit方法,调用后台action,后台方法接收整个数组,用方法转换到model中,然后判断一下id是否为空,根据情况去调用insert语句还是update语句。。。
这里麻烦一点的就是获取复选框的值时候,我在前台用的checkboxgroup组件,把选中的值用‘,’拼接成一个字符串,然后传到后台,在数据库里用一个字段去存放它。具体实现代码看上面.
获取值得方法:
form.getForm().findField('date').getRawValue();//
form.getForm().findField('text').getValue()
//拼接复选框的内容
var inputValues = [];var checkresult = form.getForm().findField('expResult').getValue();
//获取复选框的内容
for (var i = 0; i< checkresult.length;i++){
inputValues.push(checkresult[i].inputValue);
}
console.info(inputValues);
第二:查询方法querywb()
//查询方法
var querywb = function(){
//获取查询条件
var queryParam = form.getTopToolbar().getComponent('wenben').getValue();
if(Ext.isEmpty(queryParam)){
Ext.Msg.alert("请输入要查询的内容!");
return;
}
console.log(form.getTopToolbar().getComponent('wenben').getValue());
Ext.Msg.wait("正在查询...","提示");
Ext.Ajax.request({
url:pkuhrms.ContextRoot + '/pageFlows/test/queryFormPanel.do',
params : {wenben : queryParam},
success : function(response,options){
Ext.MessageBox.hide();
var json = Ext.decode(response.responseText);
console.log(json);
//赋值
volutionOne(json);
//给复选框赋值
var myCheckgroup = form.getForm().findField('expResult');
var checkResult = (json.rows[0].checked).split(',');
if (json.rows.length > 0) {
for(var i = 0; i < checkResult.length; i++){
if(checkResult[i] === '1'){
myCheckgroup.items.items[0].setValue(true);
}
if(checkResult[i] === '2'){
myCheckgroup.items.items[1].setValue(true);
}
if(checkResult[i] === '3'){
myCheckgroup.items.items[2].setValue(true);
}
}
}
//给单选框赋值
var myRadio = form.getForm().findField('radio');
var radioResult = json.rows[0].radioed;
if(radioResult === "1"){
myRadio.items.items[0].setValue(true);
}
if(radioResult === "2"){
myRadio.items.items[1].setValue(true);
}
console.info(checkResult);
console.info(radioResult);
},
failure : function(response, options) {
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "查询失败,请稍后重试!")
}
});
}
var volutionOne = function(json){
//设置查询出来的值
form.getForm().findField('text').setValue(json.rows[0].wenben);
form.getForm().findField('combo').setValue(json.rows[0].combo);
form.getForm().findField('num').setValue(json.rows[0].num);
form.getForm().findField('date').setValue(json.rows[0].cdate);
form.getForm().findField('time').setValue(json.rows[0].ctime);
form.getForm().findField('textarea').setValue(json.rows[0].area);
form.getForm().findField('editor').setValue(json.rows[0].msg);
form.getForm().findField('hidden').setValue(json.rows[0].id);
}
思路就不说了,太简单了,说说赋值需要注意的地方:
因为复选框的值在后台是用的一个字段存放的,所以,从后台读取数据后要在前台进行解析分割,然后判断他的值决定复选框的勾选情况:
//给复选框赋值
var myCheckgroup = form.getForm().findField('expResult');
var checkResult = (json.rows[0].checked).split(',');
if (json.rows.length > 0) {
for(var i = 0; i < checkResult.length; i++){
if(checkResult[i] === '1'){
myCheckgroup.items.items[0].setValue(true);
}
if(checkResult[i] === '2'){
myCheckgroup.items.items[1].setValue(true);
}
if(checkResult[i] === '3'){
myCheckgroup.items.items[2].setValue(true);
}
}
}
同理,单选按钮也是这种情况,不在赘述。
用到的赋值方法:
form.getForm().findField('editor').setValue(json.rows[0].msg);
myCheckgroup.items.items[1].setValue(true);
好吧,今天整理到这里。还有一个自动加载查询下拉列表框的方法没实现。。。等我做完再说。