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 相关文章推荐
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 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
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
浅析python继承与多重继承
2018/09/13 Python
python plotly绘制直方图实例详解
2019/07/22 Python
python正则-re的用法详解
2019/07/28 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
python里glob模块知识点总结
2021/01/05 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
应届大学生自荐信
2013/12/05 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
购房意向书范本
2014/04/01 职场文书