Ext 4.2 的工具栏

面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext 中工具栏是由Ext.Toolbar

类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具

栏，可以直接通过面板的tools 配置选项往面板头部加入预定义的工具栏选项。比如下面的

代码：

1. <script type="text/javascript">  
2.   
3. <!--  
4.   
5.    Ext.onReady(function(){  
6.   
7.       var panel = new Ext.Panel({  
8.   
9.          renderTo:"hi",//把面板添加到id为hi的div中  
10.   
11.          title:"面板的标题",  
12.   
13.          width:400,//面板的宽度  
14.   
15.          height:500,//面板的高度  
16.   
17.          html:"<h1>面板的主体内容</h1>",  
18.   
19.          tbar:[{text:"顶部工具toptoolbar"},{pressed:true,text:"刷新"}],  
20.   
21.          bbar:[{text:"底部工具bottomtoolbar"}],  
22.   
23.          buttons:[{text:"位于footer底部"},{text:"测试提交"}],  
24.   
25.          tools:[   // 标红的为tool工具的类型，具体可参照文档http://docs.sencha.com/extjs/4.2.6/#!/example
26.   
27.            { id:"save",//设置工具栏选项种类  
28.   
29.              handler:function(){//点击触发的事件  
30.   
31.                Ext.MessageBox.alert("保存的操作");  
32.   
33.            }},  
34.   
35.            {id:"help"},  
36.   
37.            {id:"exit"},  
38.   
39.            {id:"close"},  
40.   
41.            {id:"minimize"},  
42.   
43.            {id:"maximize"},  
44.   
45.            {id:"restore"},  
46.   
47.            {id:"gear"},  
48.   
49.            {id:"pin"},  
50.   
51.            {id:"unpin"},  
52.   
53.            {id:"up"},  
54.   
55.            {id:"left"},  
56.   
57.            {id:"right"},  
58.   
59.            {id:"down"},  
60.   
61.            {id:"refresh"},  
62.   
63.            {id:"minus"},  
64.   
65.            {id:"plus"},  
66.   
67.            {id:"search"},  
68.   
69.            {id:"print"}  
70.   
71.          ]  
72.   
73.       });  
74.   
75.    });  
76.   
77. //-->  

如图：