function myForm_1() {
Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
defaultType : 'textfield',
labelAlign : 'right',
title : 'form',
labelWidth : 50 ,
frame : true ,
width : 220 ,
items : [ new Ext.form.TextField({
name : " userName " ,
fieldLabel : '文本框',
inputType : " text " ,
allowBlank : false ,
emptyText : " 請正确輸入資料 " ,
maxLength : 10 ,
maxLengthText : " 請不要超過10個字元 " ,
invalidText : " invalidText：隻能夠輸入數字 " ,
regex : /^ \d + $ / ,
regexText : " 隻能夠輸入數字 " ,
validationEvent : " click "
// validator:function(){Ext.Msg.alert("提示資訊","隻能夠輸入數字");}
})],
buttons : [{
text : '按鈕',
handler : function () {
Ext.Msg.alert( " 提示資訊 " , " Hello,你好哈. " );
}
}]
});
form.render( " form " );
}
function myForm_2() {
var form1 = new Ext.form.FormPanel({
width : 350 ,
frame : true ,
renderTo : " form1 " ,
title : " FormPanel " ,
bodyStyle : " padding:5px 5px 0 " ,
defaults : {
width : 200 ,
xtype : " textfield "
},
items : [{
fieldLabel : " UserName " ,
name : " user " ,
id : " user "
}, {
fieldLabel : " PassWord " ,
inputType : " password " ,
name : " pass " ,
id : " pass "
}],
buttons : [{
text : " 确定 "
}, {
text : " 取消 " ,
handler : function () {
var svalue = " 使用者名: "
+ Ext.get('user').getValue();
svalue += " ,密碼: " + Ext.get('pass').getValue();
Ext.Msg.alert( " 提示資訊 " , svalue);
}
}]
});
}
function myForm_3() {
var form1 = new Ext.form.FormPanel({
width : 850 ,
frame : true ,
renderTo : " form1 " ,
title : " FormPanel " ,
bodyStyle : " padding:5px 5px 0 " ,
defaults : {
width : 200 ,
xtype : " textfield "
},
items : [{
xtype : " fieldset " ,
checkboxToggle : true , // 關鍵參數，其他和以前的一樣
checkboxName : " 個人資訊 " ,
title : " 選填資訊 " ,
defaultType : 'textfield',
width : 830 ,
autoHeight : true , // 使自适應展開排版
items : [{
fieldLabel : " UserName " ,
name : " user " ,
anchor : " 95% " // 330px-labelWidth剩下的寬度的95%，留下5%作為後面提到的驗證錯誤提示
}, {
fieldLabel : " PassWord " ,
inputType : " password " , // 密碼文本
name : " pass " ,
anchor : " 95% "
}]
}, {
xtype : 'fieldset',
title : '個人資訊',
collapsible : true ,
autoHeight : true ,
width : 830 ,
defaults : {
width : 150
},
defaultType : 'textfield',
items : [{
fieldLabel : '愛好',
name : 'hobby',
value : 'www.cnblogs.com'
}, {
xtype : " combo " ,
name : 'sex',
store : [ " 男 " , " 女 " , " 保密 " ],
fieldLabel : " 性别 " ,
emptyText : '請選擇性别.'
}, {
xtype : " datefield " ,
fieldLabel : " 生日 " ,
anchor : " 99% "
}]
}],
buttons : [{
text : " 确定 "
}, {
text : " 取消 "
}]
});
}
function myForm_4() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side'; // 提示的方式，枚舉值為"qtip","title","under","side",id(元素id)
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 , // false則不能為空，預設為true
blankText : " 不能為空，請填寫 " , // 錯誤提示資訊，預設為This field is
vtype : " email " , // 'email'隻能有效的Email,'alpha'隻能輸入字母,'alphanum'隻能輸入數字和字母,'url'隻能輸入url
vtypeText : " 不是有效的郵箱位址 " , // 錯誤提示資訊,預設值我就不說了
id : " blanktest " ,
anchor : " 90% "
}]
});
}
function myForm_5() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side'; // 提示的方式，枚舉值為"qtip","title","under","side",id(元素id)
// 先用Ext.apply方法添加自定義的password驗證函數（也可以取其他的名字）
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 ;
}
});
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 : " 密碼 " ,
id : " pass1 " ,
anchor : " 90% "
}, {
fieldLabel : " 确認密碼 " ,
id : " pass2 " ,
vtype : " password " , // 自定義的驗證類型
vtypeText : " 兩次密碼不一緻！ " ,
confirmTo : " pass1 " , // 要比較的另外一個的元件的id
anchor : " 90% "
}]
});
}
function myForm_6() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var combo = new Ext.form.ComboBox({
store : ['湖北', '江西', '安徽'],
// emptyText : '請選擇一個省份
.',
applyTo : 'combo'
});
}
function myForm_7() {
var ExtSelect = new Ext.form.ComboBox({
transform : " select " , // html中的id
width : 80
// 寬度
});
}
function myForm_8() {
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% "
}]
});
}
Ext.onReady(myForm_8);
![Ubuntu 自動挂載Windows分區 或 Linux分區[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)