`
mhf_csu
  • 浏览: 20122 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类

Ext.Toolbar

阅读更多

工具条（Ext.Toolbar）

EXTExcel 

当在工具条中同时出现Menu和Element时，会导致Menu失灵。

 

1、Ext.Toolbar的常用方法：
      addButton()
      addElement()
      addField()
      addFill()
      addSeparator()
      addText()
      add()

 

2、普通工具条

Js代码 复制代码 收藏代码
  1. Ext.onReady(function(){   
  2.     Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";   
  3.     Ext.QuickTips.init();   
  4.        
  5.     var currnetItem = null;   
  6.        
  7.     //菜单工具条   
  8.     var fileMenu = new Ext.menu.Menu({   
  9.         shadow: "sides",   
  10.         items: [   
  11.             {text:"新建", menu:[   
  12.                 {text:"Word文档", handler:onMenuItem},   
  13.                 {text:"Excel文档"},   
  14.                 {text:"文本文件"}   
  15.             ]},   
  16.             {text:"打开", handler:onMenuItem},   
  17.             "-",   
  18.             {text:"关闭", handler:onMenuItem}   
  19.         ]   
  20.     });   
  21.        
  22.     var editMenu = new Ext.menu.Menu({   
  23.         items: [   
  24.             {text:"剪切", handler:onMenuItem},   
  25.             {text:"复制", handler:onMenuItem},   
  26.             {text:"粘贴", handler:onMenuItem}   
  27.         ]   
  28.     });   
  29.        
  30.     var themeMenu = new Ext.menu.Menu({   
  31.         items: [   
  32.             {id:"default", text:"默认", checked:true, group:"theme", checkHandler:onItemCheck},   
  33.             {id:"red", text:"红色", checked:false, group:"theme", checkHandler:onItemCheck},   
  34.             {id:"green", text:"绿色", checked:false, group:"theme", checkHandler:onItemCheck},   
  35.             {id:"gray", text:"灰色", checked:false, group:"theme", checkHandler:onItemCheck},   
  36.             "-",   
  37.             {text:"禁用", checked:false, checkHandler:onCheckboxItem}   
  38.         ]   
  39.     });   
  40.        
  41.     var scrollMenu = new Ext.menu.Menu({   
  42.         maxHeight: 200,   
  43.         showSeparator: false  
  44.     });   
  45.     for (var i = 0; i < 50; ++i){   
  46.         scrollMenu.add({   
  47.             text: 'Item ' + (i + 1)   
  48.         });   
  49.     }   
  50.        
  51.     var t3 = new Ext.Toolbar({   
  52.         items:[   
  53.             {text:"文件", menu:fileMenu},   
  54.             {text:"编辑", menu:editMenu},   
  55.             {text:"主题", menu:themeMenu},   
  56.             "-",   
  57.             {id:"add", text:"新建", iconCls:"add", enableToggle:true, toggleHandler:onToggleHandler},   
  58.             {id:"save", text:"保存", iconCls:"save", handler:onToolbarButton},   
  59.             {id:"delete", text:"删除", iconCls:"delete", handler:onToolbarButton},   
  60.             {icon:"../images/toolbar/help.gif", tooltip:"帮助文档"},   
  61.             {xtype:"splitbutton", text:"滚动菜单", menu:scrollMenu},   
  62.             "-",   
  63.             {xtype:"textfield", width:100},   
  64.             "->",   
  65.             {   
  66.                 text:"enabled",    
  67.                 handler: function(){   
  68.                     if(currnetItem!=null && currnetItem.enable){   
  69.                         currnetItem.setDisabled(false);   
  70.                         currnetItem = null;   
  71.                         alert(currnetItem);   
  72.                     }   
  73.                 }   
  74.             },   
  75.             "-",   
  76.             "工具条"  
  77.         ]   
  78.     });   
  79.        
  80.     new Ext.Panel({   
  81.         title: "普通工具条",   
  82.         renderTo: "div1",   
  83.         frame: true,   
  84.         width: 700,   
  85.         tbar: t3,   
  86.         bodyStyle: "background-color:#FFFFFF; height:50; padding:3px;",   
  87.         html: "当在工具条中同时出现Menu和Element时，会导致Menu失灵。"  
  88.     });   
  89.        
  90.     //单击工具条上的按钮时触发该函数   
  91.     function onToolbarButton(btn){   
  92.         alert(btn.id);   
  93.     }   
  94.        
  95.     //单击菜单项时触发该函数   
  96.     function onMenuItem(item){   
  97.         alert(item.text);   
  98.         //item.setDisabled(true);   
  99.         //currnetItem = item;   
  100.     }   
  101.        
  102.     //checked的值变化时触发该函数   
  103.     function onItemCheck(item, checked){   
  104.         if(checked) alert(item.text);   
  105.     }   
  106.        
  107.     function onCheckboxItem(item){   
  108.         themeMenu.get("default").setDisabled(item.checked);   
  109.         themeMenu.get("red").setDisabled(item.checked);   
  110.         themeMenu.get("green").setDisabled(item.checked);   
  111.         themeMenu.get("gray").setDisabled(item.checked);   
  112.     }   
  113.        
  114.     function onToggleHandler(item, pressed){   
  115.         alert(pressed);   
  116.     }   
  117. });  
Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";
	Ext.QuickTips.init();
	
	var currnetItem = null;
	
	//菜单工具条
	var fileMenu = new Ext.menu.Menu({
		shadow: "sides",
		items: [
			{text:"新建", menu:[
				{text:"Word文档", handler:onMenuItem},
				{text:"Excel文档"},
				{text:"文本文件"}
			]},
			{text:"打开", handler:onMenuItem},
			"-",
			{text:"关闭", handler:onMenuItem}
		]
	});
	
	var editMenu = new Ext.menu.Menu({
		items: [
			{text:"剪切", handler:onMenuItem},
			{text:"复制", handler:onMenuItem},
			{text:"粘贴", handler:onMenuItem}
		]
	});
	
	var themeMenu = new Ext.menu.Menu({
		items: [
			{id:"default", text:"默认", checked:true, group:"theme", checkHandler:onItemCheck},
			{id:"red", text:"红色", checked:false, group:"theme", checkHandler:onItemCheck},
			{id:"green", text:"绿色", checked:false, group:"theme", checkHandler:onItemCheck},
			{id:"gray", text:"灰色", checked:false, group:"theme", checkHandler:onItemCheck},
			"-",
			{text:"禁用", checked:false, checkHandler:onCheckboxItem}
		]
	});
	
	var scrollMenu = new Ext.menu.Menu({
		maxHeight: 200,
		showSeparator: false
	});
	for (var i = 0; i < 50; ++i){
        scrollMenu.add({
            text: 'Item ' + (i + 1)
        });
    }
    
	var t3 = new Ext.Toolbar({
		items:[
			{text:"文件", menu:fileMenu},
			{text:"编辑", menu:editMenu},
			{text:"主题", menu:themeMenu},
			"-",
			{id:"add", text:"新建", iconCls:"add", enableToggle:true, toggleHandler:onToggleHandler},
			{id:"save", text:"保存", iconCls:"save", handler:onToolbarButton},
			{id:"delete", text:"删除", iconCls:"delete", handler:onToolbarButton},
			{icon:"../images/toolbar/help.gif", tooltip:"帮助文档"},
			{xtype:"splitbutton", text:"滚动菜单", menu:scrollMenu},
			"-",
			{xtype:"textfield", width:100},
			"->",
			{
				text:"enabled", 
				handler: function(){
					if(currnetItem!=null && currnetItem.enable){
						currnetItem.setDisabled(false);
						currnetItem = null;
						alert(currnetItem);
					}
				}
			},
			"-",
			"工具条"
		]
	});
	
	new Ext.Panel({
		title: "普通工具条",
		renderTo: "div1",
		frame: true,
		width: 700,
		tbar: t3,
		bodyStyle: "background-color:#FFFFFF; height:50; padding:3px;",
		html: "当在工具条中同时出现Menu和Element时，会导致Menu失灵。"
	});
	
	//单击工具条上的按钮时触发该函数
	function onToolbarButton(btn){
		alert(btn.id);
	}
	
	//单击菜单项时触发该函数
	function onMenuItem(item){
		alert(item.text);
		//item.setDisabled(true);
		//currnetItem = item;
	}
	
	//checked的值变化时触发该函数
	function onItemCheck(item, checked){
		if(checked) alert(item.text);
	}
	
	function onCheckboxItem(item){
		themeMenu.get("default").setDisabled(item.checked);
		themeMenu.get("red").setDisabled(item.checked);
		themeMenu.get("green").setDisabled(item.checked);
		themeMenu.get("gray").setDisabled(item.checked);
	}
	
	function onToggleHandler(item, pressed){
		alert(pressed);
	}
});

 

3、分组工具条

Js代码 复制代码 收藏代码
  1. Ext.onReady(function(){   
  2.     Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";   
  3.        
  4.     //菜单工具条   
  5.     var fileMenu = new Ext.menu.Menu({   
  6.         shadow: "sides",   
  7.         items: [{text:"新建"}, {text:"打开"}, "-", {text:"关闭"}]   
  8.     });   
  9.        
  10.     var editMenu = new Ext.menu.Menu({   
  11.         items: [{text:"剪切", iconCls:"cut"}, {text:"复制", iconCls:"copy"}, {text:"粘贴", iconCls:"paste"}]   
  12.     });   
  13.        
  14.     var g1 = {   
  15.         xtype: "buttongroup",   
  16.         title: "菜单",   
  17.         columns: 3,   
  18.         defaults: {   
  19.             scale: "small", //small, medium, large   
  20.             iconAlign: "top"  
  21.         },   
  22.         items: [   
  23.             {xtype:"splitbutton", text:"文件", menu:fileMenu, iconCls:"add", rowspan:1, arrowAlign:"bottom"},   
  24.             {xtype:"splitbutton", text:"编辑", menu:editMenu, iconCls:"save", rowspan:1, arrowAlign:"bottom"},   
  25.             {text:"查看", iconCls:"search", scale: "large"}   
  26.         ]   
  27.     };   
  28.        
  29.     var g2 = {   
  30.         xtype: "buttongroup",   
  31.         title: "返回",   
  32.         columns: 1,   
  33.         defaults: {   
  34.             scale: "large",   
  35.             iconAlign: "top"  
  36.         },   
  37.         items: {text:"返回", iconCls:"back"}   
  38.     };   
  39.        
  40.     var g3 = {   
  41.         xtype: "buttongroup",   
  42.         title: "剪贴板",   
  43.         defaults: {   
  44.             scale: "large",   
  45.             iconAlign: "top"  
  46.         },   
  47.         items: [   
  48.             {text:"剪切", iconCls:"cut"},   
  49.             {text:"复制", iconCls:"copy"},   
  50.             {text:"粘贴", iconCls:"paste"}   
  51.         ]   
  52.     };   
  53.        
  54.     var g4 = {   
  55.         xtype: "buttongroup",   
  56.         title: "帮助",   
  57.         defaults: {   
  58.             scale: "small"  
  59.         },   
  60.         height: 80,   
  61.         items: [   
  62.             {xtype:"splitbutton", text: "帮助", iconCls:"help"}   
  63.         ]   
  64.     };   
  65.        
  66.     var panel = new Ext.Panel({   
  67.         title: "分组工具条",   
  68.         renderTo: "div1",   
  69.         frame: true,   
  70.         width: 600,   
  71.         height: 300,   
  72.         autoScroll: true,   
  73.         tbar: [g1, g3, g2, g4],   
  74.         bodyStyle: "background-color:#FFFFFF; padding:3px;",   
  75.         autoLoad: "messagebox.action"  
  76.     });   
  77. });  
Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";
	
	//菜单工具条
	var fileMenu = new Ext.menu.Menu({
		shadow: "sides",
		items: [{text:"新建"}, {text:"打开"}, "-", {text:"关闭"}]
	});
	
	var editMenu = new Ext.menu.Menu({
		items: [{text:"剪切", iconCls:"cut"}, {text:"复制", iconCls:"copy"}, {text:"粘贴", iconCls:"paste"}]
	});
	
	var g1 = {
		xtype: "buttongroup",
		title: "菜单",
		columns: 3,
		defaults: {
        	scale: "small", //small, medium, large
			iconAlign: "top"
        },
		items: [
			{xtype:"splitbutton", text:"文件", menu:fileMenu, iconCls:"add", rowspan:1, arrowAlign:"bottom"},
			{xtype:"splitbutton", text:"编辑", menu:editMenu, iconCls:"save", rowspan:1, arrowAlign:"bottom"},
			{text:"查看", iconCls:"search", scale: "large"}
		]
	};
	
	var g2 = {
		xtype: "buttongroup",
		title: "返回",
		columns: 1,
		defaults: {
			scale: "large",
			iconAlign: "top"
		},
		items: {text:"返回", iconCls:"back"}
	};
	
	var g3 = {
		xtype: "buttongroup",
		title: "剪贴板",
		defaults: {
			scale: "large",
			iconAlign: "top"
		},
		items: [
			{text:"剪切", iconCls:"cut"},
			{text:"复制", iconCls:"copy"},
			{text:"粘贴", iconCls:"paste"}
		]
	};
	
	var g4 = {
		xtype: "buttongroup",
		title: "帮助",
		defaults: {
			scale: "small"
		},
		height: 80,
		items: [
			{xtype:"splitbutton", text: "帮助", iconCls:"help"}
		]
	};
	
	var panel = new Ext.Panel({
		title: "分组工具条",
		renderTo: "div1",
		frame: true,
		width: 600,
		height: 300,
		autoScroll: true,
		tbar: [g1, g3, g2, g4],
		bodyStyle: "background-color:#FFFFFF; padding:3px;",
		autoLoad: "messagebox.action"
	});
});

 

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EXT核心API详解

    65、Ext.Toolbar.Separator类 ……… 56 66、Ext.Toolbar.Spacer类 …………… 56 67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext....

    ext Panel+toolbar+button 实作带注释

    ext Panel+toolbar+button 实作带注释 Tom 实作实例,推荐入门学习,不带Ext js lib,请自行加入

    ExtJS入门教程(超级详细)

    65、Ext.Toolbar.Separator类 ……… 56 66、Ext.Toolbar.Spacer类 …………… 56 67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext....

    ExtJs4_笔记.docx

    第十二章 Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏 103 一、Ext.toolbar.Toolbar 103 二、Ext.toolbar.Paging 115 三、Ext.ux.statusbar.StatusBar 122 第十三章...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性，《ext js权威指南》 前　言 第1章　ext js 4开发入门 / 1 1.1　学习ext js必需的基础知识 / 1 1.2　json概述 / 3 1.2.1　认识json / 3 1.2.2　json的结构 / 3 1.2.3　json的例子 / 4 1.2.4　...

    Ext JS 删除的代码

    var system_add_rent = new Ext.Toolbar({ border : false, items : [{ text : "添加月租金", iconCls : "add10", listeners : { click : function() { add_rent.show(); } ...

    ExtJSWeb应用程序开发指南(第2版)

    3.4.1 认识Ext.toolbar.Toolbar 3.4.2 只包含按钮的简单工具栏 3.4.3 包含多种元素的复杂工具栏 3.4.4 启用和禁用工具栏 3.4.5 认识Ext.menu.Menu菜单 3.4.6 最简单的菜单栏 3.4.7 创建二级或多级菜单 3.4.8 ...

    精通JS脚本之ExtJS框架.part1.rar

    5.4.1 Ext.Toolbar简介 5.4.2 只包含按钮的简单工具栏 5.4.3 包含多种元素的复杂工具栏 5.4.4 Ext.menu.Menu简介 5.4.5 最简单的菜单栏 5.4.6 创建三级或多级菜单 5.4.7 具有选择框的菜单 第6章 页面元素与...

    精通JS脚本之ExtJS框架.part2.rar

    5.4.1 Ext.Toolbar简介 5.4.2 只包含按钮的简单工具栏 5.4.3 包含多种元素的复杂工具栏 5.4.4 Ext.menu.Menu简介 5.4.5 最简单的菜单栏 5.4.6 创建三级或多级菜单 5.4.7 具有选择框的菜单 第6章 页面元素与...

    ExtjsBreadCrumbs:我快速而肮脏地尝试制作 Extjs 面包屑扩展

    Extjs面包屑添加一名作者我快速而肮脏地尝试制作 Extjs 面包屑扩展。 使用 Extjs 4.1.0 测试这里它运行在 jsfiddle.net 注意：这是为了在我正在从事的项目中具有我想要的功能而量身定制的。 所以我认为它的功能不像...

    ExtJS-3.4.0系列目录

    一、基础篇 1、Ext JS下载及配置 2、基本功能 　2.1、Ext.MessageBox消息框 　2.2、Ext.window.MessageBox 3、工具栏和菜单栏 　3.1、Ext.toolbar.Toolbar工具栏 　3.2、Ext.menu.Menu菜单栏 4、表单

    ext 列表页面关于多行查询的办法

    首先在Ext.grid.GridPanel中必须要有tbar对象 然后要增加listeners: { ... //add three tbar } } 可以看到这里有bbar2这样就可以增加很多bar了 代码如下:this.bbar2 = new Ext.Toolbar({ renderTo: grid.tbar, items

    Ext JS 提示消息的 函数

    function process(){ Ext.MessageBox.confirm('确认提示', '你确定要导出Excel吗？... window.open(_url, '_self','width=1,height=1,toolbar=no,menubar=no,location=no'); msgTip.hide(); } }) }

    sencha touch 模仿tabpanel导航栏TabBar的实例代码

    代码如下:/**模仿tabpanel导航栏*/Ext.define(‘ux.TabBar’, { alternateClassName: ‘tabBar’, extend: ‘Ext.Toolbar’, xtype: ‘tabBar’, config: { docked: ‘bottom’, cls: ‘navToolbar’, ...

    extjs4.0 实现了主页面框架 动态菜单 例子 表单 ajax

    extjs4.0 实现了主页面框架（主框架使用Ext.Viewport，banner使用Ext.panel.Panel，通过toolbar来放置按钮），包括左侧动态菜单实现（采用Ext.tree.Panel）动态从数据库加载数据来显示菜单（后台代码也在了通过json...

    NVKindEditor3.5.4面向对象版（修改）

    this.KE.toolbar.disable(this.tid, []); this.KE.readonly(this.tid); this.KE.g[this.tid].newTextarea.disabled = true; }, onEnable: function () { this.KE.toolbar.able(this.tid, []); this.KE....

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

    下面是一个例子： 代码如下: [removed] Ext.onReady(function() { var tb = new Ext.Toolbar({ renderTo: document.body, width: 600, height: 100, items: [ { // xtype: ‘button’, // default for Toolbars, ...

    学习ExtJS Panel常用方法

    xtype：在EXTJS的可视化组件部署中的一种机制，即通过指定xtype的值，来告诉容量如何初始化所包含的级件，如xtype:”textfiled”,表示使用Ext.form.TextFile来进行初始化当前组件。 xtype Class ————- ————...

    ExtAspNet_v2.3.2_dll

    ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果， 目标是创建没有ViewState，没有JavaScript，没有CSS，没有...

    ExtJS_Designer(安装程序与破解补丁)

    * Enhanced Button and Toolbar components * ARIA/Section 508 accessibility improvements * CSS updates for reset style scoping and easier custom theming * Update the Ext event registration model * Ext....

Magicbox
Global site tag (gtag.js) - Google Analytics