开发者社区> 苏生米沿> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

本文作者: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)是按钮, 但是工具栏的元素(工具栏容器中的子项)可以是任何类型的组件,通过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,学习进度比较慢,大家有好的学习方法的,多多贡献分享给小弟~感激不尽。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
动力节点王鹤|Spring Boot框架学习笔记(三)Spring Boot 和 web 组件
第三章 Spring Boot 和 web 组件 • 官方下载地址 动力节点springboot资料 • 视频观看地址 https://www.bilibili.com/video/BV1XQ4y1m7ex 3.1 SpringBoot 中拦截器 SpringMVC 使用拦截器 1)自定义拦截器类,实现 HandlerInterceptor 接口 2)注册拦截器类
35 0
ABAP Webdynpro的跟踪工具WD_TRACE_TOOL
ABAP Webdynpro的跟踪工具WD_TRACE_TOOL
36 0
[ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将grid表格导出到excel,使用的是前端导出,不涉及后端。
1270 0
asp.net core webapi 使用ef 对mysql进行增删改查,并生成Docker镜像构建容器运行
1.构建运行mysql容器,添加数据库user 参考Docker创建运行多个mysql容器,地址 http://www.cnblogs.com/heyangyi/p/9288402.html 添加user数据库,添加tbusers表 2.
2644 0
+关注
苏生米沿
上市国企信息化主管。擅长java web方向研发及全流程管控。
38
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载