描述
Ext.tab.Panel : Tab panel 像一个正常的panel ,但是支持层外的卡片状tab panel。
语法
这里是一个创建 Ext.tab.Panel 容器的语法示例:
- Ext.create('Ext.tab.Panel', {
- items: [child1, child2] // this way we can add differnt child elements to the container as container items.
- });
例子
下面是一个Ext.tab.Panel容器的简单例子:
- <!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 () {
- 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>
转载本站内容时,请务必注明来自W3xue,违者必究。