3.Toolbar|Menu
目录
一、头部工具栏--tools
二、工具栏组件--Toolbar
三、菜单栏--Menu
一、头部工具栏
示例一：添加头部工具栏和提示信息
Ext.onReady( function() { //初始化提示信息 Ext.QuickTips.init(); var mypanel = new Ext.Panel({ renderTo:hello, width:300, height:300, title:"Panel", html:"测试Panel", floating:true, x:300, y:100, //头部工具栏 tools:[ {id:"save",qtip:"保存"}, //qtip 提示信息 但必须初始化 Ext.QuickTips.init(); {id:"help",qtip:"帮助"}, {id:"close",qtip:"关闭"} ] }); } );
二、工具栏组件Toolbar
示例二：添加工具栏。
Ext.onReady( function() { //初始化提示信息 Ext.QuickTips.init(); var mypanel = new 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 Ext.Toolbar({ width:300, height:20 }) }); } );
常用工具
Ext.Toolbar.Fill() 填充，可用来做对齐
Ext.Toolbar.TextItem() 文本
Ext.Toolbar.Spacer() 空格
Ext.Toolbar.Separator() 分隔线
Ext.Toolbar.Button()按钮
示例三：带工具的工具栏。
Ext.onReady( function() { //初始化提示信息 Ext.QuickTips.init(); var mypanel = new 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 Ext.Toolbar({ width:300, height:20 }) }); mypanel.getTopToolbar().add(new Ext.Toolbar.TextItem("工具栏")); mypanel.getTopToolbar().add(new Ext.Toolbar.Fill()); mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"保存"})); mypanel.getTopToolbar().add(new Ext.Toolbar.Separator()); mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"另存为"})); } );
Button中有一个menu属性，用来设置该按钮的下拉菜单
示例四：
Ext.onReady( function() { //初始化提示信息 Ext.QuickTips.init(); var mypanel = new 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 Ext.Toolbar({ width:300, height:20 }) }); //菜单对象 var mymenu = new Ext.menu.Menu({ items:[ {text:"保存"}, {text:"另存为"} ] }); mypanel.getTopToolbar().add(new Ext.Toolbar.TextItem("工具栏")); mypanel.getTopToolbar().add(new Ext.Toolbar.Fill()); mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"保存"})); mypanel.getTopToolbar().add(new Ext.Toolbar.Separator()); mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"另存为"})); mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"文件",menu:mymenu})); } );
三、菜单栏
示例五：响应事件
<body> <div id="showMenuBar">显示菜单</div> </body>
Ext.onReady( function() { Ext.get("showMenuBar").on("click",function(){//点击页面“显示菜单”div相应事件 alert("fdsf"); } ); } );
示例六：显示菜单
Ext.onReady( function() { //菜单 var myMenu = new Ext.menu.Menu(); //添加文件菜单 myMenu.add({ text:"文件", menu:[ {text:"打开"},//菜单选项 {text:"保存"} ] }); //添加编辑菜单 myMenu.add({ text:"编辑", menu:[ {text:"复制"}, {text:"粘贴"}, {text:"剪切"} ] }); var divShow = Ext.get("showMenuBar"); //获取showMenuBar div并在点击时将菜单显示到该div上 divShow.on("click",function(){ myMenu.show(divShow); } ); } );
文本菜单项：仅仅显示文本，没有其他作用
Ext.onReady( function() { //菜单栏 var myMenu = new Ext.menu.Menu(); //文本菜单项 myMenu.add("文本菜单项"); //与下面效果一样 //文本菜单项 myMenu.add(new Ext.menu.TextItem({text:"文本菜单项"})); var divShow = Ext.get("showMenuBar"); divShow.on("click",function(){ myMenu.show(divShow); } ); } );
单选、复选菜单项：Ext.menu.CheckItem，
当不设置其group属性时，则为复选菜单项，否则为单选菜单项
Ext.onReady( function() { //菜单栏 var myMenu = new Ext.menu.Menu(); //字体菜单 myMenu.add({ text:"字体大小", menu:[ new Ext.menu.CheckItem({text:"一号",group:"font"}), new Ext.menu.CheckItem({text:"二号",group:"font"}) ] }); //字体效果菜单 myMenu.add({ text:"字体效果", menu:[ new Ext.menu.CheckItem({text:"粗体"}), new Ext.menu.CheckItem({text:"斜体"}) ] }); var divShow = Ext.get("showMenuBar"); divShow.on("click",function(){ myMenu.show(divShow); } ); } );
日期选择及颜色选择菜单
Ext.onReady( function() { //菜单栏 var myMenu = new Ext.menu.Menu(); //字体菜单 myMenu.add({ text:"字体大小", menu:[ new Ext.menu.CheckItem({text:"一号",group:"font"}), new Ext.menu.CheckItem({text:"二号",group:"font"}) ] }); //字体效果菜单 myMenu.add({ text:"字体效果", menu:[ new Ext.menu.CheckItem({text:"粗体"}), new Ext.menu.CheckItem({text:"斜体"}) ] }); //其他菜单 myMenu.add({ text:"其他", menu:[ {text:"时间选择",menu:new Ext.menu.DateMenu()},//日期选择器 {text:"颜色选择",menu:new Ext.menu.ColorMenu()}//颜色选择器 ] }); var divShow = Ext.get("showMenuBar"); divShow.on("click",function(){ myMenu.show(divShow); } ); }
N级菜单
Ext.onReady( function() { //菜单栏 var myMenu = new Ext.menu.Menu(); //1级菜单 myMenu.add({ text:"1级菜单", menu:[{ //2级菜单 text:"2级菜单", menu:[{ text:"3级菜单", menu:[{ text:"4级菜单", menu:[{ text:"5级菜单" }] }] }] }] }) var divShow = Ext.get("showMenuBar"); divShow.on("click",function(){ myMenu.show(divShow); } ); } );
