Windows既可關聯到 Ext.WindowGroup或籍由 Ext.WindowManager來管理, 提供分組(grouping),活動(activation),置前/置后(to front/back)或其它應用程序特定的功能。
缺省狀態下,窗體都渲染到document.body。要強制 constrain窗體以某個元素為依托就要使用 renderTo方法。
<div id="win" class="x-hidden"></div>
var w=new Ext.Window({
el:"win",//主體顯示的html元素
width:300,
height:200,
title:"標題"
});
w.show();
3.參數介紹:
1.closeAction:枚舉值為:
close(默認值),當點擊關閉后,關閉window窗口
hide,關閉后,只是hidden窗口
2.closable:true在右上角顯示小叉叉的關閉按鈕,默認為true
3.constrain:true則強制此window控制在viewport,默認為false
4.modal:true為模式窗口,后面的內容都不能操作,默認為false
5.plain://true則主體背景透明,false則主體有小差別的背景色,默認為false
w.show()
contentEl:"win",
width:300,
height:200,
items:new Ext.TabPanel({
activeTab:0,//當前標簽為第1個tab(從0開始索引) 設置選項卡的激活狀態
border:false,
items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口中"}]//TabPanel中的標簽頁,以后再深入討論
}),
plain:true,//true則主體背景透明,false則主體有小差別的背景色,默認為false
title:"標題"
});
w.show();
buttons:[{text:“確定”},{text:“取消”,handler:function(){w.close();}}],//footer部
buttonAlign:“center”,//footer部按鈕排列位置,這里是中間
// collapsible:true,//右上角的收縮按鈕
其他與Panel一樣!
Ext.form.FormPanel = Ext.FormPanel;
<body>
<div id="form1"></div>
</body>
var form1 = new Ext.form.FormPanel({
width:350,
frame:true,//圓角和淺藍色背景
renderTo:"form1",//呈現
title:"FormPanel",
bodyStyle:"padding:5px 5px 0", //邊距
fieldLabel:"UserName",//文本框標題
// xtype:"textfield",//表單文本框
name:"user",
id:"user",
// width:200
},
fieldLabel:"PassWord",
// xtype:"textfield",
name:"pass",
id:"pass",
// width:200
}
],
buttons:[{text:"確定"},{text:"取消",handler:function(){alert("事件!");}}]
});
check
text(默認)
file
password等等
2.labelWidth:fieldlabel的占位寬
3.method:"get"或"post"
4.url:"提交的地址"
5.submit:提交函數
<head runat="server"> <title></title> <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="Ext/ext-all.js" type="text/javascript"></script> <script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function() { var frmLogin = new Ext.form.FormPanel({ title: "登錄", width: 350, frame: true, bodyStyle:"padding:10px 10px 0 0", renderTo: "contaner", 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:["男","女","保密"], fieldLabel:"性別", emptyText:"請選擇性別" } ] }], buttonAlign:"center", buttons: [{ text: "登錄" }, { text: "退出", handler: function() { frmLogin.hide(); } }] }); }); </script> </head> <body> <div id="contaner"></div> </body> </html>
---------------------------------------
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
2.checkboxName:string//當上面為true時,作為checkbox的name,方便表單操作
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="Ext/ext-all.js" type="text/javascript"></script> <script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.QuickTips.init(); //支持tips提示 Ext.form.Field.prototype.msgTarget = 'side'; //提示的方式 Ext.apply(Ext.form.VTypes, { password: function(val, field) { if (field.confirmTo) { var pwd = Ext.get(field.confirmTo); return (val == pwd.getValue()); } return true; } }); var frmLogin = new Ext.form.FormPanel({ title: "登錄", width: 350, frame: true, bodyStyle: "padding:10px 10px 0 0", renderTo: "contaner", 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: ["男", "女", "保密"], fieldLabel: "性別", emptyText: "請選擇性別" } ] }, { xtype: "fieldset", checkboxToggle: true, //有checkbox的選擇框 checkboxName: "chkinfo",
autoHeight:true,//使自適應展開排版 title: "選填信息", defaultType: "textfield", width: 330, autoHeight: true, items: [ { fieldLabel: "UserName", name: "user", anchor: "95%", vtype: "email", //email格式驗證 vtypeText: "不是有效的郵箱地址" }, { fieldLabel: "PassWord", name: "pass", id: "pass", inputType: "password", anchor: "95%", //對應整個的寬度 剩下的寬度的95%,留下5%作為后面提到的驗證錯誤提示 allowBlank: false, blankText: "密碼不允許為空!" }, { fieldLabel: "ConfirmPass", id: "confirmpass", name: "confirmpass", vtype: "password", vtypeText: "兩次密碼輸入不一致!", confirmTo: "pass", inputType:"password", anchor: "95%" } ] }], buttonAlign: "center", buttons: [{ text: "登錄" }, { text: "退出", handler: function() { frmLogin.hide(); } }] }); }); </script> </head> <body> <div id="contaner"></div> </body> </html>
我們可以用單獨的js寫表單驗證,但是extjs已經為我們想到了(自己單獨寫反而不方便)。
在驗證之前,我不得不提兩個小知識點:
//大家在很多的extjs代碼中都看到了這兩個,他們都起提示作用的
Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget='side';//提示的方式,枚舉值為"qtip","title","under","side",id(元素id)
//side方式用的較多,右邊出現紅色感嘆號,鼠標上去出現錯誤提示,其他的我就不介紹了,可自行驗證
//大家可以分別去掉這兩行代碼,看效果就會明白他們的作用,(放在onReady的function(){}中)
1.allowBlank:false//false則不能為空,默認為true
2.blankText:string//當為空時的錯誤提示信息
var form1 = new Ext.form.FormPanel({ width:350, frame:true, renderTo:"form1", labelWidth:80, title:"FormPanel",
4.2用vtype格式進行簡單的驗證。
items:[ {fieldLabel:"不能為空", vtype:"email",//email格式驗證 vtypeText:"不是有效的郵箱地址",//錯誤提示信息,默認值我就不說了 id:"blanktest", anchor:"90%" }
//form驗證中vtype的默認支持類型
1.alpha //只能輸入字母,無法輸入其他(如數字,特殊符號等)
2.alphanum//只能輸入字母和數字,無法輸入其他
3.email//email驗證,要求的格式是“langsin@gmail.com”
4.url//url格式驗證,要求的格式類似於
Ext.apply(Ext.form.VTypes,{ password:function(val,field){//val指這里的文本框值,field指這個文本框組件,大家要明白這個意思 if(field.confirmTo){//confirmTo是我們自定義的配置參數,一般用來保存另外的組件的id值 var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個id的值 return (val==pwd.getValue()); } return true; } });
5.Checkbox 和Radio簡單示例
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="Ext/ext-all.js" type="text/javascript"></script> <script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function() { var myform = new Ext.FormPanel({ frame: true, width: 500, layout: "form", labelWidth: 30, title: "checkBox示例", labelAlign: "left", renderTo: Ext.getBody(), items: [{ xtype: "panel", layout: "column", fieldLabel: "愛好", items: [ { columnWidth:.2, xtype:"checkbox", boxLabel:"足球" }, { columnWidth: .2, xtype: "checkbox", boxLabel: "籃球" } ] }, { xtype: "panel", layout: "column", fieldLabel: "性別", items: [ { columnWidth:.2, xtype:"radio", boxLabel:"男", name:"sex" }, { columnWidth: .2, xtype: "radio", boxLabel: "女", name:"sex" } ] }, { xtype: "panel", layout: "form", labelWidth: 50, height: 100, labelAlign:"top", items: [ { xtype:"htmleditor", fieldLabel:"備注", anchor:"99%" } ] } ] } ); }) </script> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>
1.checked:true//true則選中,默認為false
2.name:"**"//name值
3.value:""//初始化值,默認為undefine
6.htmleditor簡單示例
Ext.onReady(function(){
Ext.QuickTips.init();
var myform=new Ext.FormPanel({
frame:true,
width:600,
layout:"form",
labelWidth:50,
title:"htmleditor簡單示例",
labelAlign:"top",//items中的標簽的位置
renderTo:Ext.getBody(),
items:[{
xtype:"htmleditor",
id:"he",
fieldLabel:"編輯器",
anchor:"99%"
}]
);
labelAlign:此參數是指form表單中items各項的label位置,默認值為left,枚舉值有left,right,top
1.hideLabel:true//默認為false,還適用於有標簽的所有表單組件
//下面的一組參數控制編輯器的工具欄選項,都是默認值為true
2.enableColors:true//默認為true,顯示字體顏色,字體背景顏色
3.enableAlignments:true//左,中,右對齊
4.enableFont:true//字體
5.enableFontSize:false//字體大小,就是A旁邊有個小箭頭的
6.enableFormat:false//粗體,斜體,下划線
7.enableLinks:true//鏈接
8.enableLists:true//列表
9.enableSourceEdit:true//源代碼編輯