Freelance Trainer: Sencha ExtJS , Ext.Component Class

Wednesday, January 7, 2015

Sencha ExtJS , Ext.Component Class

Base class for all Ext components. All subclasses of Component may participate in the automated Ext component lifecycle of creation, rendering and destruction which is provided by the Container class. Components may be added to a Container through the items config option at the time the Container is created, or they may be added dynamically via the add method.

The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.

All Components are registered with the Ext.ComponentManager on construction so that they can be referenced at any time via Ext.getCmp, passing the id.

All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component.

See the Creating new UI controls tutorial for details on how and to either extend or augment ExtJs base classes to create custom Components.

Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. This is the list of all valid xtypes:

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
progress         Ext.ProgressBar
slider           Ext.slider.Single
spacer           Ext.toolbar.Spacer
splitbutton      Ext.button.Split
tabpanel         Ext.tab.Panel
treepanel        Ext.tree.Panel
viewport         Ext.container.Viewport
window           Ext.window.Window

Toolbar components
---------------------------------------
paging           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

It should not usually be necessary to instantiate a Component because there are provided subclasses which implement specialized Component use cases which over most application needs. However it is possible to instantiate a base Component, and it will be renderable, or will particpate in layouts as the child item of a Container: Ext.Component component

    Ext.create('Ext.Component', {
        html: 'Hello world!',
        width: 300,
        height: 200,
        padding: 20,
        style: {
            color: '#FFFFFF',
            backgroundColor:'#000000'
        },
        renderTo: Ext.getBody()
    });

The Component above creates its encapsulating div upon render, and use the configured HTML as content. More complex internal structure may be created using the renderTpl configuration, although to display database-derived mass data, it is recommended that an ExtJS data-backed Component such as a {Ext.view.DataView DataView}, or {Ext.grid.Panel GridPanel}, or TreePanel be used.

Defined By

About Hery

Search This Blog

Wednesday, January 7, 2015

Sencha ExtJS , Ext.Component Class

Config Options

CSS Class configs

Other Configs

Properties

Methods

Events

No comments:

Post a Comment