重要按钮配置项 handler:& renderTo:&&
取得控件及其值& var memo = form.findById('memo');//取得输入控件& alert(memo.getValue());//取得控件值
& NumberField控件& 整数，小数，数字限制，值范围限制& &&&&&&&&&&& new Ext.form.NumberField({& &&&&&&&&&&&&&&& fieldLabel:'整数',& &&&&&&&&&&&&&&& allowDecimals : false,//不允许输入小数& &&&&&&&&&&&&&&& allowNegative : false,//不允许输入负数& &&&&&&&&&&&&&&& nanText :'请输入有效的整数',//无效数字提示& &&&&&&&&&&& }),& &&&&&&&&&&& new Ext.form.NumberField({& &&&&&&&&&&&&&&& fieldLabel:'小数',& &&&&&&&&&&&&&&& decimalPrecision : 2,//精确到小数点后两位& &&&&&&&&&&&&&&& allowDecimals : true,//允许输入小数& &&&&&&&&&&&&&&& nanText :'请输入有效的小数',//无效数字提示& &&&&&&&&&&&&&&& allowNegative :false//允许输入负数& &&&&&&&&&&& }),& &&&&&&&&&&& new Ext.form.NumberField({& &&&&&&&&&&&&&&& fieldLabel:'数字限制',& &&&&&&&&&&&&&&& baseChars :'12345'//输入数字范围& &&&&&&&&&&& }),& &&&&&&&&&&& new Ext.form.NumberField({& &&&&&&&&&&&&&&& fieldLabel:'数值限制',& &&&&&&&&&&&&&&& maxValue : 100,//最大值& &&&&&&&&&&&&&&& minValue : 50//最小值& &&&&&&&&&&& })& TextArea 控件& Radio或Checkbox用法& box类& &&&&&&&&&&& new Ext.form.Radio({& &&&&&&&&&&&&&&& name : 'sex',//名字相同的单选框会作为一组& &&&&&&&&&&&&&&& fieldLabel:'性别',& &&&&&&&&&&&&&&& boxLabel : '男'& &&&&&&&&&&& }),& &&&&&&&&&&& new Ext.form.Radio({& &&&&&&&&&&&&&&& name : 'sex',//名字相同的单选框会作为一组& &&&&&&&&&&&&&&& fieldLabel:'性别',& &&&&&&&&&&&&&&& boxLabel : '女'& &&&&&&&&&&& }),& &&&&&&&&&&&&&&&&&&&& 在一排& &&&&&&&&&&& new Ext.form.Radio({& &&&&&&&&&&&&&&& name : 'sex',//名字相同的单选框会作为一组& &&&&&&&&&&&&&&& itemCls:'float-left',//向左浮动& &&&&&&&&&&&&&&& clearCls:'allow-float',//允许浮动& &&&&&&&&&&&&&&& fieldLabel:'性别',& &&&&&&&&&&&&&&& boxLabel : '男'& &&&&&&&&&&& }),& &&&&&&&&&&& new Ext.form.Radio({& &&&&&&&&&&&&&&& name : 'sex',//名字相同的单选框会作为一组& &&&&&&&&&&&&&&& clearCls:'stop-float',//阻止浮动& &&&&&&&&&&&&&&& hideLabel:true, //横排后隐藏标签& &&&&&&&&&&&&&&& boxLabel : '女'& &&&&&&&&&&& }),& &&&&&&&&&&& new Ext.form.Checkbox({& &&&&&&&&&&&&&&& name : 'swim',& &&&&&&&&&&&&&&& fieldLabel:'爱好',& &&&&&&&&&&&&&&& boxLabel : '游泳'& &&&&&&&&&&& }),& &&&&&&&&&&&&&&&&&&& 在一排& &&&&&&&&&&& new Ext.form.Checkbox({& &&&&&&&&&&&&&&& name : 'swim',& &&&&&&&&&&&&&&& itemCls:'float-left',//向左浮动& &&&&&&&&&&&&&&& clearCls:'allow-float',//允许浮动& &&&&&&&&&&&&&&& fieldLabel:'爱好',& &&&&&&&&&&&&&&& boxLabel : '游泳'& &&&&&&&&&&& }),& &&&&&&&&&&& new Ext.form.Checkbox({& &&&&&&&&&&&&&&& name : 'walk',& &&&&&&&&&&&&&&& clearCls:'stop-float',//允许浮动& &&&&&&&&&&&&&&& hideLabel:true, //横排后隐藏标签& &&&&&&&&&&&&&&& boxLabel : '散步'& &&&&&&&&&&& })& TriggerField （很像一个默认combobox）& &&&&&&&&&&& new Ext.form.TriggerField({& &&&&&&&&&&&&&&& id:'memo',& &&&&&&&&&&&&&&& fieldLabel:'触发字段',& &&&&&&&&&&&&&&& hideTrigger : false,& &&&&&&&&&&&&&&& onTriggerClick : function(e){& &&&&&&&&&&&&&&& }& &&&&&&&&&&& })& combobox下拉菜单控件& && 1.本地模式& &&&&&&& 本地数据源：& &&&&&&& 数据源的定义：& &&&&&&& var store = new Ext.data.SimpleStore({//定义组合框中显示的数据源& &&&&&&&&&&& fields: ['province', 'post'],& &&&&&&&&&&& data : [['北京','100000'],['通县','101100'],['昌平','102200'],& &&&&&&&&&&&&&&&&&&& ['大兴','102600'],['密云','101500'],['延庆','102100'],& &&&&&&&&&&&&&&&&&&& ['顺义','101300'],['怀柔','101400']]& &&&&&&& });& &&&&&&&&&&& new boBox({& &&&&&&&&&&&&&&& id:'post',& &&&&&&&&&&&&&&& fieldLabel:'邮政编码',& &&&&&&&&&&&&&&& triggerAction: 'all',//单击触发按钮显示全部数据& &&&&&&&&&&&&&&& store : store,//设置数据源& &&&&&&&&&&&&&&& displayField:'province',//定义要显示的字段& &&&&&&&&&&&&&&& valueField:'post',//定义值字段& &&&&&&&&&&&&&&& mode: 'local',//本地模式& &&&&&&&&&&&&&&& forceSelection : true,//要求输入值必须在列表中存在& &&&&&&&&&&&&&&& resizable : true,//允许改变下拉列表的大小& &&&&&&&&&&&&&&& typeAhead : true,//允许自动选择匹配的剩余部分文本& &&&&&&&&&&&&&&& value:'102600',//默认选择大兴& &&&&&&&&&&&&&&& handleHeight : 10//下拉列表中拖动手柄的高度& &&&&&&&&&&& })& && 2.远程模式& &&&&&&&&&&&&&& 远程数据源& &&&&&&&&&&& var store = new Ext.data.SimpleStore({& &&&&&&&&&&& proxy : new Ext.data.HttpProxy({//读取远程数据的代理& &&&&&&&&&&&&&&& url : 'bookSearchServer.jsp'//远程地址& &&&&&&&&&&& }),& &&&&&&&&&&& fields : ['bookName']& &&&&&&& });& &&&&&&&&&&& new boBox({& &&&&&&&&&&&&&&& id:'book',& &&&&&&&&&&&&&&& allQuery:'allbook',//查询全部信息的查询字符串& &&&&&&&&&&&&&&& loadingText : '正在加载书籍信息',//加载数据时显示的提示信息& &&&&&&&&&&&&&&& minChars : 3,//下拉列表框自动选择前用户需要输入的最小字符数量& &&&&&&&&&&&&&&& queryDelay : 300,//查询延迟时间& &&&&&&&&&&&&&&& queryParam : 'searchbook',//查询的名字& &&&&&&&&&&&&&&& fieldLabel:'书籍列表',& &&&&&&&&&&&&&&& triggerAction: 'all',//单击触发按钮显示全部数据& &&&&&&&&&&&&&&& store : store,//设置数据源& &&&&&&&&&&&&&&& displayField:'bookName',//定义要显示的字段& &&&&&&&&&&&&&&& mode: 'remote'//远程模式,& &&&&&&&&&&& })& &&&&&&&&&&&& 远程json数据源& &&&&&&& var store = new Ext.data.JsonStore({& &&&&&&&&&&& url : 'bookSearchServerPage.jsp',//远程地址& &&&&&&&&&&& totalProperty : 'totalNum',& &&&&&&&&&&& root : 'books',& &&&&&&&&&&& fields : ['bookName']& &&&&&&& });& 分页式组合框& &&&&&&&&&&& new boBox({& &&&&&&&&&&&&&&& id:'book',& &&&&&&&&&&&&&&& fieldLabel:'书籍列表',& &&&&&&&&&&&&&&& store : store,//设置数据源& &&&&&&&&&&&&&&& allQuery:'allbook',//查询全部信息的查询字符串& &&&&&&&&&&&&&&& triggerAction: 'all',//单击触发按钮显示全部数据& &&&&&&&&&&&&&&& listWidth : 230,//指定列表宽度& &&&&&&&&&&&&&&& editable : false,//禁止编辑& &&&&&&&&&&&&&&& loadingText : '正在加载书籍信息',//加载数据时显示的提示信息& &&&&&&&&&&&&&&& displayField:'bookName',//定义要显示的字段& &&&&&&&&&&&&&&& mode: 'remote',//远程模式& &&&&&&&&&&&&&&& pageSize : 3//分页大小& &&&&&&&&&&& })& 转select 为 combobox&& &&&&&&&&&&& new boBox({& &&&&&&&&&&&&&&& name:'level',& &&&&&&&&&&&&&&& fieldLabel:'职称等级',& &&&&&&&&&&&&&&& lazyRender : true,& &&&&&&&&&&&&&&& triggerAction: 'all',//单击触发按钮显示全部数据& &&&&&&&&&&&&&&& transform : 'levelName'& &&&&&&&&&&& })& &&& &SELECT ID="levelName"&& &&&&&&& &OPTION VALUE="1"&高级工程师&/OPTION&& &&&&&&& &OPTION VALUE="2"&中级工程师&/OPTION&& &&&&&&& &OPTION VALUE="3" SELECTED&初级工程师&/OPTION&& &&&&&&& &OPTION VALUE="4"&高级经济师&/OPTION&& &&&&&&& &OPTION VALUE="5"&中级经济师&/OPTION&& &&&&&&& &OPTION VALUE="6"&初级经济师&/OPTION&& &&& &/SELECT&& TimeField 控件& &&&&&&&&&&& new Ext.form.TimeField({& &&&&&&&&&&&&&&& id:'time',& &&&&&&&&&&&&&&& width : 150,& &&&&&&&&&&&&&&& maxValue : '18:00',//最大时间& &&&&&&&&&&&&&&& maxText : '所选时间应小于{0}',//大于最大时间的提示信息& &&&&&&&&&&&&&&& minValue : '10:00',//最小时间& &&&&&&&&&&&&&&& minText : '所选时间应大于{0}',//小于最小时间的提示信息& &&&&&&&&&&&&&&& maxHeight : 70,//下拉列表的最大高度& &&&&&&&&&&&&&&& increment : 60,//时间间隔为60分钟& &&&&&&&&&&&&&&& format : 'G时i分s秒',//G标示为24时计时法& &&&&&&&&&&&&&&& invalidText :'时间格式无效',& &&&&&&&&&&&&&&& fieldLabel:'时间选择框'& &&&&&&&&&&& })& DateField 控件& &&&&&&&&&&& new Ext.form.DateField({& &&&&&&&&&&&&&&& id:'date',& &&&&&&&&&&&&&&& format:'Y年m月d日',//显示日期的格式& &&&&&&&&&&&&&&& maxValue :'12/31/2008',//允许选择的最大日期& &&&&&&&&&&&&&&& minValue :'01/01/2008',//允许选择的最小日期& &&&&&&&&&&&&&&& disabledDates : ["日"],//禁止选择日& &&&&&&&&&&&&&&& disabledDatesText :'禁止选择该日期',& &&&&&&&&&&&&&&& disabledDays : [0,6],//禁止选择星期日和星期六& &&&&&&&&&&&&&&& disabledDaysText : '禁止选择该日期',& &&&&&&&&&&&&&&& width : 150,& &&&&&&&&&&&&&&& fieldLabel:'日期选择框'& &&&&&&&&&&& })& Hidden 控件& &&&&&&&&&&& new Ext.form.Hidden({//隐藏域& &&&&&&&&&&&&&&& name:'age',& &&&&&&&&&&&&&&& width : 150,& &&&&&&&&&&&&&&& fieldLabel:'年龄'& &&&&&&&&&&& }),& FieldSet控件相当于groupBox& &&&&&&&&&&& new Ext.form.FieldSet({& &&&&&&&&&&&&&&& title:'产品信息',& &&&&&&&&&&&&&&& labelSeparator :'：',//分隔符& &&&&&&&&&&&&&&& items:[& &&&&&&&&&&&&&&&&&&& new Ext.form.TextField({& &&&&&&&&&&&&&&&&&&&&&&& fieldLabel:'产地'& &&&&&&&&&&&&&&&&&&& }),& &&&&&&&&&&&&&&&&&&& new Ext.form.NumberField({& &&&&&&&&&&&&&&&&&&&&&&& fieldLabel:'售价'& &&&&&&&&&&&&&&&&&&& })& &&&&&&&&&&&&&&& ]& &&&&&&&&&&& }),& TextField控件& vtype 输入格式属性应用& &&&&&&&&&&&&&&& new Ext.form.TextField({& &&&&&&&&&&&&&&&&&&& fieldLabel:'电子邮件',& &&&&&&&&&&&&&&&&&&& width : 170,& &&&&&&&&&&&&&&&&&&& vtype:'email'& &&&&&&&&&&&&&&& }),& &&&&&&&&&&&&&&& new Ext.form.TextField({& &&&&&&&&&&&&&&&&&&& fieldLabel:'网址',& &&&&&&&&&&&&&&&&&&& width : 170,& &&&&&&&&&&&&&&&&&&& vtype:'url'& &&&&&&&&&&&&&&& }),& &&&&&&&&&&&&&&& new Ext.form.TextField({& &&&&&&&&&&&&&&&&&&& fieldLabel:'字母',& &&&&&&&&&&&&&&&&&&& width : 170,& &&&&&&&&&&&&&&&&&&& vtype:'alpha'& &&&&&&&&&&&&&&& }),& &&&&&&&&&&&&&&& new Ext.form.TextField({& &&&&&&&&&&&&&&&&&&& fieldLabel:'字母和数字',& &&&&&&&&&&&&&&&&&&& width : 170,& &&&&&&&&&&&&&&&&&&& vtype:'alphanum'& &&&&&&&&&&&&&&& })&
阅读(...) 评论()& Extjs的Ext.toolbar.Toolbar工具条组件及其应用
Extjs的Ext.toolbar.Toolbar工具条组件及其应用
使用sencha cmd generate app命令生成一个简单的应用程序之后，我们增加了图标的支持，现在我们给这个页面丰富一下内容，一般应用程序都会有个工具栏，现在我们给新生成的页面增加一个工具栏。
第一步：定义工具条的实现类
[javascript]
根据Ext的命名约定，我们定义的类是oaSystem.view.main.region.Top，所以在相应的文件夹下我们去建立这个js文件。
Ext. define方法介绍
Ext.define就是定义或者覆盖一个类，它接受三个参数( className,
createdFn)
其中className就是我们定义的类名，对应于我们刚才写的，就是oaSystem.view.main.region.Top
data是一个对象，默认的我们可以用类似json这样的键值对的形式来传入，还可以传入一个函数（暂时不研究），这里我们代码中的后半部分就是data对象。
createdFn是一个初始化的函数，比如initComponent()本例我们什么都没有传入，因为javascript支持定义了参数可以不传入。
Ext.toolbar.Toolbar类介绍
Ext.toolbar.Toolbar是一个基础工具栏类。工具栏的默认类型（即xtype）是按钮， 但是工具栏的元素（工具栏容器中的子项）可以是任何类型的组件，通过xtype制定类型。
工具栏元素可以通过它们的构造函数明确地被创建，或者通过它们的xtype类型来创建，并且可以动态地add添加。
其中Toolbar类有几个常用的属性可以设置：
xtype具体类型可以为 button(默认的按钮)、splitbutton(分割按钮)，tbfil(等同于使用-&)右对齐容器，textfield（文本域）tbspace（空格，等同于‘ ’ ）
一般情况下我们定义一个text是这样定义：
[javascript]
这样的方式有个简单的方式就是
[javascript]
两个效果一样。对于工具条的使用，可以参考API，例子相当多，而且可以使用live preview功能查看实现效果相当方便。
第二步：增加工具条到页面中
在Main.js中，增加如下items值
[javascript]
xtype就是我们之前在Top.js中定义的alias值，代表我们引入Top.js，就是增加了一个工具条。
region就是代表设置工具条的位置，位置可以有东西南北，就是页面的上下左右。
刷新就可以啦，看看效果~
这是一种引用外部js文件的方式，当然还可以直接在使用create方法来创建一个工具条。
学会使用ExtJs的API
API的文档，有英文的最新的是5.0还有翻译的中文的是4.1的，建议对比着看，这样会比较快，先看有没有差异，然后以英文为主4的汉语为辅助，学习比较迅速。以后想要使用什么组件，都可以得心应手啦。
本文固定链接:
[上一篇][下一篇]
最新文章随机精彩热门排行
精彩内容获取超时，请稍候...
日志总数：3904 篇
评论总数：146 评
标签数量：4475 个
链接总数：4 条
建站日期：
运行天数：1503 天ExtJs中组件最好少使用ID属性（推荐更多使用Name属性）
在ExtJs中，ID属性最好少使用。
因为在不为组件指定ID的情况下，默认为其自动分配id；如果手动指定ID，系统就会以此为准。
但是往往在系统中，尤其是使用TabPanel的情况下，一下加载了多个JS页面，很容易出现多个组件使用重复的一个ID都情况，当关闭某个tab页，却因为别的tab页存在相同id的组件无法销毁该页面组件；而且在使用Ext.getCmp获取组件时候出问题--往往得不到我们想要的效果（比如Ext.getCmp后重置该组件的值，却无效）。
因此，建议在Ext中少使用ID属性。
1.&如果必须使用ID属性，建议ID值用父组件ID+子组件ID的形式来指定子组件的ID；
2.&建议使用
&&&&FormPanel.getForm().findField('id/name');
&&&&Ext.get('id/name');&
&&&&来替代
&&&&Ext.getCmp('id')获取组件。
3.&或者定义组件为变量，然后在FormPanel或者GridPanel中引入。
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。ExtJs--05--给window组件添加功能条以及子组件获取上级或下级组件的属性和方法 - 推酷
ExtJs--05--给window组件添加功能条以及子组件获取上级或下级组件的属性和方法
Ext.onReady(function(){
给容器组件添加控制条 及 控制项
控制条 不同的方向有多种
根据组件本身拿到上级组件的属性及方法调用
var win = new Ext.window.Window({
id:&id001&,//自定义编号
title:&自定义标题信息&,//标题
width:400,//宽度
可以使用百分比 自适应浏览器大小
height:400,//高度
layout:&vbox&,
renderTo:Ext.getBody(),
text:&第一个按钮&,
handler:function(btn){
Ext.Msg.alert(&no1&,&1 info &);
btn.up(&window&).hide();
//第一种获得上级组件
当然up是向上查找,
down是向下查找
alert(btn.up(&window&).title);
text:&第二个按钮&,
handler:function(btn){
Ext.Msg.alert(&no2&,&2 info &);
Ext.getCmp(&id001&).hide();
//第二种获得上级组件
text:&第三个按钮&,
handler:function(btn){
Ext.Msg.alert(&no3&,&3 info &);
//ownerCt：得到当前对象所在的容器组件。
btn.ownerCt.ownerCt.hide();
//第三种获得上级组件
btn.up().up().hide();
//第四种获得上级组件
win.show();
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致ExtJS（12）
1、工具栏的使用，如下代码所示：
Ext.onReady(function(){
//创建一个垂直的工具栏
var toolbar = new Ext.toolbar.Toolbar({
renderTo: 'toolbar', /*以id为toolbar的div为容器放置工具栏*/
width: 300,
height: 300,
vertical: true /*指定工具栏中的排列方式，这里是垂直排列，默认是水平排列*/
//向工具栏中添加三个按钮
toolbar.add([{
text: '新建', /*按钮的文字*/
handler: onBtnClick, /*按钮的点击处理函数*/
iconCls: 'icon' /*这里的btn是定义的css样式*/
text: '保存',
handler: onBtnClick,
iconCls: 'icon'
text: '打开',
handler: onBtnClick,
iconCls: 'icon'
function onBtnClick(id){
Ext.Msg.alert(&message&, &on btn click, id = & + id.text);//id.text获取按钮上的文本
//创建一个水平的工具栏，并在其中加入了按钮、输入框、超链接等
var toolbar2 = new Ext.toolbar.Toolbar({
renderTo: 'toolbar2',
width: 500
toolbar2.add([{
text: 'New',
iconCls: 'icon',
xtype: 'textfield', /*在工具栏中加入了输入框*/
width: 200
'-', /*加入一个分隔线*/
&&a href=''&open baidu&/a&&, /*加入超链接*/
'-&', /*加入一个充满工具栏的空白元素*/
'hello world']); /*hello world为静态文本*/
//禁用工具栏的按钮点击事件
Ext.get(&btnDisable&).on('click', function(){
toolbar2.disable();//调用工具栏的disable()函数，将工具栏禁用，工具栏不可点击
//取消禁用工具栏按钮的点击事件
Ext.get(&btnEnable&).on('click', function(){
toolbar2.enable();//取消对工具栏的禁用，工具栏可以被点击
});HTML页面的代码如下：
&!DOCTYPE html&
&meta charset=&utf-8&&
&!-- 下面是三个必须引入的文件 --&
&link rel=&stylesheet& type=&text/css& href=&../../build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css&&
&script src=&../../build/ext-all.js&&&/script&
&script src=&../../build/packages/ext-theme-neptune/build/ext-theme-neptune.js&&&/script&
&!-- 引入我们自己编写的js代码 --&
&script type=&text/javascript& src=&index.js&&&/script&
&style type=&text/css&&
background-image: url(&test.png&);
&div id=&toolbar&&&/div&&br/&
&div id=&toolbar2&&&/div&
&button type=&button& id=&btnDisable&&禁用工具栏&/button&
&button type=&button& id=&btnEnable&&取消禁用工具栏&/button&
&/html&浏览器中访问的效果如下图：
2、菜单栏的使用。在工具栏中，我们可以向其中添加菜单项，如下代码所示：
Ext.onReady(function(){
var toolbar = new Ext.toolbar.Toolbar({
renderTo: 'toolbar',
width: 300
var fileMenu = new Ext.menu.Menu({
shadow: 'frame', /*设置菜单框的四条边都有阴影*/
allowOtherMenus: true,
items: [{ /*菜单的三个选项*/
text: 'open',
handler: menuItemClick
text: 'new',
handler: menuItemClick
text: 'close',
handler: menuItemClick
var editMenu = new Ext.menu.Menu({
shadow: 'drop', /*设置菜单框的下边和右边有阴影*/
allowOtherMenus: true,
text: 'copy',
handler: menuItemClick,
iconCls: 'icon'
text: 'cut',
handler: menuItemClick
text: 'paste',
handler: menuItemClick
toolbar.add({ /*向工具栏中添加两个菜单*/
text: 'file',
menu: fileMenu
text: 'edit',
menu: editMenu
function menuItemClick(id){
Ext.Msg.alert('message', id.text);
});在浏览器中访问的效果如下图：
除了上面的简单菜单外，还可以给某个菜单项添加二级菜单，如下代码所示：
Ext.onReady(function(){
var toolbar2 = new Ext.toolbar.Toolbar({
renderTo: 'toolbar2',
width: 300
var settingsMenu = new Ext.menu.Menu({
shadow: 'frame',
ignoreParentClicks: true, /*忽略父菜单的点击事件*/
items: [{//加入两个子菜单项，其中第二个有二级菜单
text: '软件设置',
handler: menuItemClick
}, {//这个二级菜单包含三个子菜单项
text: '个人设置',
menu: new Ext.menu.Menu({
text: '身高',
handler: menuItemClick
text: '体重',
handler: menuItemClick
text: '年龄',
handler: menuItemClick
toolbar2.add({//向工具栏中添加一个菜单
text: '设置',
menu: settingsMenu
function menuItemClick(id){//菜单项的点击事件处理函数
Ext.Msg.alert('message', id.text);
});在浏览器中访问的效果如下图：
除了给菜单加上二级菜单项，还可以在菜单中加入其他控件，如日期选择器，颜色选择器，输入框等等，如下面的代码所示：
Ext.onReady(function(){
var toolbar = new Ext.toolbar.Toolbar({
renderTo: 'toolbar',
width: 300
var fileMenu = new Ext.menu.Menu({
xtype: 'textfield',
width: 100,
hideLabel: true
text: 'select color',
menu: new Ext.menu.ColorPicker()
xtype: 'datepicker'
xtype: 'buttongroup',
columns: 3,
title: 'buttonGroup',
text: '用户管理',
colspan: 3,
width: 300,
iconAlign: 'left'
text: '新建'
text: '保存'
text: '打开'
toolbar.add({
text: 'file', menu: fileMenu
});浏览器中访问的效果图如下：
包含单选和多选的菜单项，如下代码所示：
Ext.onReady(function(){
var toolbar = new Ext.toolbar.Toolbar({
renderTo: 'toolbar',
width: 300
var selectMenu = new Ext.menu.Menu({
text: 'select theme',
menu: new Ext.menu.Menu({
text: 'red',
checked: true,
group: 'color' /*相同的group组成一组单选按钮组，只有一个可以被选中*/
text: 'blue',
group: 'color'
text: 'green',
group: 'color'
text: 'black',
group: 'color'
text: 'orange',
group: 'color'
text: 'enable',
checked: true /*没有指定group的为复选框菜单，可以被选中也可以取消选中*/
toolbar.add({
text: 'file', menu: selectMenu
});效果图如下：
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：191268次
积分：3922
积分：3922
排名：第7361名
原创：200篇
转载：21篇
评论：39条
(2)(3)(1)(2)(33)(6)(1)(20)(11)(1)(3)(12)(2)(5)(1)(2)(13)(13)(34)(20)(2)(19)(1)(6)(9)(2)(4)