1、Ext.toolbar.Toolbar主要配置項
Ext.toolbar.Toolbar配置
| 配置項 | 參數類型 | 說明 |
|---|---|---|
| enableOverflow | Boolean | 設置為true則自動為工具欄添加一個下拉按鈕，用於顯示超過工具欄范圍的按鈕 |
| vertical | Boolean | 設置為true則顯示一個垂直的工具欄，默認為false |
工具欄常用元素
| 工具欄元素名稱 | 說明 |
|---|---|
| Ext.button.Button | 可以加入到工具欄的按鈕組件 |
| Ext.toolbar.Fill | 用於填充滿工具欄的空白元素 |
| Ext.toolbar.Item | 工具欄的基本功能支持 |
| Ext.toolbar.Separator | 工具欄分隔符 |
| Ext.toolbar.Spacer | 工具欄元素之間的間隔符，默認為2px |
| Ext.toolbar.TextItem | 文本元素 |
工具欄常用方法
| 方法名稱 | 參數類型 | 說明 |
|---|---|---|
| add | Mixed arg1,Mixed arg2,... | 用於向工具欄中添加元素，支持變長參數列表，可以一次性加入多個工具欄元素 支持的有效類型包括： Ext.button.Button，一個有效的按鈕配置對象 HtmlElement,標准HTML元素 Field，表單字段 Item，Ext.toolbar.Item子類 String,字符串 '-'創建一個工具欄分割元素 ''創建一個工具欄空白元素 '->'創建一個工具欄Fill元素，填充工具欄空白區域 |
Ext.button.Button主要配置項目
| 配置項 | 類型 | 說明 |
|---|---|---|
| handler | Function | 一個函數，在按鈕被點擊之后觸發 |
| iconCls | String | 一個樣式類，提供在按鈕上顯示的圖標 |
| menu | Mixed | 參數可以是一個菜單對象或者是菜單對象的id，也可以是一個有效的菜單配置對象 |
| text | String | 按鈕上顯示的文字 |
2、基本工具欄
代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 <title>Ext.toolbar.Toolbar工具欄</title> 5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 Ext.onReady(function () { 9 var toolbar = Ext.create("Ext.Toolbar",{ 10 renderTo: Ext.getBody(), 11 width: 500, 12 items: [{ 13 text: "文件", 14 handler: function (btn) { Ext.MessageBox.alert(btn.text); } 15 },{ 16 text:"編輯" 17 },{ 18 text:"格式" 19 }, { 20 text: "查看" 21 }, { 22 text: "幫助" 23 }] 24 }); 25 }); 26 </script> 27 </head> 28 <body> 29 </body> 30 </html>
或
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 <title>Ext.toolbar.Toolbar工具欄</title> 5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 Ext.onReady(function () { 9 var toolbar = new Ext.toolbar.Toolbar({ 10 renderTo: "tb", 11 width: 500, 12 items: [{ 13 text: "文件", 14 handler: function (btn) { alert(btn.text); } 15 },{ 16 text:"編輯" 17 },{ 18 text:"格式" 19 }, { 20 text: "查看" 21 }, { 22 text: "幫助" 23 }] 24 }); 25 }); 26 </script> 27 </head> 28 <body> 29 <div id="tb"> 30 </div> 31 </body> 32 </html>
效果圖：
3、復雜工具欄
代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 <title>Ext.toolbar.Toolbar工具欄</title> 5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 Ext.onReady(function () { 9 var toolbar = Ext.create("Ext.Toolbar", { 10 renderTo: Ext.getBody(), 11 width: 500, 12 items: [{ 13 text: "文件", 14 handler: function (btn) { Ext.MessageBox.alert(btn.text); } 15 }, { 16 text: "編輯" 17 }, { 18 text: "格式" 19 }, { 20 text: "查看" 21 }, { 22 text: "幫助" 23 }, 24 "->", 25 new Ext.form.Field(), { 26 text: "搜索" 27 }] 28 }); 29 }); 30 </script> 31 </head> 32 <body> 33 </body> 34 </html>
效果圖：
4、禁用/啟用工具欄
代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 <title>Ext.toolbar.Toolbar工具欄</title> 5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 Ext.onReady(function () { 9 var toolbar = Ext.create("Ext.Toolbar", { 10 renderTo: "tb", 11 width: 500, 12 items: [{ 13 text: "文件", 14 handler: function (btn) { Ext.MessageBox.alert(btn.text); } 15 }, { 16 text: "編輯" 17 }, { 18 text: "格式" 19 }, { 20 text: "查看" 21 }, { 22 text: "幫助" 23 }, 24 "->", 25 new Ext.form.Field(), { 26 text: "搜索" 27 }] 28 }); 29 30 Ext.get("btnDisable").on("click", function () { 31 toolbar.disable(); 32 }); 33 Ext.get("btnEnable").on("click", function () { 34 toolbar.enable(); 35 }); 36 }); 37 </script> 38 </head> 39 <body> 40 <div id="tb"></div> 41 <input id="btnDisable" type="button" value="禁用" /> 42 <input id="btnEnable" type="button" value="啟用" /> 43 </body> 44 </html>
效果圖：
