Extjs学习笔记之四 工具栏和菜单


Posted in Javascript onJanuary 07, 2010

ToolBar的使用很简单,关键是向ToolBar上面添加内容,默认地ToolBar添加的是Button,不过实际上可以向Toolbar添加任意的组件。下面是一个例子:

<script type="text/javascript"> 
Ext.onReady(function() { 
var tb = new Ext.Toolbar({ 
renderTo: document.body, 
width: 600, 
height: 100, 
items: [ 
{ 
// xtype: 'button', // default for Toolbars, same as 'tbbutton' 
text: 'Button' 
}, 
{ 
xtype: 'splitbutton', // same as 'tbsplitbutton' 
text: 'Split Button' 
}, 
// begin using the right-justified button container 
'->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill 
{ 
xtype: 'textfield', 
name: 'field1', 
emptyText: 'enter search term' 
}, 
// add a vertical separator bar between toolbar items 
'-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator 
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem 
{xtype: 'tbspacer' }, // same as ' ' to create Ext.Toolbar.Spacer 
'text 2', 
{ xtype: 'tbspacer', width: 50 }, // add a 50px space 
'text 3' 
] 
}); }); 
</script>

Extjs添加组件的方式很灵活,可以在items数组中直接添加对象,比如new Ext.Button(…),也可以直接添加配置项,如上例所示,其实就是把对象的构造函数中的参数直接取出来,省略了new,取而代之的是xtype,由extjs根据xtype去构造相应的对象。xtype是在Ext.Component中定义的,xtype是一个字符串,它的作用是一个类型的别名。Extjs有一些默认的xtype,用户自己也可以设置某个类型的xtype,不过这个超出了本文的范围。xtype和类型的对应在extjs的api文档中有,下面摘抄出一部分备查。

Toolbar components
---------------------------------------
paging Ext.PagingToolbar
toolbar Ext.Toolbar
tbbutton Ext.Toolbar.Button (deprecated; use button)
tbfill Ext.Toolbar.Fill
tbitem Ext.Toolbar.Item
tbseparator Ext.Toolbar.Separator
tbspacer Ext.Toolbar.Spacer
tbsplit Ext.Toolbar.SplitButton (deprecated; use splitbutton)
tbtext Ext.Toolbar.TextItem

Menu components
---------------------------------------
menu Ext.menu.Menu
colormenu Ext.menu.ColorMenu
datemenu Ext.menu.DateMenu
menubaseitem Ext.menu.BaseItem
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.TextItem

Form components
---------------------------------------
form Ext.form.FormPanel
checkbox Ext.form.Checkbox
checkboxgroup Ext.form.CheckboxGroup
combo Ext.form.ComboBox
datefield Ext.form.DateField
displayfield Ext.form.DisplayField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField

再仔细看下xtype的api文档的原文:
xtype : String

The registered xtype to create. This config option is not used when passing a config object into a constructor. This config option is used only when lazy instantiation is being used, and a child item of a Container is being specified not as a fully instantiated Component, but as a Component config object. Thextype will be looked up at render time up to determine what type of child Component to create.

这句话说的是如果在new的时候使用xtype,这个xtype是忽略的,这个是明显的,用了new就肯定要指定一个类型,xtype是无用的。后面半句才是关键,它的意思是如果使用xtype,对象并不是立刻构造出来的,而是采用一种延迟加载的机制,等到需要显示这个对象的时候再去构造它,在第一次使用之前在内存中仅是一个组件配置对象(component config object),虽然API文档没有明说,但是却暗示出来如果可能,使用xtype而不是new是一个更好的选择,它可以节省内存。实际中,不是所有的组件都需要被显示,那么那些没有被显示的组件就不需要被实例化。
此文中谈到了这点 EXT中xtype的含义 .
介绍了下xtype,下面回到工具栏上来,上面的代码的运行效果是:
Extjs学习笔记之四 工具栏和菜单 
一个很美观的工具栏就出现了。接下来的工作是为这些按钮添加方法,不过这不是本文的讨论范围,以后再讲。

接下来介绍Menu,Menu和Toolbar是很类似的。Menu上能添加的组件在上面的xtype表中已经列出,直接看一个例子:

<script type="text/javascript"> 
Ext.onReady(function() { 
var tb = new Ext.Toolbar({ 
renderTo: document.body, 
width: 600, 
height: 100 
}); 
var filemenu = new Ext.menu.Menu({ 
shadow: 'frame', 
items: [{ text: 'New' }, { text: 'Open' }, { text: 'Save' }, 
"-", { text: 'Export' },{ text: 'Import' } 
] 
}); 
tb.add({ text: 'File', menu: filemenu }); 
var dateMenu = new Ext.menu.DateMenu({}); 
var colorMenu = new Ext.menu.ColorMenu({}); tb.add({ text: 'Colorful', menu: { xtype: 'menu', items: [ 
{text: 'Choose a date', menu: dateMenu }, 
{ text: 'Choose a color', menu: colorMenu }, "-", 
{ 
text: 'Radio Options', 
menu: { // <-- submenu by nested config object 
items: [ 
// stick any markup in a menu 
'<b class="menu-title">Choose a Theme</b>', 
{ 
text: 'Aero Glass', 
checked: true, 
group: 'theme' 
}, { 
text: 'Vista Black', 
checked: false, 
group: 'theme' 
}, { 
text: 'Gray Theme', 
checked: false, 
group: 'theme' 
}, { 
text: 'Default Theme', 
checked: false, 
group: 'theme' 
} 
] 
} 
} 
]} 
}); 
tb.doLayout(); 
}); 
</script>

效果如下:
Extjs学习笔记之四 工具栏和菜单
Javascript 相关文章推荐
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
eval的两组性能测试数据
Aug 17 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 #Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 #Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 #Javascript
jQuery DOM操作小结与实例
Jan 07 #Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 #Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 #Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 #Javascript
You might like
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
为查询结果建立向后/向前按钮
2006/10/09 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
php扩展开发入门demo示例
2019/09/23 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
Vue2单一事件管理组件通信
2017/05/09 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
python ElementTree 基本读操作示例
2009/04/09 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
NumPy 数组使用大全
2019/04/25 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
python selenium循环登陆网站的实现
2019/11/04 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
工作推荐信模板
2015/03/25 职场文书