- Extjs xtype
-
xtype可作为Ext控件的简写,都会对应一个Ext控件。当然这里你也可以自定义这个xtype,通过自定义的Ext控件来绑定,主要由Ext.reg方法去注册xtype。Ext.all.js里面包含的xtype包含:
xtype Class
------------- ------------------
box {@link Ext.BoxComponent}
button {@link Ext.Button}
buttongroup {@link Ext.ButtonGroup}
colorpalette {@link Ext.ColorPalette}
component {@link Ext.Component}
container {@link Ext.Container}
cycle {@link Ext.CycleButton}
dataview {@link Ext.DataView}
datepicker {@link Ext.DatePicker}
editor {@link Ext.Editor}
editorgrid {@link Ext.grid.EditorGridPanel}
flash {@link Ext.FlashComponent}
grid {@link Ext.grid.GridPanel}
listview {@link Ext.ListView}
multislider {@link Ext.slider.MultiSlider}
panel {@link Ext.Panel}
progress {@link Ext.ProgressBar}
propertygrid {@link Ext.grid.PropertyGrid}
slider {@link Ext.slider.SingleSlider}
spacer {@link Ext.Spacer}
splitbutton {@link Ext.SplitButton}
tabpanel {@link Ext.TabPanel}
treepanel {@link Ext.tree.TreePanel}
viewport {@link Ext.ViewPort}
window {@link Ext.Window}
Toolbar components
---------------------------------------
paging {@link Ext.PagingToolbar}
toolbar {@link Ext.Toolbar}
tbbutton {@link Ext.Toolbar.Button} (deprecated; use button)
tbfill {@link Ext.Toolbar.Fill}
tbitem {@link Ext.Toolbar.Item}
tbseparator {@link Ext.Toolbar.Separator}
tbspacer {@link Ext.Toolbar.Spacer}
tbsplit {@link Ext.Toolbar.SplitButton} (deprecated; use splitbutton)
tbtext {@link Ext.Toolbar.TextItem}
Menu components
---------------------------------------
menu {@link Ext.menu.Menu}
colormenu {@link Ext.menu.ColorMenu}
datemenu {@link Ext.menu.DateMenu}
menubaseitem {@link Ext.menu.BaseItem}
menucheckitem {@link Ext.menu.CheckItem}
menuitem {@link Ext.menu.Item}
menuseparator {@link Ext.menu.Separator}
menutextitem {@link Ext.menu.TextItem}
Form components
---------------------------------------
form {@link Ext.form.FormPanel}
checkbox {@link Ext.form.Checkbox}
checkboxgroup {@link Ext.form.CheckboxGroup}
combo {@link Ext.form.ComboBox}
compositefield {@link Ext.form.CompositeField}
datefield {@link Ext.form.DateField}
displayfield {@link Ext.form.DisplayField}
field {@link Ext.form.Field}
fieldset {@link Ext.form.FieldSet}
hidden {@link Ext.form.Hidden}
htmleditor {@link Ext.form.HtmlEditor}
label {@link Ext.form.Label}
numberfield {@link Ext.form.NumberField}
radio {@link Ext.form.Radio}
radiogroup {@link Ext.form.RadioGroup}
textarea {@link Ext.form.TextArea}
textfield {@link Ext.form.TextField}
timefield {@link Ext.form.TimeField}
trigger {@link Ext.form.TriggerField}
Chart components
---------------------------------------
chart {@link Ext.chart.Chart}
barchart {@link Ext.chart.BarChart}
cartesianchart {@link Ext.chart.CartesianChart}
columnchart {@link Ext.chart.ColumnChart}
linechart {@link Ext.chart.LineChart}
piechart {@link Ext.chart.PieChart}
Store xtypes
---------------------------------------
arraystore {@link Ext.data.ArrayStore}
directstore {@link Ext.data.DirectStore}
groupingstore {@link Ext.data.GroupingStore}
jsonstore {@link Ext.data.JsonStore}
simplestore {@link Ext.data.SimpleStore} (deprecated; use arraystore)
store {@link Ext.data.Store}
xmlstore {@link Ext.data.XmlStore}
这里举一个例子:
实际上:
代码
var panel = new Ext.Panel({
buttonAlign: 'left',
width: 300,
renderTo: 'panel',
title: "目录",
buttons: [
new Ext.Button({ text: 'Text1' }),
new Ext.Button({ text: 'Text2' })
]
});
与代码
var panel = new Ext.Panel({
buttonAlign: 'left',
width: 300,
renderTo: 'panel',
title: "目录",
buttons: [
{ xtype: 'button', text: 'Text1' },
{ xtype: 'button', text: 'Text2' }
]
});
是等效的。
Html代码为
<div id=”panel”></div>从这里就可以看出端倪。