xtype:在定义一个类的时候,如果指定了xtype,那么可以通过这个xtype,而不是类型的全名来创建这些类型,
xtype提供了创建对象的较短替代方法,尤其是在容器中,使用xtype是定义组件实例的最常见方法
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js"></script>
<script>
Ext.onReady(function(){
console.log("ext init");
//类型的全名来创建Button
Ext.create('Ext.Button', {
text: 'button',
renderTo: Ext.getBody(),
handler: function() {
console.log('You clicked the button!');
}
});
Ext.create('Ext.Container', {
width: 1400,
height: 900,
renderTo: Ext.getBody(),
items : [
{
xtype: 'button',//在容器中,使用xtype是定义组件实例的最常见方法
text : 'My Button1',
scale : 'large',//'small'、'medium'、'large'
handler:function(){
console.log("button click event");
}
}
]
});
});
</script>
</head>
<body>
</body>
</html>
组件可以通过容器配置items创建, 也可以通过动态方法 add创建
xtype Class
------------- ------------------
button Ext.button.Button
buttongroup Ext.container.ButtonGroup
colorpalette Ext.picker.Color
component Ext.Component
container Ext.container.Container
cycle Ext.button.Cycle
dataview Ext.view.View
datepicker Ext.picker.Date
editor Ext.Editor
editorgrid Ext.grid.plugin.Editing
grid Ext.grid.Panel
multislider Ext.slider.Multi
panel Ext.panel.Panel
progressbar Ext.ProgressBar
slider Ext.slider.Single
splitbutton Ext.button.Split
tabpanel Ext.tab.Panel
treepanel Ext.tree.Panel
viewport Ext.container.Viewport
window Ext.window.Window
Toolbar components
---------------------------------------
pagingtoolbar Ext.toolbar.Paging
toolbar Ext.toolbar.Toolbar
tbfill Ext.toolbar.Fill
tbitem Ext.toolbar.Item
tbseparator Ext.toolbar.Separator
tbspacer Ext.toolbar.Spacer
tbtext Ext.toolbar.TextItem
Menu components
---------------------------------------
menu Ext.menu.Menu
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.Item
Form components
---------------------------------------
form Ext.form.Panel
checkbox Ext.form.field.Checkbox
combo Ext.form.field.ComboBox
datefield Ext.form.field.Date
displayfield Ext.form.field.Display
field Ext.form.field.Base
fieldset Ext.form.FieldSet
hidden Ext.form.field.Hidden
htmleditor Ext.form.field.HtmlEditor
label Ext.form.Label
numberfield Ext.form.field.Number
radio Ext.form.field.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.field.TextArea
textfield Ext.form.field.Text
timefield Ext.form.field.Time
trigger Ext.form.field.Trigger
Chart components
---------------------------------------
chart Ext.chart.Chart
barchart Ext.chart.series.Bar
columnchart Ext.chart.series.Column
linechart Ext.chart.series.Line
piechart Ext.chart.series.Pie