标签：
width:300,
height:200,
title:"标题"
});
w.show();
3.参数介绍：
close(默认值)，当点击关闭后，关闭window窗口
hide,关闭后，只是hidden窗口
2.closable:true在右上角显示小叉叉的关闭按钮，默认为true
3.constrain：true则强制此window控制在viewport，默认为false
4.modal:true为模式窗口，后面的内容都不能操作，默认为false
5.plain：//true则主体背景透明，false则主体有小差别的背景色，默认为false
其他与Panel一样！
<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>
<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>
//大家在很多的extjs代码中都看到了这两个，他们都起提示作用的
Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget=‘side‘;//提示的方式，枚举值为"qtip","title","under","side",id(元素id)
//side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示，其他的我就不介绍了，可自行验证
//大家可以分别去掉这两行代码，看效果就会明白他们的作用，（放在onReady的function（）{}中）
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>
6.htmleditor简单示例
Ext.js入门：Window对象与FormPanel（六）
标签：
原文地址：http://www.cnblogs.com/sunliyuan/p/5840071.html
