Ext.js 集装箱

tech2022-09-19 130

1.容器嵌套

1.1.Ext.js 容器内的组件

1.1.1 语法

var component1 = Ext.create('Ext.Component', { html:'First Component' }); Ext.create('Ext.container.Container', { renderTo: Ext.getBody(), items: [component1] });

1.1.2 代码

<!DOCTYPE html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.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' }); Ext.create('Ext.container.Container', { renderTo: Ext.getBody(), title: 'Container', border: 1, width: '50%', style: {borderStyle: 'solid', borderWidth: '2px' }, items: [component1, component2, component3] }); }); </script> </head> <body> </body> </html>

1.1.3 效果

2.2 Ext.js 容器内的容器

2.2.1 语法

var container = Ext.create('Ext.container.Container', { items: [component3, component4] }); Ext.create('Ext.container.Container', { renderTo: Ext.getBody(), items: [container] });

2.2.2 举例

<!DOCTYPE html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.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>

2.2.3 运行效果

1.3 容器嵌套

2. 容器类型

2.1 Ext.js Ext.panel.Panel容器

2.1.1 语法

Ext.create('Ext.panel.Panel', { items: [child1, child2] // this way we can add differnt child elements to the container as container items. });

2.1..2 代码

2.1.3 结果

2.2 Ext.js Ext.form.Panel容器

2.2.1 语法

Ext.create('Ext.form.Panel', { items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。 });

2.2.2

2.2.3

2.3 Ext.js Ext.tab.Panel容器

2.3.1

Ext.create('Ext.tab.Panel', { items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。 });

2.3.2

<!DOCTYPE html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.create('Ext.tab.Panel', { renderTo: Ext.getBody(), height: 100, width: 200, items: [{ xtype: 'panel', title: 'Tab One', html: 'The first tab', listeners: { render: function() { Ext.MessageBox.alert('Tab one', 'Tab One was clicked.'); } } },{ // xtype for all Component configurations in a Container title: 'Tab Two', html: 'The second tab', listeners: { render: function() { Ext.MessageBox.alert('Tab two', 'Tab Two was clicked.'); } } }] }); }); </script> </head> <body> </body> </html>

2.3.3

2.4.Ext.js Ext.container.Viewport容器

2.4.1 语法

Ext.create('Ext.container.Viewport', { items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。 });

2.4.2

2.4.3

2.5 代码分析

最新回复(0)