Ext JS 容器Containers

Ext JS 容器

可以容纳其他组件的组件叫容器(Containers)。容器里面可以运用不同的布局方式来随意添加，插入或删除子组件。Ext.container.Container这个类是所有容器类的基类。

向容器添加控件

1. 直接在items配置属性里写死；
2. 使用容器的add()方法。

看一下例子：

Ext.onReady(function () {    var comp1 = Ext.create('Ext.Component', {        html:'Component 1'    });    var comp2 = Ext.create('Ext.Component', {        html: 'Component 2'    });    var comp3 = Ext.create('Ext.Component', {        html: 'Component 3'    });    var comp4 = Ext.create('Ext.Component', {        html: 'Component 4'    });    var container1 = Ext.create('Ext.container.Container', {        style: { borderColor: 'Red', borderStyle: 'solid', borderWidth: '1px' },        width: '50%',        padding: '5 5 5 5',        //写死        items: [comp3, comp4]    });    // adding compoents into container using items config    var container2 = Ext.create('Ext.container.Container', {        renderTo: Ext.getBody(),        title: 'Container',        border: 1,        width: '50%',        padding:'5 5 5 5',        style: { borderColor: '#000000', borderStyle: 'solid', borderWidth: '1px' },        //写死        items: [comp1, comp2]    });    // adding container into container     container2.add(container1);});

包裹的方式可以从效果图看出来：

注意：Ext JS 4、5以及6版本的容器并没有什么很大的区别，不过付费版本提供了更多的属性和方法。

Ext JS 容器介绍

下表列出了所有Ext JS 6里面重要的容器(xtype是Ext 各种容器和控件的一种缩写，可以直接使用)：

类名 名称 xtype 描述 Ext.container.Viewport 视窗 viewport ViewPort是表示浏览器窗口的可视区域的专用容器。 通常，在Ext JS app中有且只有一个ViewPort，然后由它来分割app的主要区域，如north, west, south, east 和 center。 container 容器 container 提供了对子项目的添加，插入和删除功能的轻量级容器。 因此，只想做简单的添加、排列位置的机能的时候，用这个。 Ext.panel.Panel 面板 panel Panel是带有特定的功能和组件的container。 Panel有header, tool, body, toolbar等组件。 如果用不到这些特定控件的话，请改用container。 Ext.form.Panel 表单 form 标准的表单容器。 Ext.form.FieldContainer 字段 fieldcontainer FieldContainer附带了标签(label)和错误消息(error message)。 表单中常用。 Ext.form.FieldSet 字段组 fieldset Fieldset附属于Ext.form.Panel。本质是封装了一组字段(fields)的容器container。 Ext.grid.Panel 网格 grid 有大量的表单数据时使用，提供了排序，筛选和其他功能。 Ext.container.ButtonGroup 按钮组 buttongroup 以表格的方式安排一组按钮的容器。 Ext.tab.Panel 选项卡 tabpanel 选项卡容器，页面向导常用。 Ext.tree.Panel 树 treepanel 树 Ext.menu.Menu 菜单 menu 可以添加菜单项的容器。 Ext.toolbar.Toolbar 工具条 toolbar 可以存放buttons, text, fill和item之类的工具条。

下面是Demo和效果图：

一、Ext.container.Viewport 视窗

Demo:

Ext.create('Ext.container.Viewport', {    layout: 'border',    items: [{        region: 'north',        html: '<h1 class="x-panel-header">Page Title</h1>',        border: false,        margin: '0 0 5 0'    }, {        region: 'west',        collapsible: true,        title: 'Navigation',        width: 150        // could use a TreePanel or AccordionLayout for navigational items    }, {        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 itself has no title        activeTab: 0,      // First tab active by default        items: {            title: 'Default Tab',            html: 'The first tab\'s content. Others may be added dynamically'        }    }]});

效果:

二、container 容器

Demo:

// Explicitly create a ContainerExt.create('Ext.container.Container', {    layout: {        type: 'hbox'    },    width: 400,    renderTo: Ext.getBody(),    border: 1,    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},    defaults: {        labelWidth: 80,        // implicitly create Container by specifying xtype        xtype: 'datefield',        flex: 1,        style: {            padding: '10px'        }    },    items: [{        xtype: 'datefield',        name: 'startDate',        fieldLabel: 'Start date'    },{        xtype: 'datefield',        name: 'endDate',        fieldLabel: 'End date'    }]});

效果:

三、Ext.panel.Panel 面板

Demo:

var filterPanel = Ext.create('Ext.panel.Panel', {    bodyPadding: 5, // Don't want content to crunch against the borders    width: 300,    title: 'Filters',    items: [{        xtype: 'datefield',        fieldLabel: 'Start date'    }, {        xtype: 'datefield',        fieldLabel: 'End date'    }],    renderTo: Ext.getBody()});

效果:

四、Ext.form.Panel 表单

Demo:

Ext.create('Ext.form.Panel', {    title: 'Simple Form',    bodyPadding: 5,    width: 350,    // The form will submit an AJAX request to this URL when submitted    url: 'save-form.php',    // Fields will be arranged vertically, stretched to full width    layout: 'anchor',    defaults: {        anchor: '100%'    },    // The fields    defaultType: 'textfield',    items: [{        fieldLabel: 'First Name',        name: 'first',        allowBlank: false    },{        fieldLabel: 'Last Name',        name: 'last',        allowBlank: false    }],    // Reset and Submit buttons    buttons: [{        text: 'Reset',        handler: function() {            this.up('form').getForm().reset();        }    }, {        text: 'Submit',        formBind: true, //only enabled once the form is valid        disabled: true,        handler: function() {            var form = this.up('form').getForm();            if (form.isValid()) {                form.submit({                    success: function(form, action) {                       Ext.Msg.alert('Success', action.result.msg);                    },                    failure: function(form, action) {                        Ext.Msg.alert('Failed', action.result.msg);                    }                });            }        }    }],    renderTo: Ext.getBody()});

效果:

五、Ext.form.FieldContainer 表单字段

Demo:

Ext.create('Ext.form.Panel', {    title: 'FieldContainer Example',    width: 550,    bodyPadding: 10,    items: [{        xtype: 'fieldcontainer',        fieldLabel: 'Last Three Jobs',        labelWidth: 100,        // The body area will contain three text fields, arranged        // horizontally, separated by draggable splitters.        layout: 'hbox',        items: [{            xtype: 'textfield',            flex: 1        }, {            xtype: 'splitter'        }, {            xtype: 'textfield',            flex: 1        }, {            xtype: 'splitter'        }, {            xtype: 'textfield',            flex: 1        }]    }],    renderTo: Ext.getBody()});

效果:

六、Ext.form.FieldSet 表单字段组

Demo:

Ext.create('Ext.form.Panel', {    title: 'Simple Form with FieldSets',    labelWidth: 75, // label settings here cascade unless overridden    url: 'save-form.php',    frame: true,    bodyStyle: 'padding:5px 5px 0',    width: 550,    renderTo: Ext.getBody(),    layout: 'column', // arrange fieldsets side by side    items: [{        // Fieldset in Column 1 - collapsible via toggle button        xtype: 'fieldset',        columnWidth: 0.5,        title: 'Fieldset 1',        collapsible: true,        defaultType: 'textfield',        defaults: {            anchor: '100%'        },        layout: 'anchor',        items: [{            fieldLabel: 'Field 1',            name: 'field1'        }, {            fieldLabel: 'Field 2',            name: 'field2'        }]    }, {        // Fieldset in Column 2 - collapsible via checkbox, collapsed by default, contains a panel        xtype: 'fieldset',        title: 'Show Panel', // title or checkboxToggle creates fieldset header        columnWidth: 0.5,        checkboxToggle: true,        collapsed: true, // fieldset initially collapsed        layout: 'anchor',        items: [{            xtype: 'panel',            anchor: '100%',            title: 'Panel inside a fieldset',            frame: true,            height: 52        }]    }]});

效果:

七、Ext.grid.Panel 网格

Demo:

Ext.create('Ext.data.Store', {    storeId: 'simpsonsStore',    fields:[ 'name', 'email', 'phone'],    data: [        { name: 'Lisa', email: '[e-mail]', phone: '555-111-1224' },        { name: 'Bart', email: '[e-mail]', phone: '555-222-1234' },        { name: 'Homer', email: '[e-mail]', phone: '555-222-1244' },        { name: 'Marge', email: '[e-mail]', phone: '555-222-1254' }    ]});Ext.create('Ext.grid.Panel', {    title: 'Simpsons',    store: Ext.data.StoreManager.lookup('simpsonsStore'),    columns: [        { text: 'Name', dataIndex: 'name' },        { text: 'Email', dataIndex: 'email', flex: 1 },        { text: 'Phone', dataIndex: 'phone' }    ],    height: 200,    width: 400,    renderTo: Ext.getBody()});

效果:

八、Ext.container.ButtonGroup 按钮组

Demo:

Ext.create('Ext.panel.Panel', {    title: 'Panel with ButtonGroup',    width: 400,    height: 300,    renderTo: document.body,    bodyPadding: 10,    html: 'HTML Panel Content',    tbar: [{        xtype: 'buttongroup',        columns: 3,        title: 'Clipboard',        items: [{            text: 'Paste',            scale: 'large',            rowspan: 3,            iconCls: 'add',            iconAlign: 'top',            cls: 'btn-as-arrow'        }, {            xtype: 'splitbutton',            text: 'Menu Button',            scale: 'large',            rowspan: 3,            iconCls: 'add',            iconAlign: 'top',            arrowAlign: 'bottom',            menu: [{                text: 'Menu Item 1'            }]        }, {            xtype: 'splitbutton',            text: 'Cut',            iconCls: 'add16',            menu: [{                text: 'Cut Menu Item'            }]        }, {            text: 'Copy',            iconCls: 'add16'        }, {            text: 'Format',            iconCls: 'add16'        }]    }]});

效果:

九、Ext.tab.Panel 选项卡

Demo:

Ext.create('Ext.tab.Panel', {    width: 300,    height: 200,    activeTab: 0,    bodyPadding: 10,    tabPosition: 'bottom',    items: [{        title: 'Tab 1',        html: 'A simple tab'    }, {        title: 'Tab 2',        html: 'Another one'    }],    renderTo: Ext.getBody()});

效果:

十、Ext.tree.Panel 树

Demo:

Ext.define('myApp.TerritoryRoot', {    extend: 'Ext.data.TreeModel',    childType: 'myApp.Territory',    fields: [{        name: 'text',        mapping: 'name'    }]});Ext.define('myApp.Territory', {    extend: 'Ext.data.TreeModel',    childType: 'myApp.Country',    fields: [{        name: 'text',        mapping: 'name'    }]});Ext.define('myApp.Country', {    extend: 'Ext.data.TreeModel',    childType: 'myApp.City',    fields: [{        name: 'text',        mapping: 'name'    }]});Ext.define('myApp.City', {    extend: 'Ext.data.TreeModel',    fields: [{        name: 'text',        mapping: 'name'    }]});Ext.create('Ext.tree.Panel', {    renderTo: document.body,    height: 200,    width: 400,    title: 'Sales Areas',    rootVisible: false,    store: {        model: 'myApp.TerritoryRoot', // Needs to be this so it knows to create 'Country' child nodes        root: {            children: [{                name: 'Europe, ME, Africa',                children: [{                    name: 'UK of GB & NI',                    children: [{                        name: 'London',                        leaf: true                    }]                }]            }, {                name: 'North America',                children: [{                    name: 'USA',                    children: [{                        name: 'Redwood City',                        leaf: true                    }]                }]            }]        }    }});

效果:

十一、Ext.menu.Menu 菜单

Demo:

Ext.create('Ext.menu.Menu', {    width: 100,    margin: '0 0 10 0',    floating: false, // usually you want this set to True (default)    renderTo: Ext.getBody(), // usually rendered by it's containing component    items: [{        text: 'regular item 1'    }, {        text: 'regular item 2'    }, {        text: 'regular item 3'    }]});Ext.create('Ext.menu.Menu', {    width: 100,    plain: true,    floating: false, // usually you want this set to True (default)    renderTo: Ext.getBody(), // usually rendered by it's containing component    items: [{        text: 'plain item 1'    }, {        text: 'plain item 2'    }, {        text: 'plain item 3'    }]});

效果:

十二、Ext.toolbar.Toolbar 工具条

Demo:

Ext.create('Ext.toolbar.Toolbar', {    renderTo: document.body,    width: 500,    items: [{            // xtype: 'button', // default for Toolbars            text: 'Button'        }, {            xtype: 'splitbutton',            text: 'Split Button'        },        // begin using the right-justified button container        '->', // same as { xtype: 'tbfill' }        {            xtype: 'textfield',            name: 'field1',            emptyText: 'enter search term'        },        // add a vertical separator bar between toolbar items        '-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator        'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem        {            xtype: 'tbspacer'        }, // same as ' ' to create Ext.toolbar.Spacer        'text 2', {            xtype: 'tbspacer',            width: 50        }, // add a 50px space        'text 3'    ]});

效果: