-------------------------------------------------------------------------------------------------------------------------------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-all.js"></script>
<script type="text/javascript" src="../Adapter.js"></script>
<script type="text/javascript">
//問題:1.如何到后臺(tái)讀取comboBox的選項(xiàng)值
// 2.如何將時(shí)間設(shè)置為出去中午外的時(shí)間
Ext.onReady(function(){
//======================修改錯(cuò)誤提示方式=======================
Ext.QuickTips.init();
//====================基本的表單元素開始)=======================
//=====================文本輸入控件=========================
var textField=new Ext.form.TextField({
fieldLabel:'文本',//父類panel的屬性
xtype:'textfield',//父類panel的屬性
name:'textField',
id:'textField',
width:506,//父類panel的屬性
height:30,//父類panel的屬性
maxLength:20,//textfield自己的屬性
minLength:2,//textfield自己的屬性
emptyText:'可輸入任意文本',////textfield自己的屬性
allowBlank:false,//textfield自己的屬性
msgTarget:'qtip'//textfield自己的屬性
});
//=====================數(shù)字輸入框=====================
var numberField=new Ext.form.NumberField({
fieldLabel:'數(shù)字',
xtype:'numberfield',
name:'numberField',
id:'numberField',
allowNegative:false,//是否允許輸入負(fù)數(shù)
allowDecimals:false,//是否E允許輸入小數(shù)
allowBlank:false,
emptyText:'只能輸入數(shù)字,不能輸入小數(shù)和負(fù)數(shù)',
width:506,
height:30,
maxValue:99,//最大值
minValue:1,//最小值
msgTarget:'title'
});
//=========================日期控件==========================
var dateField=new Ext.form.DateField({
xtype:'datefield',
fieldLabel:'日期',
name:'dateField',
id:'dateField',
format:'y-/-m-/-d',//DateField自己的屬性,日期顯示的格式
disabledDays:[0,6],//DateField特有的屬性,無效日期
emptyText:'請輸入出周末外的日期',
allowBlank:false,
width:506,
//height:30,//沒有height屬性
msgTarger:'under'
});
//=====================時(shí)間控件========================
var timerField=new Ext.form.TimeField({
xtype:'timefield',
fieldLabel:'時(shí)間',
name:'timerField',
id:'timerField',
allowBlank:false,
emptyText:'請選擇非中午時(shí)間',
minValue:'8:00',
maxValue:'20:00',
increment:40,
msgTarger:'side',
width:506,
//height:30,//沒有height屬性
handleHeight:100,//同resizable一起使用,控制下拉面板的大小
resizable :true
});
//=========================輸入電子郵件==========================
var emailField=new Ext.form.TextField({
fieldLabel:'電子郵件',
vtype:'email',
name:'emailField',
id:'emailField',
width:506,
height:30,
emptyText:'必須輸入正確的電子郵件格式',
allowBlank:false,
msgTarget:'side'
});
//========================只能輸入字母和數(shù)字========================
var alphaNumField=new Ext.form.TextField({
fieldLabel:'用戶名',
vtype:'alphanum',//重點(diǎn)是設(shè)置vtype為alphanum,只能輸入字母數(shù)字
name:'alphaNumField',
id:'alphaNumField',
width:506,
height:30,
emptyText:'//只能輸入字母和數(shù)字',
allowBlank:false,
msgTarget:'side'
});
//=================只能輸入網(wǎng)址===========================
var urlField=new Ext.form.TextField({
fieldLabel:'網(wǎng)址',
vtype:'url',//重點(diǎn)是設(shè)置vtype為url,只能輸入網(wǎng)址
name:'urlField',
id:'urlField',
width:506,
height:30,
emptyText:'只能輸入網(wǎng)址',
allowBlank:false,
msgTarget:'side'
});
//======================自定義校驗(yàn)規(guī)則===================
var autoField=new Ext.form.TextField({
fieldLabel:'自定義校驗(yàn)',
name:'autoField',
id:'autoField',
width:506,
height:30,
emptyText:'只能輸入漢字',
allowBlank:false,
msgTarget:'side',
regex:/^[\u4E00-\u9FA5]+$/,
regexText:'只能輸入漢字'
});
//===================復(fù)選框(從本地讀取數(shù)據(jù))===================
var comboLocalData=[//定義comboBox要顯示的數(shù)據(jù)
['0','一月'],
['1','二月'],
['2','三月'],
['3','四月'],
['4','五月'],
['5','六月'],
['6','七月'],
['7','八月'],
['8','九月'],
['9','十月'],
['10','十一月'],
['11','十二月'],
];
var comboLocalStore=new Ext.data.SimpleStore({
//讀取數(shù)據(jù)的方式
fields:['value','text'],
//讀取哪里的數(shù)據(jù)
data:comboLocalData//如何動(dòng)態(tài)讀取數(shù)據(jù)?
});
var comboLocalField=new Ext.form.ComboBox({
//applyTo:'combo'//通常作為一個(gè)容器的子類對象,所以適用applyTo,而不用renderTo,注意:combo只能在input上渲染,不能在div上
fieldLabel:'靜態(tài)數(shù)據(jù)下拉框',
store:comboLocalStore,
name:'comboLocalField',
id:'comboLocalField',
emptyText:'復(fù)選框(從本地讀取數(shù)據(jù))',
allowBlank:false,
valueField:'value',//選中某一項(xiàng)后傳遞到后臺(tái)的值
displayField:'text',//下來時(shí)顯示的值
mode:'local',//告訴comboBox,store需要的數(shù)據(jù)已經(jīng)讀取到本地,不需要到后臺(tái)去讀取
//value:'中餐',//默認(rèn)選中的值
triggerAction:'all',//query是默認(rèn)的,
width:506,
height:30,
hiddenName:'comboLocalName',//這個(gè)屬性很重要,通過它,我們可以向后臺(tái)傳遞fields中的value值,如果不設(shè)置hiddenName,則只能接收到fields中的text值.注意:hiddenName不能與id重0復(fù).
//readOnly:true,
editable:false
});
comboLocalField.on('select',function(comboBox){
Ext.Msg.alert('提示','value:'+comboBox.getValue()+"------------"+'text:'+comboBox.getRawValue());
});
//=================復(fù)選框(遠(yuǎn)程讀取數(shù)據(jù))================
//定義動(dòng)態(tài)讀取數(shù)據(jù)的store,同grid
var comboRemoteStore=new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'comboBoxData.txt'}),
reader:new Ext.data.ArrayReader({},[
{name:'value'},
{name:'text'},
{name:'status'}
])
});
//store.load();//手動(dòng)加載數(shù)據(jù),可以決定何時(shí)對combo初始化
var comboRemoteField=new Ext.form.ComboBox({
fieldLabel:'動(dòng)態(tài)數(shù)據(jù)下拉框',
store:comboRemoteStore,
id:'comboRemoteField',
name:'comboRemoteField',
emptyText:'復(fù)選框(遠(yuǎn)程讀取數(shù)據(jù))',
allowBlank:false,
mote:'remote',//重點(diǎn)是mote,設(shè)置為遠(yuǎn)程讀取數(shù)據(jù),第一次點(diǎn)擊'選擇'按鈕時(shí)加載數(shù)據(jù).在這里不定義mote:remote也可以,手動(dòng)調(diào)用store.load()加載數(shù)據(jù)
valueField:'value',
displayField:'text',
triggerAction:'all',
width:506,
height:30,
hiddenName:'comboRemote',
//下面這兩個(gè)屬性用來設(shè)置分頁
minListWidth:50,//下拉列表的寬度,如果不設(shè)置她,可能看不到完整的下拉分頁條
pageSize:3,//決定每次顯示多少條記錄,ext內(nèi)部自動(dòng)計(jì)算并設(shè)置分頁.注意:mode必須為'remote',如果為local分頁條將無法顯示
resizeable:true
});
//動(dòng)態(tài)comboBox問題:數(shù)據(jù)很多的時(shí)候,在頁面并不能加載成功,但數(shù)據(jù)確實(shí)是讀取到了
//解決方案1：只要把combo的readOnly:true改成editable:false就可以了，屬于版本問題。
//解決方案2：在火狐中查看控制臺(tái)/響應(yīng) 里的totalCount是多少,看看是不是為0
comboRemoteField.on('select',function(comboBox){
alert(comboBox.getValue()+'===='+comboBox.getRawValue());
///獲取存儲(chǔ)在ComboBox的Store中的狀態(tài)值
alert(comboBox.getStore().getAt(comboBox.selectedIndex).data.status);
});
//================下拉輸入框TriggerField==============
//=============注意:在triggerGrid中,如果使用SimpleStore則store是自動(dòng)加載,如果使用store,則必須要手動(dòng)進(jìn)行加載,否則數(shù)據(jù)將現(xiàn)實(shí)不出來
var griggerColumn=new Ext.grid.ColumnModel([
{header:'姓名',dataIndex:'name'},
{header:'性別',dataIndex:'sex'},
{header:'描述',dataIndex:'descn'}
]);
var triggerStore=new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'triggerData.txt'}),
reader:new Ext.data.ArrayReader({},[
{name:'name'},
{name:'sex'},
{name:'descn'}
])
});
triggerStore.load();
//定義一個(gè)grid
var triggerGrid=new Ext.grid.GridPanel({
//讀取靜態(tài),本地data文件
//store:new Ext.data.SimpleStore({
//data:[
// ['name1','sex1','descn1'],
// ['name2','sex2','descn2'],
// ['name3','sex3','descn3'],
// ['name4','sex4','descn4'],
// ['name5','sex5','descn5']
//],
//fields:['name','sex','descn']
//}),
store:triggerStore,//動(dòng)態(tài)讀取數(shù)據(jù)
cm:griggerColumn,
width:506,
height:230,
title:'grid',
viewConfig:{
forceFit:true
}
});
var selectMenu=new Ext.menu.Menu({
items:[new Ext.menu.Adapter(triggerGrid)]
});
var triggerField=new Ext.form.TriggerField({
xtype:'triggerfield',
fieldLabel:'選擇',
name:'triggerField',
id:'triggerField',
emptyText:'請?jiān)诒砀裰羞x擇',
allowBlank:false,
onSelect:function(record){},
onTriggerClick:function(){
if(this.menu==null){
this.menu = selectMenu;
}
this.menu.show(this.el,"tl-bl?");
},
width:506,
height:30
});
triggerGrid.on('rowclick',function(grid,rowIndex,e){
selectMenu.hide();
triggerField.setValue(rowIndex);
});
//===================文本域 textArea================
var textAreaField=new Ext.form.TextArea({
fieldLabel:'文本域',
xtype:'textareafield',
emptyText:'grow 和preventScrollbars是textarea的特有屬性',
allowBlank:false,
width:506,
height:100,
grow:false,//textarea會(huì)根據(jù)輸入的內(nèi)容自動(dòng)修改高度
preventScrollbars:true//防止自動(dòng)出現(xiàn)滾動(dòng)條,如果內(nèi)容超出現(xiàn)實(shí)范圍,則隱藏
});
//===================htmlEditor====================
var htmlEditorField=new Ext.form.HtmlEditor({
fieldLabel:'文本編輯器',
allowBlank:true,
emptyText:'請輸入內(nèi)容',
enableAlignments:true,
enableColors:true,
enableFont:true,
enableFontSize:true,
enableFormat:true,
enableLinks:true,
enableLists:true,
enableSourceEdit:true,
width:506,
height:150
});
var form=new Ext.form.FormPanel({
renderTo:'form',
frame:true,
labelAlign:'right',
labelWidth:100,
buttonAlign:'center',
title:'表單控件',
width:800,
autoHeight:true,
items:[alphaNumField,
urlField,
textField,
numberField,
dateField,
timerField,
emailField,
autoField,
comboLocalField,
comboRemoteField,
triggerField,
textAreaField,
htmlEditorField,
{
fileUpload:true,
url:'',
width:506,
xtype:'textfield',
name:'file',
fieldLabel:'文件上傳',
inputType:'file'
},
{
layout:'column',
bodyStyle:'margin-left:30px;',
style:{marginLeft:30},
items:[
{
layout:'form',
columnWidth:.4,
xtype:'fieldset',
title:'多選',
defaultType:'checkbox',
hideLabels:true,//這個(gè)非常重要,否則就會(huì)出現(xiàn)前面空出label的weidth
bodyStyle:'margin-left:20px;',
checkboxToggle:true,
items:[
{
boxLabel:'注意boxLabel和hideLabels這兩個(gè)屬性',
inputValue:1,
checked:true
},
{
boxLabel:'這兩個(gè)屬性石checkbox和radio特有的',
inputValue:2
},
{
boxLabel:'boxLabel會(huì)將文字顯示在復(fù)選框的右側(cè)',
inputValue:3
},
{
boxLabel:'喜歡吃獼猴桃的小孩不會(huì)的癌癥,不信你可以試一試',
inputValue:4
}
]
},
{
layout:'form',
columnWidth:.05,
items:[
{
xtype:'textfield'
}
]
},
{
layout:'form',
xtype:'fieldset',
title:'單選框',
checkboxToggle:true,
columnWidth:.4,
hideLabels:true,
defaultType:'radio',
bodyStyle:'margin-left:30px;',
items:[
{
boxLabel:'注意boxLabel和hideLabels這兩個(gè)屬性',
name:'radio',
inputValue:1,
checked:true
},
{
boxLabel:'這兩個(gè)屬性石checkbox和radio特有的',
name:'radio',
inputValue:2
},
{
boxLabel:'boxLabel會(huì)將文字顯示在復(fù)選框的右側(cè)',
name:'radio',
inputValue:3
},
{
boxLabel:'name相同的radio為一組',
name:'radio',
inputValue:4
}
]
}
]
}
],
buttons:[{
text:'提交',
handler:function(){
var textField=form.getForm().findField('textField');
alert("textField:"+textField);
Ext.Ajax.request({//使用ajax方式進(jìn)行校驗(yàn)
url:'success.jsp',
method:'post',
root:'data',
totalProperty:'totalCount',
success:function(response,opts){
var content=Ext.decode(response.responseText);
Ext.Msg.alert('提示',content.msg);
//var content=response.data[0].success;
/*if(content=='1')
{
Ext.Msg.alert('提示',content.msg);
}
else
{
Ext.Msg.alert('提示','讀取數(shù)據(jù)失敗');
}
*/
},
failure:function(){
Ext.Msg.alert('提示','操作失敗');
},
params:{
alphaNumField:alphaNumField.getValue(),
urlField:urlField.getValue(),
textField:textField.getValue(),
numberField:numberField.getValue(),
dateField:dateField.getValue(),
timerField:timerField.getValue(),
emailField:emailField.getValue()
}
});
}
}]
});
//注意:這里的提交方式是ajax請求
//當(dāng)前布局方式為:默認(rèn)布局
//====================================基本的表單元素(結(jié)束)===============================================
//=========================================表單布局(開始)===================================================
//==================1.橫向分裂式布局=================
var form1=new Ext.form.FormPanel({
renderTo:'form1',
title:'布局',
labelAlign:'right',
labelWidth:100,
buttonAlign:'center',
frame:true,
width:800,
height:100,
url:'success.jsp',
items:[{
layout:'column',
items:[{
//columnWidth:.33,//父類panel的屬性
width:250,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'兩字',
width:150
}]
},{
//columnWidth:.33,
width:250,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'三個(gè)字',
width:100
}]
},{
//columnWidth:.33,
width:200,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'三個(gè)字',
width:70
}]
}]
}],
buttons:[{
text:'提交',
handler:function(){
form1.getForm().submit({
success:function(form,action){
alert("----");
Ext.Msg.alert('提示',action.result.msg);
},
failure:function(){
Ext.Msg.alert('提示','操作失敗!');
},
params:{aaa:'aaa'}
});
}
}]
});
//注意:這里使用的是自動(dòng)提交方式,調(diào)用了form本身的submit方法提交.
// 提交路徑:url:'success.jsp',
// 提交方法form1.getForm().submit({....})
//重點(diǎn):1.layout:'column',在items指定的每列中使用clumnWidth指定梅列所占寬度百分比
// 2.如果使用分列布局,就不能使用defaultType指定的默認(rèn)的xtype了,
// 3.每一列必須手動(dòng)指定layout:'form'
// 4.用width自定義每列的寬度
//當(dāng)前布局方式為:分裂布局
//=================2.橫向多行分裂式布局================
var form2=new Ext.form.FormPanel({
renderTo:'form2',
title:'布局',
labelAlign:'right',
labelWidth:100,
buttonAlign:'center',
frame:true,
width:800,
height:200,
items:[{
layout:'column',
items:[{
//columnWidth:.33,//父類panel的屬性
width:250,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'兩字',
width:150
},
{
xtype:'textfield',
fieldLabel:'兩字',
width:150
},
{
xtype:'textfield',
fieldLabel:'兩字',
width:150
}]
},{
//columnWidth:.33,
width:250,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'三個(gè)字',
width:100
},
{
xtype:'textfield',
fieldLabel:'三個(gè)字',
width:100
}]
},{
//columnWidth:.33,
width:200,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
}]
}]
}],
buttons:[{
text:'提交',
handler:function(){
form2.getForm().getEl().dom.action="success.jsp";
form2.getForm().getEl().dom.submit();
}
}]
});
//注意:這里使用的是:html原始提交方式
// 提交路徑:form2.getForm().getEl().dom.action="success.jsp";
// 提交方法form2.getForm().getEl().dom.submit();
//重點(diǎn):1.layout:'column',在items指定的每列中使用clumnWidth指定梅列所占寬度百分比
// 2.如果使用分列布局,就不能使用defaultType指定的默認(rèn)的xtype了,
// 3.每一列必須手動(dòng)指定layout:'form'
// 4.用width自定義每列的寬度
//當(dāng)前布局方式為分裂布局
//===============3.橫向多行分裂式布局=================
var form3=new Ext.form.FormPanel({
renderTo:'form3',
title:'布局',
labelAlign:'right',
labelWidth:100,
buttonAlign:'center',
frame:true,
width:800,
height:400,
items:[{
layout:'column',
items:[{
//columnWidth:.33,//父類panel的屬性
width:250,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'兩字',
width:150
},
{
xtype:'textfield',
fieldLabel:'兩字',
width:150
},
{
xtype:'textfield',
fieldLabel:'兩字',
width:150
}]
},{
//columnWidth:.33,
width:250,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'三個(gè)字',
width:100
},
{
xtype:'textfield',
fieldLabel:'三個(gè)字',
width:100
}]
},{
//columnWidth:.33,
width:200,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
}]
}]
},{
fieldLabel :'文本域',
xtype:'textarea',
width:570,
height:100
}],
buttons:[{
text:'提交',
handler:function(){
var textField=form3.getForm().findField('textField');
alert("textField:"+textField);
Ext.Ajax.request({//使用ajax方式進(jìn)行校驗(yàn)
url:'success.jsp',
method:'post',
root:'data',
totalProperty:'totalCount',
success:function(response,opts){
var content=Ext.decode(response.responseText);
Ext.Msg.alert('提示',content.msg);
//var content=response.data[0].success;
/*if(content=='1')
{
Ext.Msg.alert('提示',content.msg);
}
else
{
Ext.Msg.alert('提示','讀取數(shù)據(jù)失敗');
}
*/
},
failure:function(){
Ext.Msg.alert('提示','操作失敗');
},
params:{
alphaNumField:'aaaa'
}
});
}
}]
});
//注意:這里使用的是:html原始提交方式
// 提交路徑:form2.getForm().getEl().dom.action="success.jsp";
// 提交方法form2.getForm().getEl().dom.submit();
//重點(diǎn):1.layout:'column',在items指定的每列中使用clumnWidth指定梅列所占寬度百分比
// 2.如果使用分列布局,就不能使用defaultType指定的默認(rèn)的xtype了,
// 3.每一列必須手動(dòng)指定layout:'form'
// 4.用width自定義每列的寬度
//當(dāng)前布局方式為分裂布局和默認(rèn)布局混合
//================4.橫向多行分裂式布局==============
var form4=new Ext.form.FormPanel({
renderTo:'form4',
title:'布局',
labelAlign:'right',
labelWidth:100,
buttonAlign:'center',
frame:true,
width:800,
height:400,
items:[{
layout:'column',
xtype:'fieldset',
title:'幾個(gè)字',
checkboxToggle:true,//折疊效果
title: 'User Information',
autoHeight:true,
items:[{
//columnWidth:.33,//父類panel的屬性
width:250,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'兩字',
width:150
},
{
xtype:'textfield',
fieldLabel:'兩字',
width:150
},
{
xtype:'textfield',
fieldLabel:'兩字',
width:150
}]
},{
//columnWidth:.33,
width:250,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'三個(gè)字',
width:100
},
{
xtype:'textfield',
fieldLabel:'三個(gè)字',
width:100
}]
},{
//columnWidth:.33,
width:200,
layout:'form',
items:[{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
}]
}]
},{
fieldLabel :'文本域',
xtype:'textarea',
width:570,
height:100
}],
buttons:[{
text:'提交',
handler:function(){
var textField=form4.getForm().findField('textField');
alert("textField:"+textField);
Ext.Ajax.request({//使用ajax方式進(jìn)行校驗(yàn)
url:'success.jsp',
method:'post',
root:'data',
totalProperty:'totalCount',
success:function(response,opts){
var content=Ext.decode(response.responseText);
Ext.Msg.alert('提示',content.msg);
//var content=response.data[0].success;
/*if(content=='1')
{
Ext.Msg.alert('提示',content.msg);
}
else
{
Ext.Msg.alert('提示','讀取數(shù)據(jù)失敗');
}
*/
},
failure:function(){
Ext.Msg.alert('提示','操作失敗');
},
params:{
alphaNumField:'aaaa'
}
});
}
}]
});
//注意:這里使用的是:fieldSet布局
//當(dāng)前布局方式為分裂布局和默認(rèn)布局混合,fieldSet框架
//==============5.橫向多行分裂式布局================
var form5=new Ext.form.FormPanel({
renderTo:'form5',
title:'布局',
labelAlign:'right',
labelWidth:60,
buttonAlign:'center',
frame:true,
width:800,
height:400,
items:[{
layout:'column',
xtype:'fieldset',//設(shè)置xtype為fieldset
title:'幾個(gè)字',
collapsible: true,
autoHeight:true,
items:[{
//columnWidth:.33,//父類panel的屬性
width:300,
layout:'form',
xtype:'fieldset',
title:'兩個(gè)字',
autoHeight:true,
collapsible: true,
items:[{
xtype:'textfield',
fieldLabel:'兩字',
width:180
},
{
xtype:'textfield',
fieldLabel:'兩字',
width:180
},
{
xtype:'textfield',
fieldLabel:'兩字',
width:180
}]
},{
//columnWidth:.33,
width:250,
layout:'form',
xtype:'fieldset',
title:'弎個(gè)字',
collapsible: true,
items:[{
xtype:'textfield',
fieldLabel:'三個(gè)字',
width:100
},
{
xtype:'textfield',
fieldLabel:'三個(gè)字',
width:100
}]
},{
//columnWidth:.33,
width:200,
layout:'form',
xtype:'fieldset',
title:'四個(gè)字',
collapsible: true,
items:[{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
},
{
xtype:'textfield',
fieldLabel:'四個(gè)字',
width:70
}]
}]
},{
xtype:'fieldset',
title:'文本域',
items:[
{
fieldLabel :'文本域',
xtype:'textarea',
width:570,
height:100
}
]
}],
buttons:[{
text:'提交',
handler:function(){
var textField=form5.getForm().findField('textField');
alert("textField:"+textField);
Ext.Ajax.request({//使用ajax方式進(jìn)行校驗(yàn)
url:'success.jsp',
method:'post',
root:'data',
totalProperty:'totalCount',
success:function(response,opts){
var content=Ext.decode(response.responseText);
Ext.Msg.alert('提示',content.msg);
//var content=response.data[0].success;
/*if(content=='1')
{
Ext.Msg.alert('提示',content.msg);
}
else
{
Ext.Msg.alert('提示','讀取數(shù)據(jù)失敗');
}
*/
},
failure:function(){
Ext.Msg.alert('提示','操作失敗');
},
params:{
alphaNumField:'aaaa'
}
});
}
}]
});
//注意:這里使用的是:fieldSet布局
//當(dāng)前布局方式為分裂布局和默認(rèn)布局混合,fieldSet框架
//fieldset也是一個(gè)框架,所以在添加fieldset時(shí),則添加一個(gè)items,將文本域作為其中的一個(gè)子屬性
//====================================表單布局(結(jié)束)===============================================
});
</script>
</head>
<body>
<div id="form" style="margin-top:50px; margin-left:150px;"></div>
<div id="form1" style="margin-top:100px; margin-left:150px;"></div>
<div id="form2" style="margin-top:100px; margin-left:150px;"></div>
<div id="form3" style="margin-top:100px; margin-left:150px;"></div>
<div id="form4" style="margin-top:100px; margin-left:150px;"></div>
<div id="form5" style="margin-top:100px; margin-left:150px;"></div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
