EXTJS4.x之ToolBar的使用

面板中可以有工具栏，工具栏可以位于面板顶部或底部，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....