Example of designing a complex window in Extjs4.0.7

A comprehensive example of the modal window is provided for future reference. This example only lists the settings of various controls. If you do not make any adjustments, you can refine the settings and familiarize yourself with the controls. [Javascript] varwinExt. create (& amp; #39; Ext. window. Window & amp; #39;,... SyntaxHi

A comprehensive example of modal window is provided for future reference:

This example only lists the settings of each control. You can refine the settings by yourself without any detailed adjustments.
[Javascript]
Var win = Ext. create ('ext. window. Window ',{
Title: 'resize me ',
Width: 600,
Height: 500,
MinWidth: 300,
MinHeight: 200,
Modal: true,
Plain: true,
Layout: 'anchor ',
FieldDefaults :{
Xtype: 'textfield'
},
Items :[{
Xtype: 'panel ',
Layout: 'column ',
Items :[{
Layout: 'anchor ',
ColumnWith:. 5,
BaseCls: 'x-plain ',
// Defaults: [width: 80],
// LabelWidth: 90,
Items :[{
FieldLabel: 'work id ',
Xtype: 'textfield ',
Width: 200,
LabelWidth: 50,
Name: 'job _ id ',
Value: '22'
},{
FieldLabel: 'work description ',
Xtype: 'textfield ',
Name: 'job _ desc ',
ReadOnly: true, // whether it can be input
Value :''
},{
Xtype: 'checkboxfield ',
Name: 'checkbox1 ',
FieldLabel: 'checkbox ',
BoxLabel: 'box label'
},{
Xtype: 'radiofield ',
Name: 'radio1 ',
Value: 'radiovalue1 ',
FieldLabel: 'Radio Buttons ',
BoxLabel: 'Radio 1'
},{
Xtype: 'radiofield ',
Name: 'radio1 ',
Value: 'radiovalue2 ',
FieldLabel :'',
LabelSeparator :'',
HideEmptyLabel: false,
BoxLabel: 'Radio 2'
},{
Xtype: 'datefield ',
Format: 'Y-m-d ',
Value: '1970-01-01 ', // new Date (); default: current Date
// ReadOnly: true, // whether it can be input
Name: 'date1 ',
FieldLabel: 'date of birthday'
},{
Xtype: 'textfield ',
Name: 'password1 ',
InputType: 'Password ',
FieldLabel: 'Password'
}]
},{
ColumnWith:. 5,
FieldDefaults :{
Xtype: 'textfield ',
LabelAlign: 'right ',
LabelWidth: 60,
Anchor: '000000'
},
Items :[{
FieldLabel: 'gender ',
Xtype: 'combobox ',
Name: 'sex ',
QueryMode: 'local', // specifies the local data to be obtained.
DisplayField: 'sex _ name ',
ValueField: 'sex _ id ',
AllowBlank: false,
Editable: false,
// ReadOnly: true,
Store: new Ext. create ('ext. data. store ',{
Fields: ['sex _ id', 'sex _ name'],
Data: [{'sex _ id': '1', 'sex _ name': 'male'}, {'sex _ id': '0 ', 'Sex _ name': 'female}]
}),
Value: '1'
},{
FieldLabel: 'age ',
Xtype: 'numberfield ',
Name: 'numberfield1 ',
Value: 5,
MinValue: 0,
MaxValue: 50
},{
FieldLabel: 'picture ',
InputType: 'image ',
Xtype: 'textfield ',
Width: 100,
Height: 100
}]
}]
},{
Width: 500,
FieldLabel: 'description 1 ',
Xtype: 'textfield ',
Name: 'remark1 ',
Value: '22'
},{
Width: 500,
FieldLabel: 'note 2 ',
Xtype: 'textfield ',
Name: 'remark2 ',
Value: '22'
}],
Buttons :[{
Text: 'send'
},{
Text: 'cancel'
}]
});
 
Win. show ();
// FormPanel. render ('form-ct ');
});
Style chart: