Extjs的Ext.toolbar.Toolbar工具条组件及其应用

本节目标

  使用sencha cmd generate app命令生成一个简单的应用程序之后，我们增加了图标的支持，现在我们给这个页面丰富一下内容，一般应用程序都会有个工具栏，现在我们给新生成的页面增加一个工具栏。

第一步：定义工具条的实现类

根据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制定类型。
工具栏元素可以通过它们的构造函数明确地被创建，或者通过它们的xtype类型来创建，并且可以动态地add添加。

其中Toolbar类有几个常用的属性可以设置：

xtype具体类型可以为 button(默认的按钮)、splitbutton(分割按钮)，tbfil(等同于使用->)右对齐容器，textfield（文本域）tbspace（空格，等同于‘ ’ ）

一般情况下我们定义一个text是这样定义：

这样的方式有个简单的方式就是

两个效果一样。对于工具条的使用，可以参考API，例子相当多，而且可以使用live preview功能查看实现效果相当方便。

第二步：增加工具条到页面中

在Main.js中，增加如下items值

xtype就是我们之前在Top.js中定义的alias值，代表我们引入Top.js，就是增加了一个工具条。

region就是代表设置工具条的位置，位置可以有东西南北，就是页面的上下左右。

刷新就可以啦，看看效果~

这是一种引用外部js文件的方式，当然还可以直接在使用create方法来创建一个工具条。

学会使用ExtJs的API

API的文档，有英文的最新的是5.0还有翻译的中文的是4.1的，建议对比着看，这样会比较快，先看有没有差异，然后以英文为主4的汉语为辅助，学习比较迅速。以后想要使用什么组件，都可以得心应手啦。