描述
容器内部容器:我们可以在其他容器内部的容器作为父容器的组件以及其他组件。
语法
这里是使用容器内容器的简单语法:
- var container = Ext.create('Ext.container.Container', {
- items: [component3, component4]
- });
- Ext.create('Ext.container.Container', {
- renderTo: Ext.getBody(),
- items: [container]
- });
您可以将容器作为其他容器中的项目
例
下面是一个简单的例子,显示容器内的容器:
- <!DOCTYPE html>
- <html>
- <head>
- <link href="//cdn.bootcss.com/extjs/6.2.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
- <script type="text/javascript" src="//cdn.bootcss.com/extjs/6.2.0/ext-all.js"></script>
- <script type="text/javascript">
- Ext.onReady(function () {
- var component1 = Ext.create('Ext.Component', {
- html:'First Component'
- });
- var component2 = Ext.create('Ext.Component', {
- html: 'Second Component'
- });
- var component3 = Ext.create('Ext.Component', {
- html: 'Third Component'
- });
- var component4 = Ext.create('Ext.Component', {
- html: 'Fourth Component'
- });
- var container = Ext.create('Ext.container.Container', {
- style: {borderStyle: 'solid', borderWidth: '2px' },
- width: '50%',
- items: [component3, component4]
- });
- Ext.create('Ext.container.Container', {
- renderTo: Ext.getBody(),
- title: 'Container',
- border: 1,
- width: '50%',
- style: {borderStyle: 'solid', borderWidth: '2px' },
- items: [component1, component2, container]
- });
- });
- </script>
- </head>
- <body>
- </body>
- </html>
尝试一下
转载本站内容时,请务必注明来自W3xue,违者必究。