<1>簡單工具條
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ext Buttons</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="../examples.js"></script><script type="text/javascript">Ext.onReady(function(){var tb = new Ext.Toolbar();tb.render('toolbar');tb.add({text:'建立',handler:function(){Ext.Msg.alert('提示','建立');}},{text:'修改',handler:function(){Ext.Msg.alert('提示','修改');}},{text:'刪除',handler:function(){Ext.Msg.alert('提示','刪除');}},{text:'顯示',handler:function(){Ext.Msg.alert('提示','顯示');}});tb.doLayout();});</script></head><body><div id = "toolbar"></div></body></html>
<2>簡單菜單
Ext.onReady(function(){//工具條var tb = new Ext.Toolbar();tb.render('toolbar');//菜單var fileMenu = new Ext.menu.Menu();fileMenu.add({text:'建立'});fileMenu.add('-');fileMenu.add({text:'開啟'});fileMenu.add('-');fileMenu.add({text:'儲存'});fileMenu.add('-');fileMenu.add({text:'關閉'});//為工具條添加按鈕tb.add({text:'檔案',menu:fileMenu});tb.doLayout();});
另一種寫法：
Ext.onReady(function(){// 建立工具條var tb = new Ext.Toolbar();tb.render('toolbar');var menu1 = new Ext.menu.Menu({items: [{text: '建立'},{text: '開啟'},{text: '關閉'}]});var menu2 = new Ext.menu.Menu({items: [{text: '複製'},{text: '剪下'},{text: '撤銷'}]});var menu3 = new Ext.menu.Menu({items: [{text: 'HTML'},{text: 'Java'},{text: 'c++'}]});// 為工具條添加4個按鈕tb.add({text: '檔案',menu: menu1},{text: '編輯',menu: menu2},{text: '語言',menu: menu3});tb.doLayout();});
<3>多級菜單
Ext.onReady(function(){// 建立工具條var tb = new Ext.Toolbar();tb.render('toolbar');var menuHistory = new Ext.menu.Menu({items:[{text:'今天'},{text:'昨天'},{text:'一周'},{text:'一月'},]});var menu1 = new Ext.menu.Menu({items: [{text: '建立'},{text: '開啟'},{text:'曆史',menu:menuHistory},//嵌套子功能表{text: '關閉'}]});var menu2 = new Ext.menu.Menu({items: [{text: '複製'},{text: '剪下'},{text: '撤銷'}]});var menu3 = new Ext.menu.Menu({items: [{text: 'HTML'},{text: 'Java'},{text: 'c++'}]});// 為工具條添加4個按鈕tb.add({text: '檔案',menu: menu1},{text: '編輯',menu: menu2},{text: '語言',menu: menu3});tb.doLayout();});
<4>多選菜單和單選菜單
Ext.onReady(function(){// 建立工具條var tb = new Ext.Toolbar();tb.render('toolbar');var checkItem1 = new Ext.menu.CheckItem({text:'粗體',checked:'true',checkHandler:function(item,checked){Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '粗體');}});var checkItem2 = new Ext.menu.CheckItem({text:'斜體',checkHandler:function(item,checked){Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '斜體');}});//字形菜單var menu1 = new Ext.menu.Menu({items:[checkItem1,checkItem2]});//字型菜單var radioItem1 = new Ext.menu.CheckItem({text:'宋體',group:'font',checked:'true',checkHandler:function(item,checked){Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '宋體');}});var radioItem2 = new Ext.menu.CheckItem({text:'楷體',group:'font',checkHandler:function(item,checked){Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '楷體');}});var radioItem3 = new Ext.menu.CheckItem({text:'黑體',group:'font',checkHandler:function(item,checked){Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '黑體');}});var menu2 = new Ext.menu.Menu({items:[radioItem1,radioItem2,radioItem3]});// 為工具條添加4個按鈕tb.add({text: '字形',menu: menu1},{text: '字型',menu: menu2});tb.doLayout();});
<5>Tab標籤
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> <title>TabPanel</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all-debug.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var i = 4 ; //注意:每個Tab標籤只渲染一次 var tabs = new Ext.TabPanel({ renderTo: Ext.getBody(),//綁定在body標籤上 activeTab: 0,//初始顯示第幾個Tab頁 deferredRender: false,//是否在顯示每個標籤的時候再渲染標籤中的內容.預設true tabPosition: 'top',//表示TabPanel頭顯示的位置,只有兩個值top和bottom.預設是top. enableTabScroll: true,//當Tab標籤過多時,出現捲軸 items: [//Tab的個數 { title: '管理學科', html: '管理學科面板', listeners: {render:function(){//為每個Tab標籤添加監聽器.當標籤渲染時觸發 Ext.Msg.alert("管理學科","渲染管理學科面板成功") ; }} },{ title: '管理年級', html: '管理年級面板' },{ title: '管理班級', html: '管理班級面板', closable: true //可以關閉 },{ title: '管理保障類型', html: '管理保障類型面板', closable: true //可以關閉 }], //添加一個底部工具列,並且在該工具列上添加兩個按鈕 bbar:[{ text:'添加標籤', //添按鈕被點擊時觸發這個匿名函數(注意:該屬性在button中能查到). handler:function(){ var id = i ; //添加一個Tab標籤tabs.add({ id: id, title:'Tab '+i, closable: true }) ; i=i+1; tabs.setActiveTab(id) ;//當id為"id"的Tab標籤顯示(變為活動標籤). }},{ text:'刪除標籤', handler: function(){ //獲得當前活動標籤的引用 var t = tabs.getActiveTab(); if(t.closable){ tabs.remove(t);//刪除標籤 }else{ Ext.Msg.alert("提示","該標籤不能關閉") ; } } }] }); //把TabPanel組件充滿整個body容器. new Ext.Viewport({ layout: 'fit', items: tabs }); }); </script> </head> <body> <script type="text/javascript" src="../shared/examples.js"></script> </body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
