（Ext基础篇） Ext核心组件

阳光穿透心脏的1/2处 2023-10-18 23:39 145阅读 0赞

Ext.Componet

概述：所有Ext组件的基类。 所有Componet的子类都自动地参与标准的Ext组件生命周期：创建、渲染、销毁，这些操作 由Container 类提供。 在创建容器时，组件可以通过items 配置选项被添加到容器中， 或者，可以通过add方法动态地 添加。

Component基类对基本的hide/show和enable/disable行为提供了内建的支持。

所有组件都注册到了 Ext.ComponentMgr 类，所以它们可以在任何时刻通过传递 id 使用 Ext.getCmp 方法获得引用.

![Center][]

组件大致分为三类：基本组件、工具栏组件和表单组件

xtype            类 Class
     -------------    ------------------
     box              Ext.BoxComponent
     button           Ext.Button
     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
     grid             Ext.grid.GridPanel
     paging           Ext.PagingToolbar
     panel            Ext.Panel
     progress         Ext.ProgressBar
     splitbutton      Ext.SplitButton
     tabpanel         Ext.TabPanel
     treepanel        Ext.tree.TreePanel
     viewport         Ext.ViewPort
     window           Ext.Window
     
    工具条组件 Toolbar components
     ---------------------------------------
     toolbar          Ext.Toolbar
     tbbutton         Ext.Toolbar.Button（已废弃，用button代替）
     tbfill           Ext.Toolbar.Fill
     tbitem           Ext.Toolbar.Item
     tbseparator      Ext.Toolbar.Separator
     tbspacer         Ext.Toolbar.Spacer
     tbsplit          Ext.Toolbar.SplitButton（已废弃，用splitbutton代替）
     tbtext           Ext.Toolbar.TextItem
     
    表单组件 Form components
     ---------------------------------------
     form             Ext.FormPanel
     checkbox         Ext.form.Checkbox
     combo            Ext.form.ComboBox
     datefield        Ext.form.DateField
     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
     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对象 Store xtypes
     ---------------------------------------
     arraystore       Ext.data.ArrayStore
     directstore      Ext.data.DirectStore
     groupingstore    Ext.data.GroupingStore
     jsonstore        Ext.data.JsonStore
     simplestore      Ext.data.SimpleStore     （已废弃，用arraystore代替） 
    store            Ext.data.Store
     xmlstore         Ext.data.XmlStore

Ext.BoxComponent

Ext.Component组件也是一个比较重要的基础类，它继承自Ext.Component并实现了定位和控制自身大小的功能。

可以使用pageX、pageY、X、Y为Ext.Component指定具体坐标，也可以使用width和height为Ext.Component指定长度和宽度，或者使用autoHeight和autoWidth让Ext.Compnent根据内容自动调整长度和宽度。

Ext.Container

Ext.Container继承自Ext.BoxComponent,提供了两个重要参数layout 和items,layout指定组件使用何种布局，items包含当前组件中的所有组件。

Ext.Panel

Ext.Panel是Ext中经常用到的一个组件，它继承自Ext.Container。与上面的那些组件不同的是，ExtPanel无需继承就可以直接使用。我们可以使用tilte参数，定义它显示的标题、使用tbar、bbar设置上下位置工具条、使用collapsefirst、collapsed、collapsedCls和collapsible设置与面板折叠相关的配置，还可以使用floating和shadow设置浮动阴影效果。

Ext.TabPanel

Ext.TabPanel实际上是多个不同内容的容器，任意组件直接使用add()函数便可添加到Ext.TabPanel中。如果不指定xtype，就会默认使用Ext.Panel为这些内容生产子面板，使用colsable属性：是否显示关闭按钮、调用active()方法表示选择哪个面板

[Center]: https://img-blog.csdn.net/20130811101836109?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center