[ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/38515499](http://blog.csdn.net/sushengmiyan/article/details/38515499) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) -------------------------------------------------------------资源链接----------------------------------------------------------------------- Ext JS API： [ http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.toolbar.Toolbar](http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.toolbar.Toolbar) API doc地址：   在线英文5.0地址 ：[http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext](http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext)   中文4.1翻译在线地址：[http://extjs-doc-cn.github.io/ext4api/](http://extjs-doc-cn.github.io/ext4api/)    中文4.1下载到本地：[https://github.com/extjs-doc-cn/ext4api/archive/gh-pages.zip](https://github.com/extjs-doc-cn/ext4api/archive/gh-pages.zip) ------------------------------------------------------------------------------------------------------------------------------------------------ 了解了组件的原理之后，我们就可以将它们具体的应用到我们的项目中去了，现在我们将一个工具条添加到我们的应用程序中去。 ### 准备工作 1.安装了sencha cmd并可以正确使用  [点此学习](http://blog.csdn.net/sushengmiyan/article/details/38313537) 2.了解了组件增加图标的操作及原理   [点此学习](http://blog.csdn.net/sushengmiyan/article/details/38458411) 3.了解了Ext JS的组件及其模板方法    [点此学习](http://blog.csdn.net/sushengmiyan/article/details/38487519) ### 本节目标 使用sencha cmd generate app命令生成一个简单的应用程序之后，我们增加了图标的支持，现在我们给这个页面丰富一下内容，一般应用程序都会有个工具栏，现在我们给新生成的页面增加一个工具栏。 ### 第一步：定义工具条的实现类 ~~~ Ext.define( 'oaSystem.view.main.region.Top',//ClassName 类名，需要与文件目录对应起来，oaSystem是应用程序的名称，这是说在view/main/region目录下，新建立了一个Top.js文件 { extend: 'Ext.toolbar.Toolbar',//继承自Ext的工具条，可以有工具条的属性了，避免自己书写麻烦 alias: 'widget.maintop',//别名，后期可以进行访问 items: [ { // xtype: 'button', // 默认的工具栏类型 text: '首页', glyph: 0xf015,//首页图标 }, { text : '帮助', glyph : 0xf059 }, { text : '关于', glyph : 0xf05a }, { xtype: 'textfield',//默认是一个button所以其他都没写 name: 'searchField', emptyText: '输入您的搜索关键词' }, { text : '搜索', glyph : 0xf00e }, '->',{ text : '用户登录', glyph : 0xf007 },{ text : '注销', glyph : 0xf011 }, { glyph : 0xf102, handler : 'hiddenTopBottom', tooltip : '隐藏顶部和底部区域', disableMouseOver : true } ] } ); ~~~ 根据Ext的命名约定，我们定义的类是oaSystem.view.main.region.Top，所以在相应的文件夹下我们去建立这个js文件。 ### Ext. define方法介绍 Ext.define就是定义或者覆盖一个类，它接受三个参数([String](#) className, [Object](#) data, [Function](#) createdFn) 其中className就是我们定义的类名，对应于我们刚才写的，就是oaSystem.view.main.region.Top data是一个对象，默认的我们可以用类似json这样的键值对的形式来传入，还可以传入一个函数（暂时不研究），这里我们代码中的后半部分就是data对象。 createdFn是一个初始化的函数，比如initComponent()本例我们什么都没有传入，因为javascript支持定义了参数可以不传入。 ### Ext.toolbar.Toolbar类介绍 Ext.toolbar.Toolbar是一个基础工具栏类。工具栏的默认类型（即xtype）是按钮， 但是工具栏的元素（工具栏容器中的子项）可以是任何类型的组件，通过xtype制定类型。工具栏显示从TreeStore作为一个导航按钮的踪迹的分层数据，每个按钮代表一个节点。点击一个按钮将树中的“选择”节点。非叶节点将显示他们的孩子节点，下拉菜单将显示浏览路径记录对应的按钮,并点击一个条目的菜单将触发选择相应的子节点。选择可以使用setSelection以编程方式设置,或者使用getSelection检索是否被选中。工具栏元素可以通过它们的构造函数明确地被创建，或者通过它们的xtype类型来创建，并且可以动态地add添加。 其中Toolbar类有几个常用的属性可以设置： xtype具体类型可以为 button(默认的按钮)、tbtext(直接渲染一个文本)、splitbutton(分割按钮)，tbfil(等同于使用->)右对齐容器，textfield（文本域）tbspace（空格，等同于‘ ’ ） 一般情况下我们定义一个text是这样定义： ~~~ { xtype: 'button', name: 'text 1', } ~~~ 这样的方式有个简单的方式就是 ~~~ 'text 1' ~~~ 两个效果一样。对于工具条的使用，可以参考API，例子相当多，而且可以使用live preview功能查看实现效果相当方便。 ### 第二步：增加工具条到页面中 在Main.js中，增加如下items值 ~~~ { xtype: 'maintop', region: 'north', }, ~~~ xtype就是我们之前在Top.js中定义的alias值，代表我们引入Top.js，就是增加了一个工具条。 region就是代表设置工具条的位置，位置可以有东西南北，就是页面的上下左右。 刷新就可以啦，看看效果~  这是一种引用外部js文件的方式，当然还可以直接在使用create方法来创建一个工具条。 ### 学会使用ExtJs的API API的文档，有英文的最新的是5.0还有翻译的中文的是4.1的，建议对比着看，这样会比较快，先看有没有差异，然后以英文为主4的汉语为辅助，学习比较迅速。以后想要使用什么组件，都可以得心应手啦。 正在努力学习Extjs5，学习进度比较慢，大家有好的学习方法的，多多贡献分享给小弟~感激不尽。