Ext学习心得（一）

Ext.create('Ext.container.Viewport', {    layout: 'border',    items: [{        region: 'north',        html: '<h1 class="x-panel-header">Page Title</h1>',        border: false,        margins: '0 0 5 0'    }, {        region: 'west',        collapsible: true,        title: 'Navigation',        width: 150        // 这里通常可以使用 TreePanel 或者 AccordionLayout布局的导航菜单    }, {        region: 'south',        title: 'South Panel',        collapsible: true,        html: 'Information goes here',        split: true,        height: 100,        minHeight: 100    }, {        region: 'east',        title: 'East Panel',        collapsible: true,        split: true,        width: 150    }, {        region: 'center',        xtype: 'tabpanel', // TabPanel本身没有title属性        activeTab: 0,      // 配置默认显示的激活面板        items: {            title: 'Default Tab',            html: 'The first tab\'s content. Others may be added dynamically'        }    }]});

1.-------------------------》

Ext.create([String name], [Object... args] ) :Object =======》代表创建一个对象，name可以是别名，备用名或者是全名。Object...可变参数，传递给构造函数。
如果只传递一个参数，那么就是第一个参数，name
return 实例对象
2.------------------------》
layout

layout: {    type: 'vbox',    align: 'left'}

type：指定类型
align：指定对齐方式
3.----------------------》

// 单个组件items: {...},layout: 'fit',    // 布局设置为fit    填充容器// 多个子组件items: [{...}, {...}],layout: 'hbox', // 布局设置为hbox

3.1--------------------》
组件===》

xtype            Class-------------    ------------------button           Ext.button.Buttonbuttongroup      Ext.container.ButtonGroupcolorpalette     Ext.picker.Colorcomponent        Ext.Componentcontainer        Ext.container.Containercycle            Ext.button.Cycledataview         Ext.view.Viewdatepicker       Ext.picker.Dateeditor           Ext.Editoreditorgrid       Ext.grid.plugin.Editinggrid             Ext.grid.Panelmultislider      Ext.slider.Multipanel            Ext.panel.Panelprogressbar      Ext.ProgressBarslider           Ext.slider.Singlesplitbutton      Ext.button.Splittabpanel         Ext.tab.Paneltreepanel        Ext.tree.Panelviewport         Ext.container.Viewportwindow           Ext.window.WindowToolbar components---------------------------------------pagingtoolbar    Ext.toolbar.Pagingtoolbar          Ext.toolbar.Toolbartbfill           Ext.toolbar.Filltbitem           Ext.toolbar.Itemtbseparator      Ext.toolbar.Separatortbspacer         Ext.toolbar.Spacertbtext           Ext.toolbar.TextItemMenu components---------------------------------------menu             Ext.menu.Menumenucheckitem    Ext.menu.CheckItemmenuitem         Ext.menu.Itemmenuseparator    Ext.menu.Separatormenutextitem     Ext.menu.ItemForm components---------------------------------------form             Ext.form.Panelcheckbox         Ext.form.field.Checkboxcombo            Ext.form.field.ComboBoxdatefield        Ext.form.field.Datedisplayfield     Ext.form.field.Displayfield            Ext.form.field.Basefieldset         Ext.form.FieldSethidden           Ext.form.field.Hiddenhtmleditor       Ext.form.field.HtmlEditorlabel            Ext.form.Labelnumberfield      Ext.form.field.Numberradio            Ext.form.field.Radioradiogroup       Ext.form.RadioGrouptextarea         Ext.form.field.TextAreatextfield        Ext.form.field.Texttimefield        Ext.form.field.Timetrigger          Ext.form.field.TriggerChart components---------------------------------------chart            Ext.chart.Chartbarchart         Ext.chart.series.Barcolumnchart      Ext.chart.series.Columnlinechart        Ext.chart.series.Linepiechart         Ext.chart.series.Pie

如果没有指定xtype（那么将会使用defaultType，默认是panel.）
4.----------------------------》
配置panel参数

    title: 'Hello',  =====》此标题头内容被用于在panel 标题头展现。    width: 200,      =====》此组件的宽度，以像素为单位。    html: '<p>World!</p>',   ====》一个 HTML 片段, 或者一个 DomHelper 描述, 用作 layout 元素的内容.    renderTo: Ext.getBody()   =====》指定元素的id, 一个DOM元素或现有的元素，这个组件将被渲染成                              =======》将当前document的body对象当作Ext.Element返回。