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

Posted 2020-09-19

本文地址：http://blog.csdn.net/sushengmiyan/article/details/38515499

本文作者：sushengmiyan

-------------------------------------------------------------资源链接-----------------------------------------------------------------------

Ext JS API：  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

    中文4.1翻译在线地址：http://extjs-doc-cn.github.io/ext4api/

     中文4.1下载到本地：https://github.com/extjs-doc-cn/ext4api/archive/gh-pages.zip

------------------------------------------------------------------------------------------------------------------------------------------------

了解了组件的原理之后。我们就能够将它们详细的应用到我们的项目中去了，如今我们将一个工具条加入到我们的应用程序中去。

准备工作

  1.安装了sencha cmd并能够正确使用  点此学习

  2.了解了组件添加图标的操作及原理   点此学习

  3.了解了Ext JS的组件及其模板方法    点此学习

本节目标

  使用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）是button， 可是工具栏的元素（工具栏容器中的子项）能够是不论什么类型的组件，通过xtype制定类型。工具栏显示从TreeStore作为一个导航button的踪迹的分层数据，每一个button代表一个节点。

点击一个button将树中的“选择”节点。

非叶节点将显示他们的孩子节点，下拉菜单将显示浏览路径记录相应的button,并点击一个条目的菜单将触发选择相应的子节点。

选择能够使用setSelection以编程方式设置,或者使用getSelection检索是否被选中。工具栏元素能够通过它们的构造函数明白地被创建，或者通过它们的xtype类型来创建，并且能够动态地add加入。

  当中Toolbar类有几个经常使用的属性能够设置：

xtype详细类型能够为 button(默认的button)、tbtext(直接渲染一个文本)、splitbutton(切割button)，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。学习进度比較慢，大家有好的学习方法的，多多贡献分享给小弟~感激不尽。