1、一、头部工具栏。准备工作,创建一个Panel,代码如下。Ext.onReady(function() var mypanel = new Ext.Panel(renderTo:hello,width:300,height:300,title:Panel,html:测试Panel,floating:true,x:300,y:100););添加头部工具栏和提示信息,代码如下。Ext.onReady(function() /初始化提示信息Ext.QuickTips.init();var mypanel = new Ext.Panel(renderTo:hello,width:300,height:3
2、00,title:Panel,html:测试Panel,floating:true,x:300,y:100,/工具栏tools:id:save,qtip:保存,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
3、,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.QuickTi
4、ps.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.ge
5、tTopToolbar().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.i
6、nit();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.getTopToo
7、lbar().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
8、 Ext.Toolbar.Button(text:文件,menu:mymenu););Ext.Toolbar.SplitButton(),分隔按钮,使用该按钮作为下拉菜单按钮。三、菜单栏。示例五:响应事件 MenuBar 显示菜单 Ext.onReady(function() Ext.get(showMenuBar).on(click,function()alert(fdsf);););示例六:显示菜单Ext.onReady(function() /菜单var myMenu = new Ext.menu.Menu();/添加文件菜单myMenu.add(text:文件,menu:text:打开
9、,/菜单选项text:保存);/添加编辑菜单myMenu.add(text:编辑,menu:text:复制,text:粘贴,text:剪切);var divShow = Ext.get(showMenuBar);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:字体大小&