/*
* Advanced Form
* @author xi
* @created on Oct 28th 2008 04:10 PM
* @updated on Oct 29th 2008 08:48 AM
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
/*
* ================ Form 5 =======================
*/
bd.createChild({tag: 'h2', html: 'USer Information'});
var tab2 = new Ext.FormPanel({
labelAlign: 'top',
title: 'Basic Information',
bodyStyle:'padding:5px',
width: 600,
items: [{
id:'obj1',
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'commany',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
id:'objtab',
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[{
id:'obj2',
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'commany',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
id:'obj3',
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
id:'obj4',
cls:'x-plain',
title:'Biography',
name:'biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Biography'
}
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
tab2.render(document.body);
});
/*
* Advanced Form
* @author xi
* @created on Oct 28th 2008 04:10 PM
* @updated on Oct 29th 2008 08:48 AM
*/
Ext.onReady(function() {
//HtmlEditor需要這個
Ext.QuickTips.init();
//設置提示位置
Ext.form.Field.prototype.msgTarget = 'side';
//form定義
var exampleForm = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 50,
width: 600,
title:'Form Example',
frame: true,
//----------------form內容定義-------------
items:[{
layout:'column',
items:[{
//這裏是0.7表單的內容
columnWidth:.7,
xtype:'fieldset',
checkboxToggle:true,
title:'單純輸入',
autoHeight:true,
defaults:{
width: 300
},
defaultType:'textfield',
items:[{
fieldLabel:'文本',
name:'text',
allowBlank:false
},{
xtype:'numberfield',
fieldLabel:'數字',
name:'number'
},{
xtype:'combo',
fieldLabel:'選擇',
name:'combo',
store:new Ext.data.SimpleStore({
fields:['value','text'],
data:[['1','1'],['2','2']]
}),
displayField:'text',
valueField:'value',
mode:'local',
emptyText:'請選擇'
},{
xtype:'datefield',
fieldLabel:'日期',
name:'date'
},{
xtype:'timefield',
fieldLabel:'時間',
name:'time'
},{
xtype:'textarea',
fieldLabel:'多行',
name:'textarea'
}]
},{
//這裏是0.3表單的內容
columnWidth:.3,
layout:'form',
items:[{
xtype:'fieldset',
checkboxToggle:true,
title:'多選項',
autoHeight:true,
defaultType:'checkbox',
hideLabels: true,
style : 'margin-left:10px;',
bodyStyle : 'margin-left:20px;',
items:[{
boxLabel:'首先要穿暖',
name:'check',
value:'1',
checked:true,
width:'auto'
},{
boxLabel:'然後要喫飽',
name:'check',
value:'2',
checked: true,
width:'auto'
},{
boxLabel:'然後要有房子',
name:'check',
value:'3',
width:'auto'
},{
boxLabel:'然後要有車',
name:'check',
value:'4',
width:'auto'
}]
},{
xtype:'fieldset',
checkboxToggle:true,
title:'單選',
autoHeight:true,
defaultType:'radio',
hideLabels: true,
style : 'margin-left:10px;',
bodyStyle : 'margin-left:20px;',
items:[{
boxLabel:'自由',
name:'rad',
value:'1',
checked:'true',
width:'auto'
},{
boxLabel:'愛情',
name:'rad',
value:'1',
width:'auto'
}]
}]
}]
}],
//----------------------------------------
//-----------------button定義--------------
buttons:[{text:'保存'},{text:'取消'}]
//----------------------------------------
});
exampleForm.render("form");
});