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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
简单JS代码压缩器
Oct 12 Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
JavaScript delete 属性的使用
Oct 08 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
JavaScript原型链详解
Nov 07 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 cache类代码(php数据缓存类)
2010/04/15 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
php模板原理讲解
2013/11/13 PHP
PHP中的Memcache详解
2014/04/05 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
php上传文件常见问题总结
2015/02/03 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python实现矩阵转置的方法分析
2017/11/24 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Pytorch之finetune使用详解
2020/01/18 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
new修饰符是起什么作用
2015/06/28 面试题
南极大冒险观后感
2015/06/05 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python