ExtJS基础第四讲学习

心已赠人 2022-04-17 00:28 206阅读 0赞

第四讲：工具栏和菜单栏

一、头部工具栏。

准备工作，创建一个Panel，代码如下。

添加头部工具栏和提示信息，代码如下。

二、工具栏组件Toolbar

示例二：添加工具栏。

常用工具。

Ext.Toolbar.Fill() 填充，可用来做对齐

Ext.Toolbar.TextItem() 文本

Ext.Toolbar.Spacer() 空格

Ext.Toolbar.Separator() 分隔线

Ext.Toolbar.Button()按钮

示例三：带工具的工具栏。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { //初始化提示信息 Ext.QuickTips.init(); &nbsp; var&nbsp;mypanel = new&nbsp;Ext.Panel({ renderTo:hello, width:300, height:300, title:"Panel", html:"测试Panel", floating:true, x:300, y:100, //头部工具栏 tools:[ {id:"save",qtip:"保存"}, {id:"help",qtip:"帮助"}, {id:"close",qtip:"关闭"} ], //工具栏 tbar:new&nbsp;Ext.Toolbar({ width:300, height:20 }) }); &nbsp; mypanel.getTopToolbar().add(new&nbsp;Ext.Toolbar.TextItem("工具栏")); mypanel.getTopToolbar().add(new&nbsp;Ext.Toolbar.Fill()); mypanel.getTopToolbar().add(new&nbsp;Ext.Toolbar.Button({text:"保存"})); mypanel.getTopToolbar().add(new&nbsp;Ext.Toolbar.Separator()); mypanel.getTopToolbar().add(new&nbsp;Ext.Toolbar.Button({text:"另存为"})); } ); </td> 
 </tr> 
 </tbody> 
</table>

Button中有一个menu属性，用来设置该按钮的下拉菜单。

示例四：

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { //初始化提示信息 Ext.QuickTips.init(); &nbsp; var&nbsp;mypanel = new&nbsp;Ext.Panel({ renderTo:hello, width:300, height:300, title:"Panel", html:"测试Panel", floating:true, x:300, y:100, //头部工具栏 tools:[ {id:"save",qtip:"保存"}, {id:"help",qtip:"帮助"}, {id:"close",qtip:"关闭"} ], //工具栏 tbar:new&nbsp;Ext.Toolbar({ width:300, height:20 }) }); &nbsp; var&nbsp;mymenu = new&nbsp;Ext.menu.Menu({ items:[ {text:"保存"}, {text:"另存为"} ] }); &nbsp; &nbsp; mypanel.getTopToolbar().add(new&nbsp;Ext.Toolbar.TextItem("工具栏")); mypanel.getTopToolbar().add(new&nbsp;Ext.Toolbar.Fill()); mypanel.getTopToolbar().add(new&nbsp;Ext.Toolbar.Button({text:"保存"})); mypanel.getTopToolbar().add(new&nbsp;Ext.Toolbar.Separator()); mypanel.getTopToolbar().add(new&nbsp;Ext.Toolbar.Button({text:"另存为"})); mypanel.getTopToolbar().add(new&nbsp;Ext.Toolbar.Button({text:"文件",menu:mymenu})); } ); </td> 
 </tr> 
 </tbody> 
</table>

Ext.Toolbar.SplitButton(),分隔按钮，使用该按钮作为下拉菜单按钮。

三、菜单栏。

示例五：响应事件

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &nbsp;&nbsp;&lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;MenuBar&lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="../Ext/ext-all-debug.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="MenuBar.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"&gt;&lt;/link&gt; &nbsp;&nbsp;&lt;/head&gt; &nbsp;&nbsp;&lt;body&gt; &nbsp;&nbsp;&lt;div id="showMenuBar"&gt;显示菜单&lt;/div&gt; &nbsp;&nbsp;&lt;/body&gt; &lt;/html&gt; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

示例六：显示菜单

文本菜单项：仅仅显示文本，没有其他作用。

单选、复选菜单项：Ext.menu.CheckItem，

当不设置其group属性时，则为复选菜单项，否则为单选菜单项。

日期选择及颜色选择菜单

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { //菜单栏 var&nbsp;myMenu = new&nbsp;Ext.menu.Menu(); //字体菜单 myMenu.add({ text:"字体大小", menu:[ new&nbsp;Ext.menu.CheckItem({text:"一号",group:"font"}), new&nbsp;Ext.menu.CheckItem({text:"二号",group:"font"}) ] }); //字体效果菜单 myMenu.add({ text:"字体效果", menu:[ new&nbsp;Ext.menu.CheckItem({text:"粗体"}), new&nbsp;Ext.menu.CheckItem({text:"斜体"}) ] }); //其他菜单 myMenu.add({ text:"其他", menu:[ {text:"时间选择",menu:new&nbsp;Ext.menu.DateMenu()}, {text:"颜色选择",menu:new&nbsp;Ext.menu.ColorMenu()} ] }); &nbsp; var&nbsp;divShow = Ext.get("showMenuBar"); divShow.on("click",function(){ myMenu.show(divShow); } ); } ); </td> 
 </tr> 
 </tbody> 
</table>

N级菜单