工具条（Ext.Toolbar）

最新推荐文章于 2016-01-27 16:10:00 发布
最新推荐文章于 2016-01-27 16:10:00 发布
阅读量1.1w 收藏 2
点赞数
分类专栏： ExtJS 文章标签： 工具 function menu autoload delete 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seng3018/article/details/5899289
版权 
工具条（Ext.Toolbar）
当在工具条中同时出现Menu和Element时，会导致Menu失灵。
1、Ext.Toolbar的常用方法：
      addButton()
      addElement()
      addField()
      addFill()
      addSeparator()
      addText()
      add()

2、普通工具条

Js代码 

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);  
    }  
});  
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代码

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.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"
});
});

seng3018
关注
专栏目录
3.4 Ext JS工具栏 toolbar全介绍
oscar999的专栏
03-20 553
Toolbar，工具栏 ，是容器类的一个子类， 用于放置按钮等组件。其对应的类是Ext.toolbar.Toolbar ,
Ext 表格运用-Ext.grid.EditorGridPanel(带分页)
XiangZhiLiu的专栏
05-22 1457
1.创建 Ext.data.Store    role_store = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : 'searchRoles.do' }), re
Ext.widgets-toolbar
blackant2的专栏
12-05 1896
Ext.Toolbar工具栏,使用起来很简单，add已准备好的元素就行方法Toolbar( Object/Array config )构造add( Mixed arg1, Mixed arg2, Mixed etc. ) : void增加元素可以是 1:Ext.Toolbar.Button            相当于addButton2:HtmlElement                相当
Ext.toolbar.Toolbar工具栏
weixin_34417200的博客
04-13 214
1、Ext.toolbar.Toolbar主要配置项  Ext.toolbar.Toolbar配置 配置项参数类型说明 enableOverflow Boolean 设置为true则自动为工具栏添加一个下拉按钮，用于显示超过工具栏范围的按钮 vertical Boolean 设置为true则显示一个垂直的工具栏，默认为false  工具栏常用元素 ...
Ext工具栏Toolbar
weixin_33882443的博客
01-27 150
2019独角兽企业重金招聘Python工程师标准>>> ...
[ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
热门推荐
苏生-苏米沿的专栏
08-12 1万+
本文地址：http://blog.csdn.net/sushengmiyan/article/details/38515499本文作者：sushengmiyan-------------------------------------------------------------资源链接-------------------------------------------------------...
EXT分页工具条
03-16
EXT分页工具条（Ext.toolbar.Paging）是EXT的toolbar组件的一个子类，可以通过以下代码创建： ```javascript var pagingToolbar = Ext.create('Ext.toolbar.Paging', { store: myStore, // 关联的数据存储 ...
extJs4 toolbar工具条
04-22
### extJs4 toolbar工具条详解 #### 一、概述 `ExtJS` 是一款非常强大的企业级前端框架，它能够帮助开发者快速构建出美观且功能丰富的 Web 应用程序。在 `ExtJS 4` 版本中，`Toolbar`（工具栏）组件是一个重要的...
ExtJs4 笔记（12） Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏...
weixin_30291791的博客
12-23 193
《回到系列目录 本篇讲解三个工具栏控件。其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单，Ext.toolbar.Paging专门用来控制数据集的分页展示，Ext.ux.statusbar.StatusBar用来展示当前的状态信息。 一、Ext.toolbar.Toolbar 工具栏控件可以被附加在面板、窗口等容器类控件中，可以在四个方位添加多个工具栏控件。...
Ext菜单和工具栏
Donny的专栏
12-26 164
创建一个简单的工具条 创建一个简单的工具条，包含4个按钮。 代码： Ext.onReady(function() { var toolbar = new Ext.Toolbar(); toolbar.render("toolbar"); toolbar.add({ text:"新建", handler:function() { Ext.Msg.alert("新建"); } ...
ext工具栏
WelcomeBack
08-16 606
Ext.QuickTips.init();                                 var tb = new Ext.Toolbar();  //初始化工具栏（ext自带方法）      tb.id="mainToolBar";  //工具栏id
Ext.toolbar.Toolbar的学习，是Ext Js 4的类，Ext Js3的用法有些不同
张波的技术积累
07-26 3362
1：toolbar1.jsp  <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reques
EXT核心API详解(十八)_Toolbar/Toolbar.Item
qinyun1221的博客
11-30 202
[size=small]工具栏,使用起来很简单，add已准备好的元素就行 [color=red]方法[/color] [b]Toolbar( Object/Array config )[/b] 构造 [b]add( Mixed arg1, Mixed arg2, Mixed etc. ) : void[/b] 增加元素 可以是 1:Ext.Toolbar.Button ...
Ext多行工具栏
蓝猫的专栏
09-10 1046
在Extjs中Panel中提供了tbar和bbar两个内置的工具栏，极大的方便了大家的使用，但是在创建多行工具栏的时候，就会有一些问题产生了，不能正常的显示已经设计好的页面。下面通过对Panel的render事件的监听，在它被渲染的时候添加多条工具栏，这样就不会影响页面的显示了。
Ext工具栏菜单_wayfoon
南极光经验分享
07-24 1453
今天，帮群友解决了一个动态的 Ext工具栏菜单问题。工具栏菜单数据是从后台读取的。效果如图： 这里将群友提供的后台数据简化一下，改成本地读取json数据格式；代码如下：直接copy下面代码，保存成htm文件，导入ext包，可以运行；注意文件保存编码格式（非传输编码）：utf-8  Ext工具栏菜单_wayfoon                        
Extjs5.1学习笔记2——工具栏和菜单栏的使用
大前端程序猿
04-29 1324
1、工具栏的使用，如下代码所示： Ext.onReady(function(){ //创建一个垂直的工具栏 var toolbar = new Ext.toolbar.Toolbar({ renderTo: 'toolbar', /*以id为toolbar的div为容器放置工具栏*/ width: 300, height: 300, vertical: true /*指定工具
ExtJs4 实例教程：创建工具条与交互功能
"这篇资源主要介绍了ExtJS4中的toolbar工具条的使用方法，通过一个具体的代码例子展示了如何创建和配置toolbar，包括添加文本、文本字段、按钮等组件，并且涉及了数据加载和用户输入处理的基本操作。" 在ExtJS4中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值