[ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
本文地址: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。学习进度比較慢,大家有好的学习方法的,多多贡献分享给小弟~感激不尽。
相关文章
- Win10系列:C#应用控件进阶5
- 二、Android应用的界面编程(一)界面编程与视图(View)组件
- 二、Android应用的界面编程(一)界面编程与视图(View)组件
- Qt编写项目作品35-数据库综合应用组件
- 【STM32H7教程】第76章 STM32H7的FMC总线应用之驱动AD7606(8通道同步采样, 16bit, 正负10V)
- 【STM32H7教程】第71章 STM32H7的内部Flash应用之模拟EEPROM
- 收藏了!主流应用市场产品提交资料汇总!
- SAP UI5 Fiori 应用在启动时向 ABAP 后台发起的 OData 请求序列的顺序和作用分析
- SAP UI5 应用开发教程之九十八 - 从 viewId 这个属性谈起,聊聊 SAP UI5 的 HTML 源代码生成机制试读版
- SAP云平台CloudFoundry环境里新建SAP UI5应用后,自动生成了哪些组件
- SQLServer · 特性分析 · SQL Server中XML与JSON应用比较
- ML之FE:在特征工程/数据预处理阶段对【数值型/数字型】特征变量进行处理的技术总结(类别化/特征分箱)、经验技巧、案例应用之详细攻略
- Python语言学习:Python语言学习之GUI图形用户界面编程(tkinter/wxPython/PyGTK/PySide/Kivy/easygui/PyQt等)的简介、案例应用之详细攻略
- C/C++ Qt 基础通用组件的应用
- kettle的应用组件 、流程组件、查询组件、连接组件、统计组件、映射组件、脚本组件
- AppInventor学习笔记(四)——打地鼠应用学习
- 自研开源项目(1)邮件收发解析处理高层封装应用库caterpillar_mail
- Qt数据库应用8-数据导出组件示例说明
- 《QEMU/KVM源码分析与应用》读书笔记4 —— 第2章 QEMU基本组件(1)