ExtJs布局之tabPanel

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<! DOCTYPE html> < html > < head >      < title >ExtJs</ title >          < meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>      < link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">          < script type="text/javascript" src="ExtJs/ext-all.js"></ script >          < script type="text/javascript" src="ExtJs/bootstrap.js"></ script >          < script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></ script >        < script type="text/javascript">              Ext.onReady(function(){          var tabPanel = Ext.create('Ext.tab.Panel', {            title: 'Ext.tab.Panel',            frame: true,            height: 150,            width: 900,            activeTab: 0,            renderTo: Ext.getBody(),            items: [{              title: 'tab标签页1',              html: 'tab标签页1的内容'            }],            buttons: [{              text: '增加标签页',              handler: addTabPage            }]          });          function addTabPage() {            var index = tabPanel.items.length + 1;            var tabPage = tabPanel.add({              title: 'tab标签页' + index,              html: 'tab标签页' + index + '内容',              closable: 'true'            })            tabPanel.setActiveTab(tabPage);          }        });      </ script > </ head > < body >   </ body > </ html >