各种类型的容器Ext.panel.Panel,Ext.form.Panel,Ext.tab.Panel和Ext.container.Viewport是Ext JS中经常使用的容器。 下面是显示如何使用这些容器的示例。
编号 | 容器类型和说明 |
---|---|
1 | Ext.panel.Panel 此示例显示一个Ext.panel.Panel容器 |
2 | Ext.form.Panel 此示例显示一个Ext.form.Panel容器 |
3 | Ext.tab.Panel 此示例显示一个Ext.tab.Panel容器 |
4 | Ext.container.Viewport 此示例显示一个Ext.container.Viewport容器 |
1.Ext.js Ext.panel.Panel容器
描述
Ext.panel.Panel:这是允许在正常面板中添加项目的基本容器。
句法
这里是创建Ext.panel.Panel容器的简单语法:
Ext.create('Ext.panel.Panel', { items: [child1, child2] // this way we can add differnt child elements to the container as container items. });
例
下面是一个简单的例子显示Ext.panel.Panel Container
<!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 childPanel1 = Ext.create('Ext.Panel', { html: 'First Panel' }); var childPanel2 = Ext.create('Ext.Panel', { html: 'Another Panel' }); Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), width: 100, height : 100, border : true, frame : true, items: [ childPanel1, childPanel2 ] }); }); </script> </head> <body> </body> </html>
这将产生以下结果:
2.Ext.js Ext.form.Panel容器
描述
Ext.form.Panel:Form面板为表单提供了一个标准容器,它本质上是一个标准的Ext.panel.Panel,它自动创建一个用于管理任何Ext.form.field.Field对象的BasicForm。
语法
这里是创建Ext.form.Panel容器的简单语法。
Ext.create('Ext.form.Panel', { items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。 });
例子
下面是一个简单的例子显示Ext.form.Panel容器。
<!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 child1 = Ext.create('Ext.Panel',{ html: 'Text field' }); var child2 = Ext.create('Ext.Panel',{ html: 'Text field' }); Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), width: 100, height : 100, border : true, frame : true, layout: 'auto',// auto is one of the layout type. items: [child1, child2] }); }); </script> </head> <body> </body> </html>
3.ext.js Ext.tab.Panel容器
描述
Ext.tab.Panel : 标签面板就像一个普通的面板,但支持卡标签面板布局。
语法
以下是创建Ext.tab.Panel容器的简单语法。
Ext.create('Ext.tab.Panel', { items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。 });
例子
以下是一个显示Ext.tab.Panel容器的简单示例。
<!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>
这将产生以下结果:
4.Ext.js Ext.container.Viewport容器
描述
Ext.container.Viewport:Viewport是一个容器,它会自动调整大小到整个浏览器窗口的大小。 然后,您可以在其中添加其他ExtJS UI组件和容器。
语法
这里是创建Ext.container.Viewport容器的简单语法。
Ext.create('Ext.container.Viewport', { items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。 });
例子
下面是一个简单的例子显示Ext.container.Viewport容器。
<!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 childPanel1 = Ext.create('Ext.panel.Panel', { title: 'Child Panel 1', html: 'A Panel' }); var childPanel2 = Ext.create('Ext.panel.Panel', { title: 'Child Panel 2', html: 'Another Panel' }); Ext.create('Ext.container.Viewport', { renderTo: Ext.getBody(), items: [ childPanel1, childPanel2 ] }); }); </script> </head> <body> </body> </html>
这将产生以下结果 :