xtype Class
------------- ------------------
box Ext.BoxComponent
button Ext.Button
buttongroup Ext.ButtonGroup
colorpalette Ext.ColorPalette
component Ext.Component
container Ext.Container
cycle Ext.CycleButton
dataview Ext.DataView
datepicker Ext.DatePicker
editor Ext.Editor
editorgrid Ext.grid.EditorGridPanel
flash Ext.FlashComponent
grid Ext.grid.GridPanel
listview Ext.ListView
panel Ext.Panel
progress Ext.ProgressBar
propertygrid Ext.grid.PropertyGrid
slider Ext.Slider
spacer Ext.Spacer
splitbutton Ext.SplitButton
tabpanel Ext.TabPanel
treepanel Ext.tree.TreePanel
viewport Ext.ViewPort
window Ext.Window
Toolbar components
---------------------------------------
paging Ext.PagingToolbar
toolbar Ext.Toolbar
tbbutton Ext.Toolbar.Button (deprecated; use button)
tbfill Ext.Toolbar.Fill
tbitem Ext.Toolbar.Item
tbseparator Ext.Toolbar.Separator
tbspacer Ext.Toolbar.Spacer
tbsplit Ext.Toolbar.SplitButton (deprecated; use splitbutton)
tbtext Ext.Toolbar.TextItem
Menu components
---------------------------------------
menu Ext.menu.Menu
colormenu Ext.menu.ColorMenu
datemenu Ext.menu.DateMenu
menubaseitem Ext.menu.BaseItem
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.TextItem
Form components
---------------------------------------
form Ext.FormPanel
checkbox Ext.form.Checkbox
checkboxgroup Ext.form.CheckboxGroup
combo Ext.form.ComboBox
datefield Ext.form.DateField
displayfield Ext.form.DisplayField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
Chart components
---------------------------------------
chart Ext.chart.Chart
barchart Ext.chart.BarChart
cartesianchart Ext.chart.CartesianChart
columnchart Ext.chart.ColumnChart
linechart Ext.chart.LineChart
piechart Ext.chart.PieChart
Store xtypes
---------------------------------------
arraystore Ext.data.ArrayStore
directstore Ext.data.DirectStore
groupingstore Ext.data.GroupingStore
jsonstore Ext.data.JsonStore
simplestore Ext.data.SimpleStore (deprecated; use arraystore)
store Ext.data.Store
xmlstore Ext.data.XmlStore
defaults：xtypes的默認值，如：
defaults:{xtype:"textfield",width:180},
items:[{fieldLabel:"帳號"},{fieldLabel:"密碼"}],
看這幾種方式 均在 Panel上放置控件的方式
new Ext.FormPanel({
height: 100,
renderTo: Ext.getBody(),
layoutConfig: {
labelSeparator: '~' // layout config has lowest priority (defaults to ':')
},
{@link Ext.layout.FormLayout#labelSeparator labelSeparator}: '>>', // config at container level
items: [{
xtype: 'textfield',
fieldLabel: 'Field 1',
labelSeparator: '
' // field/component level config supersedes others
},{
xtype: 'textfield',
fieldLabel: 'Field 2' // labelSeparator will be '='
}]
});
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人員信息",
frame:true,
width:400,
height:300
})
_panel.addButton({text:"確定"});
_panel.addButton(new Ext.Button({text:"取消",minWidth:200}));
_panel.render(Ext.getBody());
}) ;
Ext.onReady(function(){
var _panel=new Ext.Panel({
title:"登陸",
renderTo:Ext.getBody(),
frame:true,
width:560,
height:130,
layout:"form",
lableWidth:45,
defaults:{xtype:"textfield",width:180},
items:[{fieldLabel:"帳號"},{fieldLabel:"密碼"}],
buttons:[{text:"確定"},{text:"取消"}]
})
})
var panel = new Ext.Panel({
title:"Hello World",
frame: true,
layout:"form",
width: 400,
items:[
{xtype:"textfield", id:"userName", fieldLabel:"UserName"},
{xtype:"textfield", id:"sex", fieldLabel:"Sex"},
{xtype:"textfield", id:"age", fieldLabel:"Age"}
],
buttons:[
{text:"確定", handler:function() {
Ext.MessageBox.alert("OK", Ext.getCmp("userName").getValue());
}},
{text:"取消", handler:function(){
Ext.MessageBox.alert("OK", Ext.getCmp("userName").getValue());
}}
]
});
panel.render(Ext.getDom("tt")); //body里弄一個 <div id="tt"></div>
摘自：http://www.cnblogs.com/easypass/