版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
北風(fēng)網(wǎng)項目培訓(xùn)進(jìn)階篇(3)-ExtJs中的Window對象與FormPanel詳解2講師：風(fēng)舞煙ExtJs版國訊教育通用智能OA辦公平臺目錄Ext.Window類Ext.Window類實例Ext.FormPanel類Ext.FormPanel類實例類Ext.Window
包：Ext定義的文件Window.js類全稱：Ext.Window
繼承自于：Ext.Panel說明：一種專用于程序中的“視窗”（window）的特殊面板。Window默認(rèn)下是可拖動的draggable、浮動的窗體。窗體可以最大化到整個視圖、恢復(fù)原來的大小，還可以最小化minimize。
Windows既可關(guān)聯(lián)到Ext.WindowGroup或籍由Ext.WindowManager來管理，提供分組（grouping），活動（activation），置前/置后（tofront/back）或其它應(yīng)用程序特定的功能。
缺省狀態(tài)下，窗體都渲染到document.body。要強(qiáng)制constrain窗體以某個元素為依托就要使用renderTo方法。
例：//html代碼
<div
id="win"
class="x-hidden"></div>//js代碼
var
w=new
Ext.Window({
el:"win",//主體顯示的html元素
width:300,
height:200,
title:"標(biāo)題"
});
w.show();參數(shù)介紹：
因為前面已經(jīng)介紹了panel組件，下面只介紹window組件的幾個其他特別的配置參數(shù)//幾個前面沒有介紹的window自己的配置參數(shù)
1.closeAction:枚舉值為：close(默認(rèn)值)，當(dāng)點擊關(guān)閉后，關(guān)閉window窗口hide,關(guān)閉后，只是hidden窗口
2.closable:true在右上角顯示小叉叉的關(guān)閉按鈕，默認(rèn)為true
3.constrain：true則強(qiáng)制此window控制在viewport，默認(rèn)為false
4.modal:true為模式窗口，后面的內(nèi)容都不能操作，默認(rèn)為false
5.plain：//true則主體背景透明，false則主體有小差別的背景色，默認(rèn)為false//需要顯示下show（）方法,默認(rèn)的窗口是可拖動的，可關(guān)閉的，可拖動大小的
w.show（）實例介紹1.嵌套了tabpanel的windowvar
w=new
Ext.Window({
contentEl:"win",
width:300,
height:200,
items:new
Ext.TabPanel({
activeTab:0,//當(dāng)前標(biāo)簽為第1個tab（從0開始索引）
border:false,
items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口中"}]//TabPanel中的標(biāo)簽頁，以后再深入討論
}),
plain:true,//true則主體背景透明，false則主體有小差別的背景色，默認(rèn)為false
title:"標(biāo)題"
});
w.show();添加工具欄//
bbar:[{text:“確定”},{text:“取消”,handler:function(){w.close();}}],//bottom部
buttons:[{text:“確定”},{text:“取消”,handler:function(){w.close();}}],//footer部
buttonAlign:“center”,//footer部按鈕排列位置,這里是中間
//
collapsible:true,//右上角的收縮按鈕其他與Panel一樣！類：Ext.form.FormPanel
包：Extform定義的文件：Form.js類全稱：Ext.form.FormPanel
繼承自于：Ext.Panel
//查看源代碼便知，兩種方法是一樣的
Ext.form.FormPanel
=
Ext.FormPanel;實例1<!--html代碼-->
<body>
<div
id="form1"></div>
</body>//js代碼
var
form1
=
new
Ext.form.FormPanel({
width:350,
frame:true,//圓角和淺藍(lán)色背景
renderTo:"form1",//呈現(xiàn)
title:"FormPanel",
bodyStyle:"padding:5px
5px
0",
items:[
{
fieldLabel:"UserName",//文本框標(biāo)題
xtype:"textfield",//表單文本框
name:"user",
id:"user",
width:200
},{
fieldLabel:"PassWord",
xtype:"textfield",
name:"pass",
id:"pass",
width:200
}
],
buttons:[{text:"確定"},{text:"取消",handler:function(){alert("事件！");}}]
});關(guān)于inputType,參數(shù)如下：//input的常用幾種類型radio
check
text(默認(rèn))
file
password等等關(guān)于FormPanel的配置參數(shù)，請主要參考panel的參數(shù)，這里列舉另外兩個：1.labelAlign:fieldlabel的排列位置，默認(rèn)為"left"，其他兩個枚舉值是"center","right"
2.labelWidth:fieldlabel的占位寬
3.method:"get"或"post"
4.url："提交的地址"
5.submit:提交函數(shù)
//稍后我們一起詳細(xì)分析
實例2.FormPanel的fieldset應(yīng)用//把前面代碼重寫items屬性
items:[
{
xtype:'fieldset',
title:
'個人信息',
collapsible:
true,
autoHeight:true,
width:330,
defaults:
{width:
150},
defaultType:
'textfield',items
:[{
fieldLabel:
'愛好',
name:
'hobby',
value:
''
},{
xtype:"combo",
name:
'sex',
store:["男","女","保密"],//數(shù)據(jù)源為一數(shù)組
fieldLabel:"性別",
emptyText:'請選擇性別.'
}]
}
]關(guān)于xtype的類型，在extjs的form表單（其他的請參考api）中已經(jīng)定義的有：Form
components
---------------------------------------
form
Ext.FormPanel
checkbox
Ext.form.Checkbox
combo
Ext.form.ComboBox
datefield
Ext.form.DateField
field
Ext.form.Field
fieldset
Ext.form.FieldSet
hidden
Ext.form.Hidden
htmleditor
Ext.form.HtmlEditor
label
Ext.form.Label
numberfield
Ext.form.NumberField
radio
Ext.form.Radio
textarea
Ext.form.TextArea
textfield
Ext.form.TextField
timefield
Ext.form.TimeField
trigger
Ext.form.TriggerField實例3:可選的fieldset實例
//因為覺得這個參數(shù)特別，特舉一例以說明
1.checkboxToggle:true//true則呈現(xiàn)一個帶checkbox的fieldset，選中則展開，否則相反，默認(rèn)為false
2.checkboxName:string//當(dāng)上面為true時，作為checkbox的name，方便表單操作js核心代碼貼出來//在上一節(jié)的基礎(chǔ)代碼的items里面添加如下配置
{
xtype:"fieldset",
checkboxToggle:true,//關(guān)鍵參數(shù)，其他和以前的一樣
checkboxName:"dfdf",
title:"選填信息",
defaultType:'textfield',
width:330,
autoHeight:true,//使自適應(yīng)展開排版
items:[{
fieldLabel:“UserName”,
name:“user”,
anchor:“95%”//330px-labelWidth剩下的寬度的95%，留下5%作為后面提到的驗證錯誤提示
},
{
fieldLabel:"PassWord",
inputType:"password",//密碼文本
name:"pass",
anchor:"95%"
}]
}實例4.表單驗證實例（空驗證，密碼確認(rèn)驗證，email驗證）
我們可以用單獨的js寫表單驗證，但是extjs已經(jīng)為我們想到了（自己單獨寫反而不方便）。
在驗證之前，我不得不提兩個小知識點：//大家在很多的extjs代碼中都看到了這兩個，他們都起提示作用的
Ext.QuickTips.init();//支持tips提示
Ext.form.Ftotype.msgTarget='side';//提示的方式，枚舉值為"qtip","title","under","side",id(元素id)
//side方式用的較多，右邊出現(xiàn)紅色感嘆號，鼠標(biāo)上去出現(xiàn)錯誤提示，其他的我就不介紹了，可自行驗證
//大家可以分別去掉這兩行代碼，看效果就會明白他們的作用，（放在onReady的function（）{}中）4-1.我們看一個最簡單的例子：空驗證//空驗證的兩個參數(shù)
1.allowBlank:false//false則不能為空，默認(rèn)為true
2.blankText:string//當(dāng)為空時的錯誤提示信息js代碼為：var
form1
=
new
Ext.form.FormPanel({
width:350,
frame:true,
renderTo:"form1",
labelWidth:80,
title:"FormPanel",
bodyStyle:"padding:5px
5px
0",
defaults:{width:150,xtype:"textfield",inputType:"password"},
items:[
{fieldLabel:"不能為空",
allowBlank:false,//不允許為空
blankText:"不能為空，請?zhí)顚?,//錯誤提示信息，默認(rèn)為This
field
is
required!
id:"blanktest",
anchor:"90%"
}
]
});4-2:用vtype格式進(jìn)行簡單的驗證。
在此舉郵件驗證的例子，重寫上面代碼的items配置:items:[
{fieldLabel:"不能為空",
vtype:"email",//email格式驗證
vtypeText:"不是有效的郵箱地址",//
id:"blanktest",
anchor:"90%"
}你可以修改上面的vtype為以下的幾種extjs的vtype默認(rèn)支持的驗證：//form驗證中vtype的默認(rèn)支持類型
1.alpha
//只能輸入字母，無法輸入其他（如數(shù)字，特殊符號等）
2.alphanum//只能輸入字母和數(shù)字，無法輸入其他
3.email//email驗證，要求的格式是“l(fā)angsin@”
4.url//url格式驗證，要求的格式類似于
4-3.確認(rèn)密碼驗證（高級自定義驗證）
前面的驗證都是extjs已經(jīng)提供的驗證，我們也可以自定義驗證函數(shù)，比上面要復(fù)雜點了。我們一起做一個密碼確認(rèn)的例子。我們修改前面的代碼：//先用Ext.apply方法添加自定義的password驗證函數(shù)（也可以取其他的名字）
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val指這里的文本框值，field指這個文本框組件，大家要明白這個意思
if(field.confirmTo){//confirmTo是我們自定義的配置參數(shù)，一般用來保存另外的組件的id值
var
pwd=Ext.get(field.confirmTo);//取得confirmTo的那個id的值
return
(val==pwd.getValue());
}
return
true;
}
});//配置items參數(shù)
items:[{fieldLabel:"密碼",
id:"pass1",
anchor:"90%"
},{
fieldLabel:"確認(rèn)密碼",
id:"pass2",
vtype:"password",//自定義的驗證類型
vtypeText:"兩次密碼不一致！",
confirmTo:"pass1",//要比較的另外一個的組件的id
anchor:"90%"
}ExtJs中其他組件示例Checkbox簡單示例js代碼：Ext.onReady(function(){
//Ext.QuickTips.init();
var
myform=new
Ext.FormPanel({
frame:true,
width:330,
layout:"form",
labelWidth:30,
title:"checkbox簡單示例",
labelAlign:"left",
renderTo:Ext.getBody(),
items:[{
xtype:"panel",
layout:"column",//也可以是table,實現(xiàn)多列布局
fieldLabel:'愛好',
isFormField:true,//非常重要,否則panel默認(rèn)不顯示fieldLabelitems:[{
columnWidth:.5,//寬度為50%
xtype:"checkbox",
boxLabel:"足球",//顯示在復(fù)選框右邊的文字
name:""
},{
columnWidth:.5,
xtype:"checkbox",
boxLabel:"籃球",
name:""
}]
}]
});
});//其他幾個參數(shù)
1.checked：true//true則選中，默認(rèn)為false
2.name:"**"http://name值
3.value:""http://初始化值，默認(rèn)為undefineradio簡單示例
代碼：//基本同上，不做過多解釋
Ext.onReady(function(){
Ext.QuickTips.init();
var
myform=new
Ext.FormPanel({
frame:true,
width:330,
layout:"form",
labelWidth:30,
title:"radio簡單示例",
labelAlign:"left",
renderTo:Ext.getBody(),
items:[{
xtype:"panel",
layout:"column",
fieldLabel:'性別',
isFormField:true,
items:[{
columnWidth:.5,
xtype:"radio",
boxLabel:"男",
name:"sex"
//inputValue
},{
columnWidth:.5,
checked:true,
xtype:"radio",
boxLabel:"女",
name:"sex"
}]
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025航運(yùn)業(yè)市場競爭格局供需解析及投資發(fā)展前景規(guī)劃研究報告
- 2026年河北邯鄲凌云中學(xué)招聘儲備教師13名模擬筆試試題及答案解析
- 2025福建龍巖市第一醫(yī)院放射科技師招聘1人筆試備考重點試題及答案解析
- 2025年柳河縣公益性崗位招聘（12號）（32人）筆試備考重點試題及答案解析
- 2025浙江寧波甬江軟件產(chǎn)業(yè)園開發(fā)投資有限公司招聘1人備考考試試題及答案解析
- 2025赤峰學(xué)院附屬醫(yī)院招聘控制數(shù)人員第二批備考考試題庫及答案解析
- 幼兒園關(guān)于合作教案
- UnitHowlifebeganontheearth說明教案（2025-2026學(xué)年）
- 安徽專用中考化學(xué)復(fù)習(xí)專題九物質(zhì)的變化和性質(zhì)化學(xué)反應(yīng)類型試卷教案
- 部編版雨的四季教案
- 2025年廣西繼續(xù)教育公需科目考試試題和答案
- 醫(yī)院治安防范措施課件
- 俄烏之戰(zhàn)課件
- 2026年鐵嶺衛(wèi)生職業(yè)學(xué)院單招職業(yè)傾向性考試題庫及參考答案詳解一套
- 2025年山東政府采購評審專家考試經(jīng)典試題及答案
- 2025年廚房燃?xì)鈭缶靼惭b合同
- 環(huán)孢素的臨床應(yīng)用
- 國開電大《11837行政法與行政訴訟法》期末答題庫（機(jī)考字紙考）排序版 - 稻殼閱讀器2025年12月13日12時58分54秒
- 2025河北廊坊市工會社會工作公開招聘崗位服務(wù)人員19名考試筆試備考試題及答案解析
- 2025國家電投集團(tuán)中國重燃招聘18人筆試歷年參考題庫附帶答案詳解
- 框架日常維修協(xié)議書
評論
0/150
提交評論