EXT--Ext.form.FieldSet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>字段集</title> <link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script> <script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.form.Panel', { title:'Ext.form.FieldSet示例', labelWidth:40, width:200, frame:true, renderTo:Ext.getBody(), bodyPadding:5, items:[{ title:'产品信息', xtype:'fieldset', collapsible:true,//显示切换展开收缩状态的切换按钮 collapsible用来设置字段集是否可以折叠 bodyPadding:5, defaults:{ labelSeparator:':', labelWidth:50, width:160 }, defaultType:'textfield', items:[{ fieldLabel:'产地' }, { fieldLabel:'售价' }] }, { title:'产品描述', xtype:'fieldset', bodyPadding:5, checkboxToggle:true,//显示切换展开收缩状态的复选框 //（ checkboxToggle 设置是否显示字段集的checkbox选择框，可以实现隐藏或显示字段集的功能） checkboxName:'description', //提交数据时复选框对应的name labelSeparator:':', items:[{ fieldLabel:'简介', labelSeparator:':', labelWidth:50, width:160, xtype:'textarea' }] } ] } ); }); </script> </head> <body> </body> </html>
?
