Ext JS 容器Containers

最新推荐文章于 2024-06-06 10:07:07 发布
最新推荐文章于 2024-06-06 10:07:07 发布
阅读量4k 收藏 2
点赞数
分类专栏： ExtJS-Tutorial翻译 文章标签： ext

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视窗viewportViewPort是表示浏览器窗口的可视区域的专用容器。 通常，在Ext JS app中有且只有一个ViewPort，然后由它来分割app的主要区域，如north, west, south, east 和 center。
container容器container提供了对子项目的添加，插入和删除功能的轻量级容器。 因此，只想做简单的添加、排列位置的机能的时候，用这个。
Ext.panel.Panel面板panelPanel是带有特定的功能和组件的container。 Panel有header, tool, body, toolbar等组件。 如果用不到这些特定控件的话，请改用container。
Ext.form.Panel表单form标准的表单容器。
Ext.form.FieldContainer字段fieldcontainerFieldContainer附带了标签(label)和错误消息(error message)。 表单中常用。
Ext.form.FieldSet字段组fieldsetFieldset附属于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 Container
Ext.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: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', 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'
    ]
});

效果:

这里写图片描述

wangchunbo007
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS 4.2心得和总结：布局系统详解（Ext.layout.container）
小硒---代码无疆
12-25 1万+
在ExtJS 4.2中，提供了十几种布局，我们可以在api中看到如下图： 我们可以看到很多，比如Accordion、Border、Column、Fit、Form等。下面我们来看一下具体的用法。 下面是将要用到的html代码： 简单创建Container窗口 Absolute Layout Border Layout Accordion Layout Card Lay
Ext.Container类学习
张波的技术积累
07-24 7791
1：基本知识    Base class for any Ext.BoxComponent that may contain other Components. Containers handle the basic behavior of containing items, n
EXT:container - 高度定制的TYPO3内容元素容器扩展
gitblog_00100的博客
06-06 409
EXT:container - 高度定制的TYPO3内容元素容器扩展 项目地址:https://gitcode.com/b13/container 项目简介 EXT:container 是一个为TYPO3开发的创新性扩展，旨在创建和管理嵌套的内容元素网格。它提供了一种简洁而强大的方式来构建适合不同项目需求的自定义容器。EXT:container 不依赖默认的容器设置，而是完全依据项目需求进行个性化...
Ext01
w_wind的专栏
01-15 347
1.ext怎么引入图片 用panel的html属性直接添加html代码,  html:'<img width=200 height:200 src="image/one.jpg"/>',图片的路径:我的Main.js在view下,通过app.js的映射Main.js的路径已经是app文件夹的路径 2.设置panel之间的距离 Ext的布局和java Swing非常
ExtJs之gridPanel
idomyway的博客
11-25 444
需求Extjs GridPanel 提供了非常强大数据表格功能，在GridPanel可以展示数据列表，可以对数据列表进行展示、选择、编辑等创建gridPanel的步骤1.定义数据模型Ext.define("MyApp.model.User", { extend: "Ext.data.Model", fields: [ { name: 'name', type: 'st
Ext Js入门第10篇-使用Ext.container.Viewpost整体布局
qq_29258777的博客
05-26 339
Ext.container.Viewport是一款非常常用的布局容器，它会自动把自己输出到HTMl页面，而且在页面的上中下左右中5个布局 Ext.onReady(function() { //创建一个TreeStore，TreeStore负责为Tree提供数据 var store=Ext.create('Ext.data.TreeStore',
containers:生物信息学容器
05-02
有关BioContainers的最新信息，请访问货柜批准的生物信息学容器的存储库链接： 网页： : 项目定义： : 贡献规则： : 该项目的Wiki： : 容器： : 电子邮件： 执照阿帕奇2 内容必需品1.1。 什么是生物容器1.2。 目标...
google-containers:Google容器
05-16
google-containers Google Containers Mirror k8s安装教程及学习笔记 对于国内开发来说安装k8s环境是一场噩梦，本教程的目的是让国内开发者能够用最短的时间成功部署k8s。 由于k8s包涵的内容繁多，希望有更多的...
Inclavare Containers容器技术概述.pptx
10-11
Inclavare Containers是一种创新的容器运行时技术，旨在将可信计算带入云原生生态系统。该技术的主要目标是通过硬件加密来实现隔离，确保在云计算环境中租户工作负载的安全性。Inclavare Containers的出现是为了减少...
Inclavare Containers容器技术概述.pdf
10-11
Inclavare Containers是针对云原生生态系统的创新性容器运行时技术，旨在将安全计算（Confidential Computing）引入云计算环境。这项技术的主要目标是通过硬件加密来实现更强大的隔离，降低租户工作负载的可信计算基...
docker containers
最新发布
06-12
Virtual machines vs containers 6 Lab Setup 6 Prerequisites: 6 Building your first Docker image 8 Running your first Docker container 11 Images and containers 14 How are local docker images stored? 14 ...
container-js:ContainerJS是JavaScript应用程序的依赖注入主体
05-18
关于 ContainerJS是JavaScript Web应用程序的依赖注入容器。 特征 依赖性解析和注入 ContainerJS负责创建容器管理的对象，以及解析和注入其依赖的组件。 您可以通过JavaScript代码在组件定义中指定依赖项，也可以在类中声明性地定义。 由于JavaScript中没有接口，因此依赖项解析是通过分配给组件的名称完成的。 通过使用依赖项注入容器，您可以自动化布线。 由于组件是由容器缓存的，因此可以减少不必要对象的创建。 延迟模块加载 它通过与require.js一起懒惰地异步加载所需的模块。 在用户操作等实际使用该组件之前，您可以延迟JavaScript源的加载和评估。 支持面向方面的编程 您可以将方法拦截器编织到容器管理的组件。 您可以将跨类功能（例如性能度量）聚合到拦截器中。 执照 依赖库 ContainerJS依赖于以下模块。 （）
(20)ExtJS之Ext.form.FieldContainer容器字段
虚心求学_一点一滴
02-27 7088
JS文件： //4:Ext.form.FieldContainer示例,需要将多个字段或者组件作为一个表单项展现的时候 Ext.onReady(function(){ Ext.QuickTips.init();//初始化提示 Ext.create('Ext.form.FormPanel',{ title:'Ext.form.FieldContainer示例', width:300,
Ext JS 6组件，容器， 布局
robin xiong的专栏
08-16 7927
组件Ext JS应用的UI是由一个或者多个widgets组称， 我们称之为Components. 所有的组件都是Ext.Component的子类，允许组件自动管理生命周期， 包括instantiation, rendering, sizing and positioning, 以及destruction. Ext JS提供了很多直接可以使用的组件， 能过简单继承，可以创建自定义组件。The Com
node.js运行js_在生产中，永远不要直接针对Node.js运行。 也许。
cumian8165的博客
08-06 440
node.js运行jsSometimes I wonder if I know much of anything at all. 有时我想知道我是否一无所知。 Just a few weeks ago I was talking to a friend who mentioned off-hand, “you would never run an application directly aga...
Extjs4中的Form之fieldcontainer的使用
jcy472578的专栏
11-26 2838
Ext.onReady(function(){ Ext.QuickTips.init(); Ext.create("Ext.form.Panel",{ title:'本地FieldContainer实例', renderTo:'formDemo', bodyPadding:'5 5 5 5', height:100, width:500, frame:true, d
ExtJs6学习(四)【组件和容器】
极客神殿
11-08 1165
组件和容器组件模型XType和ComponentManager XType 定义：XType是一个纯JavaScript对象，包含一个xtype属性，属性的值是一个字符串，标识该XType对应的类。 作用：Xtype允许组件延迟实例化，加速复杂用户界面的类的实例化，并大大提高代码的整洁度。 ComponentManager 定义：ExtJs系统会自动将部件的XType注册到ComponentMana
EXTJS 4.2 资料 控件之 xtype: "fieldcontainer",追加html
04-02 322
{ xtype: "fieldcontainer", layout: "hbox", items: [ { fieldLabel: '素材目录', ...
ExtJS组件Container
Kevin.B
11-24 650
初用ExtJS, 感觉里面的组件有一部分好用,但有个别的组件非常之难用, 又不容易控制.  这不, 本人最近使用到了Container组件, 想将两个Container分成左右显示, 但被其宽度设置打败了.  竟然不能五五分设宽度(如: 两个不能50%), 因为左边的内容少, 而右边的内容多. 设置50%后右边的内容显示在了左边的下面.  只能设置左边为30%了, 但是在1024*768的分
containers.ext4
07-28
ext4 是一种文件系统，常用于 Linux 操作系统中的容器技术。容器是一种虚拟化技术，可以将应用程序及其依赖项打包在一个独立的环境中，以便在不同的计算机或操作系统上运行。ext4 文件系统提供了在容器中存储和管理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值