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....
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
