码迷,mamicode.com
首页 > Web开发 > 详细

EXTJS4.x之ToolBar的使用

时间:2015-05-18 14:24:56      阅读:416      评论:0      收藏:0      [点我收藏+]

标签:

面板中可以有工具栏,工具栏可以位于面板顶部或底部,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输入以下内容

 

[html] view plaincopy
 
  1. Ext.Msg.alert(‘提示‘, ‘测试按钮1被点击!‘);  


第二个button添加一个handler输入以下内容

 

 

[html] view plaincopy
 
  1. Ext.Msg.alert(‘提示‘, ‘测试按钮2被点击!‘);  


handler就是消息的处理者,当按钮会点击之后extjs框架会找到注册到这个按钮的处理着,也就是我们添加的handler。

 

[html] view plaincopy
 
  1. Ext.Msg.alert(‘提示‘, ‘测试按钮1被点击!‘);  

则是调用Ext框架中的alert函数显示一个提示框。

 

技术分享

 

 

4.至此我们的顶部工具栏已经做好了,但是在不少的管理系统中还需要一个底部菜单,我们也来简单的实现一个,参考上面的步骤,只是创建的Toolbar需要把dock设置为bottom。dock(停泊处)它是一个单选参数,可选值有top,bottom,left和right。默认为top,作用相信很容易理解吧,就是设置toolbar的位置。其他的都跟上述步骤差不多

技术分享

 

保存,启动tomcat....

EXTJS4.x之ToolBar的使用

标签:

原文地址:http://www.cnblogs.com/Crow00/p/4511639.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!