ExtJs学习资料51-表单布局之折叠控件.docVIP

1、引入ExtJs框架文件（存入Global.js文件中） document.write(link rel=\stylesheet\ type=\text/css\ href=\../extjs/resources/css/ext-all.css\/ ); document.write(script type=\text/javascript\ src=\../extjs/adapter/ext/ext-base.js\/script); document.write(script type=\text/javascript\ src=\../extjs/ext-all.js\/script); document.write(script type=\text/javascript\ src=\../extjs/ext-lang-zh_CN.js\/script); 2、引入Global.js文件 script type=text/javascript src=Global.js/script script src=../js/Ext.formLayout2.js style type=text/css .icon{ background:url(icon.gif) no-repeat !important } /style 3、效果图 ===================================================================================================================== 4、JS源代码 Ext.onReady(function(){ Ext.QuickTips.init();//提供提示信息功能 Ext.form.Field.prototype.msgTarget = side;// 出错时的信息显示方位,共有四项title,qtip(默认),under,side var fsf = new Ext.FormPanel({ labelWidth: 60, labelAlign:right, frame: true, bodyStyle: padding:5px 5px 0, autoWidth:true, items: [{ xtype: fieldset,//控件类型 checkboxToggle: true,//用复选框的形式展开或折叠 title: 用户信息, autoHeight: true, defaultType: textfield, collapsed: false, items: [{ fieldLabel: 姓名, name: first, allowBlank: false }, { fieldLabel: 地址, name: last }, { fieldLabel: 公司, name: company }, { fieldLabel: 邮件, name: email, vtype: email }] }, { xtype: fieldset, title: 电话号码, collapsible: true,//设置这个控件允许折叠 autoHeight: true, defaultType: textfield, items: [{ fieldLabel: 家庭电话, name: home, value: 0451 }, { fieldLabel: 手机号码, name: mobile }, { fieldLabel: 传真, name: fax }] }], buttons: [{ text: 保存 }, { text: 取消 }] }); //定义一个弹出窗口 var win = new Ext.Window({ id: formlayout_zhedie-win, width: 280, height: 350, minWidth: 200, minHeight: 200, plain: true, title: Ext.fly(title).dom.innerHTML, layout: fit, border: false, closable: false, items: fsf }); //窗口显示 win.show(); }); ExtJs学习资料—表单布局之折叠控件[2010年3月10日星期三] 第 1 页