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

本节目标

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

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

[javascript]

  1. Ext.define(  
  2.   ‘oaSystem.view.main.region.Top’,//ClassName 类名,需要与文件目录对应起来,oaSystem是应用程序的名称,这是说在view/main/region目录下,新建立了一个Top.js文件   
  3.   {  
  4.      extend: ‘Ext.toolbar.Toolbar’,//继承自Ext的工具条,可以有工具条的属性了,避免自己书写麻烦  
  5.      alias: ‘widget.maintop’,//别名,后期可以进行访问  
  6.      items: [  
  7.        {  
  8.                  // xtype: ‘button’, // 默认的工具栏类型  
  9.          text: ‘首页’,    
  10.          glyph: 0xf015,//首页图标  
  11.        }, {  
  12.          text : ‘帮助’,  
  13.          glyph : 0xf059  
  14.        }, {  
  15.          text : ‘关于’,  
  16.          glyph : 0xf05a  
  17.        },  
  18.        {  
  19.           xtype: ‘textfield’,//默认是一个button所以其他都没写  
  20.           name: ‘searchField’,  
  21.           emptyText: ‘输入您的搜索关键词’  
  22.        }, {  
  23.          text : ‘搜索’,  
  24.          glyph : 0xf00e  
  25.        }, ‘->’,{  
  26.          text : ‘用户登录’,  
  27.          glyph : 0xf007  
  28.        },{  
  29.          text : ‘注销’,  
  30.          glyph : 0xf011  
  31.        }, {  
  32.          glyph : 0xf102,  
  33.          handler : ‘hiddenTopBottom’,  
  34.          tooltip : ‘隐藏顶部和底部区域’,  
  35.          disableMouseOver : true  
  36.        }       
  37.      ]  
  38.   }  
  39. );  



根据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是这样定义:

[javascript]

  1. {  
  2.   xtype: ‘button’,  
  3.   name: ‘text 1’,  
  4. }  

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

[javascript]

  1. ‘text 1’  

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

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

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

[javascript]

  1. {  
  2. xtype: ‘maintop’,  
  3. region: ‘north’,   
  4.   
  5. },  

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

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

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

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

学会使用ExtJs的API

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

标签