面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏,可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。
现在我们来试试:
1.Sencha Architect创建工程,同样保存到WebRoot目录下,我的保存为toolbar工程。containers中找到一个panel拖到设计窗口中,如下
2.设置一下刚才创建的mypanel
title:设置为”MyToolBar Test”
width:1024
height:768
html:<h1>Hello,HelloWorld!</h1>
3.创建一个Toolbar实例,在containers找到Toolbar控件,拖动到MyPanle里面去,这样就创建了一个Toolbar实例了。如下图
接下来我们在工具栏上面添加两个button,直接拖动button到myToolbar即可,理论上可以在MyToolbar中放入任何控件,我们这里只放button(比较简单且常用,其他原理也类似)。
两个button分别设置为:
text:分别设置为“测试按钮1”,“测试按钮2”
第一个button添加一个handler输入以下内容
Ext.Msg.alert('提示', '测试按钮1被点击!');
第二个button添加一个handler输入以下内容
Ext.Msg.alert('提示', '测试按钮2被点击!');
handler就是消息的处理者,当按钮会点击之后extjs框架会找到注册到这个按钮的处理着,也就是我们添加的handler。
而
Ext.Msg.alert('提示', '测试按钮1被点击!');
则是调用Ext框架中的alert函数显示一个提示框。
4.至此我们的顶部工具栏已经做好了,但是在不少的管理系统中还需要一个底部菜单,我们也来简单的实现一个,参考上面的步骤,只是创建的Toolbar需要把dock设置为bottom。dock(停泊处)它是一个单选参数,可选值有top,bottom,left和right。默认为top,作用相信很容易理解吧,就是设置toolbar的位置。其他的都跟上述步骤差不多
保存,启动tomcat....