Ext FormPanel 独孤九剑-第九式
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);
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);