ExtJs之字段集FieldSet
//Ext.form.FieldSet扩展自Ext.container.Container。其优点就是把相同字段集中在一起,在外面字段外面加了个线”围住“他们。
// Ext.QuickTips.init();//使表单结构清晰。
var f_Pannel = Ext.create('Ext.form.Panel', {
title: '字段集实例',
renderTo: Ext.getBody(),
frame: true,
width: 400,
height: 300,
items: [{
xtype: 'fieldset',
title: '产品信息',
defaults: {
labelWidth: 80,
labelAlign: 'left',
width: '300',
},
collapsible: true,
bodyPadding: 5,
defaultType: 'textfield',
items: [
{ fieldLabel: '产地' },
{ fieldLabel: '售价' }
]
},
{
xtype: 'fieldset',//不是字段对象,labelWidth不会起作用,fieldLabel也不会有作用。
title: '产品描述',
checkboxToggle:true,//是否显示字段集的复选框,默认为false
items: [
{
xtype: 'textarea', fieldLabel: '简介', labelWidth: 30,
width: 200,
}//labelWidth必须是放到items中的field(字段)对象中才能使用,因为这些是只有字段对象才拥有的配置项也可以在defaults
]//中定义
}
]
});
// Ext.QuickTips.init();//使表单结构清晰。
var f_Pannel = Ext.create('Ext.form.Panel', {
title: '字段集实例',
renderTo: Ext.getBody(),
frame: true,
width: 400,
height: 300,
items: [{
xtype: 'fieldset',
title: '产品信息',
defaults: {
labelWidth: 80,
labelAlign: 'left',
width: '300',
},
collapsible: true,
bodyPadding: 5,
defaultType: 'textfield',
items: [
{ fieldLabel: '产地' },
{ fieldLabel: '售价' }
]
},
{
xtype: 'fieldset',//不是字段对象,labelWidth不会起作用,fieldLabel也不会有作用。
title: '产品描述',
checkboxToggle:true,//是否显示字段集的复选框,默认为false
items: [
{
xtype: 'textarea', fieldLabel: '简介', labelWidth: 30,
width: 200,
}//labelWidth必须是放到items中的field(字段)对象中才能使用,因为这些是只有字段对象才拥有的配置项也可以在defaults
]//中定义
}
]
});