extjs xtype

待我称王封你为后i 2022-02-17 00:24 198阅读 0赞

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