[转载]ExtJs中fieldset的使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">

<html>

<head>

<title>fieldSet的效果</title>

<meta http-equiv="keywords"content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is mypage">

<meta http-equiv="content-type" content="text/html;charset=GBK">

<link type="text/css"href="ext/resources/css/ext-all.css" />

<script type="text/javascript"src="ext/adapter/ext/ext-base.js"></script>

<script type="text/javascript"src="ext/ext-all.js"></script>

<script type="text/javascript">

Ext.onReady(init);

function init()

{

Ext.QuickTips.init();

//增加相应的验证个别

Ext.apply(Ext.form.VTypes, {

password : function(val, field){

//val指此处的文本框值extjs fieldset 隐藏extjs fieldset 隐藏，field指这个文本框组件，大家要知道这个意思

//confirmTo是我们自定义的配置参数，一般用来储存另外的模块的id值

if(field.confirmTo)

{

var pwd = Ext.get(field.confirmTo);

return val == pwd.getValue();

}

return false;

}

});

var panel =new Ext.form.FormPanel({

title : '个人信息补全',

renderTo : Ext.getBody(),

frame : true,

width :680,

x : 400,

y : 50,

floating : true,

plain : true,

buttonAlign : 'center',

//拖曳功能

draggable : {insertProxy: false,

onDrag : function(e){

var pel =this.proxy.getEl();

this.x =pel.getLeft(true);

this.y =pel.getTop(true);//获取拖动时panel的坐标

var s =this.panel.getEl().shadow;

if(s){

s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());

}

},

endDrag : function(e){

this.panel.setPosition(this.x, this.y);

}

},

items : [{

xtype : 'fieldset',

title : '个人信息',

collapsible : true, //可折叠

height : 420,

labelWidth : 65,

labelSeparator : ':',

autoWidth : true,

defaults : {width : 150, allowBlank : false,xtype : 'textfield',msgTarget : 'side'},

labelAlign : 'left',

items : [

{fieldLabel : '用户姓名', emptyText : '请输入用户名', blankText : '用户名不能为空',name : 'username', id : 'username', anchor:'95%'},

{fieldLabel : '用户密码', inputType : 'password', blankText :'密码不能为空',name : 'psd', id : 'pwd', anchor:'95%', inputType :'password'},

{fieldLabel : '重复密码', inputType : 'password', blankText:'重复密码不能为空', name : 'repwd', id : 'repwd', anchor:'95%', inputType: 'password', vtype : 'password', vtypeText : '两次密码不相等', confirmTo: 'pwd'},

{xtype : 'datefield', name : 'birthday', fieldLabel : '出生日期',readOnly : true, anchor:'95%'},

{fieldLabel : '个人主页', name : 'url', vtype : 'url', vtypeText :'url不合法', anchor:'95%'},

{fieldLabel : '电子邮箱', name : 'email', vtype : 'email', vtypeText :'email不合法', anchor:'95%'},

{xtype : 'panel', layout : 'column', fieldLabel : '性别',isFormField:true, items : [

{column : .5, xtype : 'radio', boxLabel : '男', name : 'sex',checked : true},

{column : .5, xtype : 'radio', boxLabel : '女', name : 'sex'}

]},

{xtype : 'panel', layout : 'column', fieldLabel : '性别',isFormField:true, items : [

{column : .5, xtype : 'checkbox', boxLabel : '台球', name : 'aihao',checked : true},

{column : .5, xtype : 'checkbox', boxLabel : '斯诺克', name :'aihao'}

]},

{xtype : 'htmleditor', fieldLabel : '个人简介', name : 'info', anchor :'95%'}

]

}],

buttons : [{text : '确 定', formBind : true, handler: hand}, {text :'取 消', handler: function(){this.ownerCt.getForm().reset()}}]

});

function hand(val)

{

val.ownerCt.form.submit();

}

}

</script>

</head>

<body>

</body>

</html>

图片如下:

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-140301-1.html