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:字体大小&
