Ext学习心得（一）

69 阅读 0 评论 46 点赞

我是靠谱客的博主危机手机，这篇文章主要介绍Ext学习心得（一），现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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

复制代码

1
2
3
4
layout: {
    type: 'vbox',
    align: 'left'
}

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

复制代码

1
2
3
4
5
6
7
// 单个组件
items: {...},
layout: 'fit',    // 布局设置为fit    填充容器

// 多个子组件
items: [{...}, {...}],
layout: 'hbox', // 布局设置为hbox

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

复制代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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

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

复制代码

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