`
mhf_csu
  • 浏览: 20689 次
  • 性别: 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 Panel+toolbar+button 实作带注释

    在`panel.js`中，你可能会找到创建Toolbar的代码，例如`Ext.create('Ext.toolbar.Toolbar', {...})`，然后在其中添加各种工具按钮。 `EXT Button`是EXT JS中最常用的交互元素之一，它用于触发某个动作或者导航到...

    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组件描述，各个组件含义

    **2.15 Toolbar (Ext.Toolbar)** - **xtype**: `toolbar` - **功能描述**：Toolbar 是一个包含按钮、文本框等控件的工具栏。 - **主要用途**：为用户提供快速访问常用功能的方式。 **2.16 Form Panel (Ext....

    Ext.js教程和Ext.js API

    6. **菜单和工具栏**：创建和使用菜单（Menu）和工具栏（Toolbar）。 7. **拖放（Drag & Drop）和DND**：如何实现元素的拖放操作。 8. **Ajax和数据通信**：使用Ajax请求进行后台通信，包括JsonP和ScriptTagProxy。 ...

    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....

    ExtJs_xtype一览

    - `tbseparator`：`Ext.Toolbar.Separator`，在工具栏上创建分隔符。 - `tbspacer`：`Ext.Toolbar.Spacer`，工具栏的空格。 - `tbsplit`：`Ext.Toolbar.SplitButton`，工具栏的分隔按钮。 - `tbtext`：`Ext....

    extjs帮助文档pdf版

    - **概述**：`Ext` 是 ExtJS 的核心命名空间，包含了全局的方法和属性。 - **用途**：提供了一个统一的入口来访问 ExtJS 库的功能，如创建组件、管理事件等。 - **常用方法**： - `Ext.create()`: 创建一个组件实例...

    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 Xtype

    如`Ext.Toolbar`，`Ext.Toolbar.Button`（已废弃，建议使用`button`），`Ext.Toolbar.Fill`，`Ext.Toolbar.Separator`等。 - **Form Components**: 用于构建表单的组件，如`Ext.FormPanel`，`Ext.form.Checkbox`，`...

    extjs4.2 动态生成toolbar

    在 Toolbar.js 中，我们需要定义一个 Ext.zc.grid.Toolbar 类，该类继承自 Ext.toolbar.Toolbar，并且 alias 为 zc_grid_Toolbar。我们还需要在 render 事件中使用 Ext.Ajax.request 方法来请求后台的工具栏数据，并...

    Ext.form.FieldSet的用法.pdf

    可以是 `Ext.Toolbar` 实例、工具栏配置对象或按钮配置项数组。注意，一旦渲染完成，不应直接修改这些属性，而应该使用 `getTopToolbar` 和 `getBottomToolbar` 方法。 12. **header** 和 **footer**：它们分别控制...

    Ext-window属性

    可以是`Ext.Toolbar`对象、工具栏配置对象或按钮配置数组。一旦组件渲染完成，如果需要修改工具栏，应使用`getBottomToolbar`获取引用。 11. **bodyBorder**: 如果设置为`true`，会给组件的内部元素（`this.el`）...

    Extjs实用教程

    - **SplitButton**: `Ext.Toolbar.SplitButton`，工具栏上的分裂按钮。 - **TextItem**: `Ext.Toolbar.TextItem`，工具栏上的文本项。 3. **表单及字段组件** - **FormPanel**: `Ext.FormPanel`，表单容器。 - ...

    EXTJS3 Ext.PagingToolbar() 快捷键应用

    toolbar.on('render', function() { Ext.getDoc().on('keydown', function(e) { if (e.getKey() === e.PAGE_UP) { toolbar.prevPage(); e.preventDefault(); // 阻止默认的页面向上滚动 } else if (e.getKey() ...

    ExtJs组件类的对应表

    8. **`tbsplit`** - `Ext.Toolbar.SplitButton`，工具栏分隔按钮，结合了普通按钮和下拉菜单的特性。 9. **`tbtext`** - `Ext.Toolbar.TextItem`，工具栏文本项，用于在工具栏上显示静态文本。 #### 菜单组件 1....

    Ext.form.FieldSet的用法.docx

    12. **tbar**和**bbar**: 分别用于定义FieldSet顶部和底部的工具栏，可以是Ext.Toolbar实例、工具栏配置对象或按钮配置项数组。 13. **header**和**footer**: 分别控制是否创建FieldSet的头部和底部元素。如果不...

    Ext JS 删除的代码

    首先，`Ext.Toolbar`被用来创建一个工具栏，它包含两个按钮：一个是“添加月租金”，另一个是“删除”。`border : false`确保了工具栏没有边框。每个按钮都有自己的`text`和`iconCls`属性，分别设置按钮的文字和图标...

    ExtJs xtype一览

    - **`tbsplit` (Ext.Toolbar.SplitButton)**: 工具栏分隔按钮组件，类似于`splitbutton`，但用于工具栏中。 - **`tbtext` (Ext.Toolbar.TextItem)**: 工具栏文本项组件，用于在工具栏上显示文本。 #### 菜单组件 -...

    extJs xtype 类型

    6. **`tbseparator`:** 工具栏分隔符组件，用于在工具栏中插入分隔线，通过`Ext.Toolbar.Separator`类实现。 7. **`tbspacer`:** 工具栏空白组件，用于在工具栏中插入空白区域，通过`Ext.Toolbar.Spacer`类实现。 ...

    EXT dojochina Ext类别名.rar

    3. **功能描述**：类名会包含组件的主要功能，如`Ext.toolbar.Toolbar`表示工具栏。 4. **继承关系**：EXT类名有时会体现出继承自哪个基础类，例如`Ext.button.Button`继承自`Ext.Component`。 在压缩包的文件名称...

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