Ext2中,toolbar中按钮过多时,使用左右拉键展示隐藏按钮.

最新推荐文章于 2024-04-06 16:00:15 发布
最新推荐文章于 2024-04-06 16:00:15 发布
阅读量334 收藏 1
点赞数
分类专栏： 那么那么菜 文章标签： EXT JavaScript ViewUI
Ext3已经出来.Ext3中已经实现了这种功能.
不过项目没有升级到ext3的打算,而且需求中也有类型的要求.
万般无奈,只要自己写一个实现了.

仍然有很多bug.不过功能基本实现了.

bug_1: toolbar中没有加 xtype:'tbseparator', 因为在我本机上'|'无法隐藏.
bug_2: toolbar中初始时,按钮是预先设置好哪些显示,哪些隐藏的.

注意事项: toolbar中的按钮必须小于等于toolbar的宽度--toolbar的宽度是除去'|<','<<','>>','>|'等之后的宽度.

首先,我们在ext中的toolbar上加上几个功能按钮: 

	{pressed:true,text:'|<',handler:moveButton},
	{pressed:true,text:'<<',handler:moveButton}, 
	....		//	 其他按钮
	{pressed:true,text:'>>',handler:moveButton},
	{pressed:true,text:'>|',handler:moveButton}


随后,我们要定义moveButton的javascript函数: 

/**
 * 保存toolbar上一些信息
 */
var toolbarConfig = new function()
{
	//	存储toolbar上按钮的数组
	this.buttonArray = new Array();
	//	存储toolbar上按钮长度的数组
	this.buttonLengthArray = new Array();
	//	buttonArray的当前下标
	this.buttonArrayIndex = 0;
	//	toolbar上状态是show的最左一个按钮
	this.firstShowButton;
	//	lastShowButton的下标
	this.firstShowButtonIndex;	        		
	//	toolbar上状态是show的最右一个按钮
	this.lastShowButton;
	//	lastShowButton的下标
	this.lastShowButtonIndex;

	//	右移按钮('>>')的长度
	this.rightMoveLength;
	//	左移按钮('<<')的长度
	this.leftMoveLength;
	//	右移至底按钮('>|')的长度
	this.rightToBottomLength; 
	//	左移至底按钮('|<')的长度
	this.leftToBottomLength;

	//	toolbar上状态为show的按钮长度之和
	this.showButtonLengthSum = 0;
}

/**
 * 左移,右移,左移至底,右移至底
 */
function moveButton()
{
	//	循环开始前,需重置showButtonLengthSum, firstShowButton, lastShowButton
	clearToolbarConfig(toolbarConfig);

	/**
	 * (1)遍历toolbar上组件,如果是按钮,则将其存进buttonArray中('<<','>>','|<','>|'除外);
	 * (2)将按钮长度存入buttonLengthArray中('<<','>>','|<','>|'除外);
	 * (3)检查button的状态,找到[状态是show的最左一个按钮]给firstShowButton, 计算长度并保存当前下标;
	 * (4)检查button的状态,找到[状态是show的最右一个按钮]给lastShowButton,  计算长度并保存当前下标;
	 * (5)计算状态是show的按钮长度之和
	 */
	for(var i = 0; i < Ext.getCmp("myTabs").items.length; i++)
	{
		//	遍历时的当前按钮
		var currentButton = Ext.getCmp("myTabs").items.items[i];

		//	遍历时的当前按钮的长度
		var currentButtonLength = getCurrentButtonLength(currentButton);

		//	对toolbar上的按钮保存信息
		buttonProcess(currentButton, currentButtonLength, i);
	}
	//	执行移动命令(>>,<<,>|,|<)
	move(this.text, toolbarConfig);
}

/**
 * 执行循环前,需清空的操作
 * @param {} toolbarConfig	toolbar的一些配置信息
 */
function clearToolbarConfig(toolbarConfig)
{
	//	循环前,清空显示按钮长度总和
	toolbarConfig.showButtonLengthSum = 0;
	//	循环前,buttonArrayIndex清空;
	toolbarConfig.buttonArrayIndex = 0;
	//	循环前,firstButton清空;
	toolbarConfig.firstShowButton = null;
	//	循环前,lastButton清空;
	toolbarConfig.lastShowButton = null;
	//	循环前,buttonArray清空
	toolbarConfig.buttonArray = new Array();
	//	循环前,buttonLengthArray清空
	toolbarConfig.buttonLengthArray = new Array();
}

/**
 * 对每一个button进行加工处理
 * @param {} currentButton			当前按钮
 * @param {} currentButtonLength	当前按钮的长度
 * @param {} index					     toolbar上元素的排列下标
 */
function buttonProcess(currentButton, currentButtonLength, index)
{
	//	仅对toolbar上的按钮做处理('>>','>|','<<','|<'除外)
	if(Ext.getCmp("myTabs").items.items[index].type == "button"  
			&& currentButton.text != ">>"  
			&& currentButton.text != "<<"
			&& currentButton.text != ">|"
			&& currentButton.text != "|<")
	{
		//	保存toolbar上按钮信息
		setNormalButtonConfig(currentButton, currentButtonLength);

	}else
	{
		//	保存命令按钮长度
		setMoveCommandLength(currentButton.text, currentButtonLength);
	}
}

/**
 * 保存toolbar上最左显示的按钮及其下标, 最右显示的按钮及其下标
 * @param {} button				按钮
 * @param {} buttonLength		按钮长度
 */
function setNormalButtonConfig(button, buttonLength)
{
	//	按钮数组
	toolbarConfig.buttonArray[toolbarConfig.buttonArrayIndex] = button;	

	//	按钮长度数组
	toolbarConfig.buttonLengthArray[toolbarConfig.buttonArrayIndex] = buttonLength;		

	if(button.hidden == false && !toolbarConfig.firstShowButton)
	{
		//	按钮是显示的最左一个按钮
		toolbarConfig.firstShowButton = button;
		//	lastHideButtonIndex保存当前下标
		toolbarConfig.firstShowButtonIndex = toolbarConfig.buttonArrayIndex;

	}else if(button.hidden == false)
	{ 
		//	按钮是显示的最右一个按钮
		toolbarConfig.lastShowButton = button;
		//	lastShowButtonIndex保存当前下标		
		toolbarConfig.lastShowButtonIndex = toolbarConfig.buttonArrayIndex;		
	}
	//	累计状态是show的按钮长度
	toolbarConfig.showButtonLengthSum += toolbarConfig.buttonLengthArray[toolbarConfig.buttonArrayIndex];
	//	按钮数组下标自增
	toolbarConfig.buttonArrayIndex++;
}

/**
 * 得到toolbar上'>>','<<','>|','|<'命令按钮的长度
 * @param {} text			命令名
 * @param {} buttonLength	按钮长度
 */
function setMoveCommandLength(text, buttonLength)
{
	if(text == ">>")
	{
		//	右移按钮的长度
		toolbarConfig.rightMoveLength = buttonLength;


	}else if(text == "<<")
	{
		//	左移按钮的长度
		toolbarConfig.leftMoveLength = buttonLength;


	}else if(text == ">|")
	{
		//	右移至底按钮的长度
		toolbarConfig.rightToBottomLength = buttonLength;


	}else if(text == "|<")
	{
		//	左移至底按钮的长度
		toolbarConfig.leftToBottomLength = buttonLength;
	}	
}

/**
 * 得到当前按钮的长度
 * <注>如果按钮是隐藏的,且没有设置宽度,则得到其宽度会为0
 * @param  {} 	currentButton		    当前按钮
 * @return {}  	currentButtonLength 当前按钮的长度
 */
function getCurrentButtonLength(currentButton)
{
	//	当前按钮的宽度
	var currentButtonLength;
	//	如果当前按钮没有指定宽度
	if(currentButton.el.dom == null ||currentButton.el.dom.width == "")
	{
		if(currentButton.el.dom == null)
		{	
			//	tbfill的宽度比较特别
			currentButtonLength = currentButton.el.offsetWidth;

		}else if(currentButton.el.dom.width == "")
		{
			//	得到按钮的实际宽度
			currentButtonLength = currentButton.el.dom.offsetWidth;
		}
	}else
	{
		//	得到按钮的指定宽度
		currentButtonLength = currentButton.el.dom.width;
	}
	return currentButtonLength;
}

/**
 * 得到工具条长度
 * <注>该工具条长度仅是存放按钮部分的长度(不包括'>>','<<','>|','|<')
 * @param  {} toolbarConfig 	toolbar的配置信息
 * @return {} toolbarWidth		toolbar工具条不带'<<','>>','|<','|>'的长度
 */
function getToolbarWidth(toolbarConfig)
{
	//	toolbar的长度,如果没有指定长度.就取其实际长度
	var toolbarWidth = (Ext.getCmp("myTabs").el.dom.width == null) 
			? Ext.getCmp("myTabs").el.dom.offsetWidth : Ext.getCmp("myTabs").el.dom.width;		        		
	//	toolbar工具条不带'<<','>>','|<','|>'的长度
	toolbarWidth = 
		toolbarWidth - toolbarConfig.rightMoveLength 
					 - toolbarConfig.leftMoveLength 
					 - toolbarConfig.rightToBottomLength 
					 - toolbarConfig.leftToBottomLength;
	return toolbarWidth;
}

/**
 * 执行toolbar上的移动命令
 * @param {} text 			移动命令
 * @param {} toolbarConfig	toolbar的一些配置信息
 */
function move(text, toolbarConfig)
{
	if(text == ">>")
	{
		moveRight(toolbarConfig);

	}else if(text == "<<")
	{
		moveLeft(toolbarConfig);

	}else if(text == ">|")
	{
		moveToRightBottom(toolbarConfig);

	}else if(text == "|<")
	{
		moveToLeftBottom(toolbarConfig);
	}
}

/**
 * 点击'>>'按钮
 * (1)先将最左边显示的按钮隐藏
 * (2)重新设置toolbarConfig.firstShowButton
 * (3)如果当前显示按钮的长度之和 - 隐藏的按钮长度 + 即将显示的按钮长度 <= toolbar宽度
 * (4)则显示这个[即将显示的按钮],且用lastShowButton指向它;否则,暂不显示;
 * @param {} toolbarConfig toolbar的一些配置信息
 */
function moveRight(toolbarConfig)
{
	//	仅当最右显示按钮的右边存在着隐藏的按钮的时候,才有效果
	if(toolbarConfig.buttonArray[toolbarConfig.lastShowButtonIndex + 1])
	{
		//	最左显示的按钮长度
		var firstShowButtonLength = toolbarConfig.buttonLengthArray[toolbarConfig.firstShowButtonIndex];
		//	最左边显示的按钮隐藏
		toolbarConfig.firstShowButton.hide();

		//	如果最左显示按钮的右边有按钮,则将firstShowButton指向它;
		if(toolbarConfig.buttonArray[toolbarConfig.firstShowButtonIndex + 1])
		{
			toolbarConfig.firstShowButton = toolbarConfig.buttonArray[toolbarConfig.firstShowButtonIndex + 1];
		}

		//	即将显示的按钮
		var lastShowButtonTemp = toolbarConfig.buttonArray[toolbarConfig.lastShowButtonIndex + 1];
		//	先将待显示的按钮显示,以得到它的长度
		lastShowButtonTemp.show();

		//	当前显示按钮长度 - 被隐藏按钮长度 + 即将显示按钮长度
		var result = toolbarConfig.showButtonLengthSum - firstShowButtonLength + lastShowButtonTemp.el.dom.offsetWidth;

		if(result <= getToolbarWidth(toolbarConfig))
		{
			//	用lastShowButton指向它;
			toolbarConfig.lastShowButton = toolbarConfig.buttonArray[toolbarConfig.lastShowButtonIndex + 1];
		}else
		{
			//	状态为隐藏
			toolbarConfig.buttonArray[toolbarConfig.lastShowButtonIndex + 1].hide();
		}
	}
}

/**
 * 点击'<<'按钮
 * (1)先将最右边显示的按钮隐藏
 * (2)重新设置toolbarConfig.lastShowButton
 * (3)如果当前显示按钮的长度之和 - 隐藏的按钮长度 + 即将显示的按钮长度 <= toolbar宽度
 * (4)则显示这个[即将显示的按钮],且用firstShowButton指向它;否则,暂不显示;
 * @param {} toolbarConfig toolbar的一些配置信息
 */
function moveLeft(toolbarConfig)
{
	//	仅当最左显示按钮的左边存在着隐藏的按钮的时候,才有效果
	if(toolbarConfig.buttonArray[toolbarConfig.firstShowButtonIndex - 1])
	{
		//	最右显示按钮的长度
		var lastShowButtonLength = toolbarConfig.buttonLengthArray[toolbarConfig.lastShowButtonIndex];
		//	最右显示的按钮隐藏
		toolbarConfig.lastShowButton.hide();

		//	如果最右显示按钮的左边有按钮,则将lastShowButton指向它;
		if(toolbarConfig.buttonArray[toolbarConfig.lastShowButtonIndex - 1])
		{
			toolbarConfig.lastShowButton = toolbarConfig.buttonArray[toolbarConfig.lastShowButtonIndex - 1];
		}

		//	即将显示的按钮
		var firstShowButtonTemp = toolbarConfig.buttonArray[toolbarConfig.firstShowButtonIndex - 1];
		//	先将待显示的按钮显示,以得到它的长度
		firstShowButtonTemp.show();

		//	当前显示按钮长度 - 被隐藏按钮长度 + 即将显示按钮的长度
		var result = toolbarConfig.showButtonLengthSum - lastShowButtonLength + firstShowButtonTemp.el.dom.offsetWidth;

		//	如果result <= toolbar长度
		if(result <= getToolbarWidth(toolbarConfig))
		{
			//	用firstShowButton指向该按钮
			toolbarConfig.firstShowButton = toolbarConfig.buttonArray[toolbarConfig.firstShowButtonIndex - 1];

		}else
		{
			//	该按钮暂不显示
			toolbarConfig.buttonArray[toolbarConfig.firstShowButtonIndex - 1].hide();
		}
	}
}

/**
 * 右移到最右端
 * (1)toolbar上按钮从右至于左遍历.累加其按钮长度
 * (2)如果按钮长度之和小于等于toolbar的宽度,累加继续.并设置按钮状态为显示
 * (3)如果按钮长度超过toolbar宽度,跳出循环.
 * @param {} toolbarConfig	toolbar的一些配置
 */
function moveToRightBottom(toolbarConfig)
{
	//	按钮长度之和
	var buttonLengthSum = 0;

	//	从右至左遍历.
	for(var i = toolbarConfig.buttonArray.length; i > 0; i--)
	{
		//	当前按钮
		var currentButton = toolbarConfig.buttonArray[i - 1];

		//	先将按钮显示,以得到其实际长度
		currentButton.show();

		//	按钮长度累加
		buttonLengthSum += currentButton.el.dom.offsetWidth;

		//	超过了toolbar长度的按钮全隐藏
		if(buttonLengthSum > getToolbarWidth(toolbarConfig))
		{	
			currentButton.hide();
		}
	}
}

/**
 * 左移到最左端
 * (1)toolbar上按钮从左至于右遍历.累加其按钮长度
 * (2)如果按钮长度之和小于等于toolbar的宽度,累加继续.并设置按钮状态为显示
 * (3)如果按钮长度超过toolbar宽度,跳出循环.
 * @param {} toolbarConfig	toolbar的一些配置
 */
function moveToLeftBottom(toolbarConfig)
{
	//	按钮长度之和
	var buttonLengthSum = 0;

	//	从右至左遍历.
	for(var i = 0; i < toolbarConfig.buttonArray.length; i++)
	{
		//	当前按钮
		var currentButton = toolbarConfig.buttonArray[i];

		//	先将按钮显示,以得到其实际长度
		currentButton.show();

		//	按钮长度累加
		buttonLengthSum += currentButton.el.dom.offsetWidth;

		//	超过了toolbar长度的按钮全隐藏
		if(buttonLengthSum > getToolbarWidth(toolbarConfig))
		{	
			currentButton.hide();
		}
	}
}
Rooock
关注
专栏目录
SwiftUI 如何动态条件显示和隐藏 Toolbar 按钮且不做无谓刷新
享受开发，颠倒银河
05-04 1058
在本篇博文中，我们讨论了如何在导航栏的 Toolbar 中折叠、分组以及动态显示和隐藏按钮，并优化了显示性能，确保 Toolbar 内容改变时无关视图不会被重建刷新。
在Androidstudio中亲测toolbar中一些常见的用法好包括如何设置标题居中.zip
07-30
2. **在Activity中使用自定义Toolbar**：在Activity的布局文件中，替换原来的Toolbar为上面创建的自定义布局。在Activity的代码中，找到TextView并设置其文本，这样标题就会在中间显示了。 ```java Toolbar ...
mouseover/mouseout的Ext.toolbar隐藏打开menu
luozhangwen的专栏
10-23 3225
/*!  * Ext JS Library 3.2.1  * Copyright(c) 2006-2010 Ext JS, Inc.  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.onReady(function(){     Ext.QuickTips.init();         if(!!wi
Ext.Toolbar上的combo控件及其文本标签text同时隐藏/显示...
shupili141005
09-12 346
1. Toolbar上的combo控件及其文本标签text同时隐藏/显示： state = url.slice(1,2); tbar = new Ext.Toolbar([             {                 text: "状态"                 ,hidden: (state!=='6')             }       ...
ExtJS Menu嵌套combo等控件时,自动隐藏/遮盖等bug的解决方案
天猪部落阁 - (ExtJS && AS3 && Java)
08-06 246
2010-07-08补充: DateField隐藏的解决方案,详见本文底部.   2010-07-04补充: ExtJS3.2的combo文档中更新的一种新的解决方案,详见本文底部.     续前文: http://atian25.iteye.com/blog/431545   上篇只解决了combo下拉框被遮盖的问题,但是如果选择como的某项,或者...
elementUI复选按钮组，动态控制表格各列的展示隐藏
qq_43503450的博客
02-14 318
elementUI复选按钮组，动态控制表格各列的展示隐藏
Toolbar滑动效果实现总结
一叶扁舟江上游的博客
06-04 930
如上面效果:顶部的带Avengers标题的Toolbar ,在下面RecyclerView下滑的过程中显示,如果将下面的RecyclerView上滑,Toolbar又自动隐藏. 实现上面的效果布局如下:     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://
监听列表滚动来隐藏或显示Toolbar与浮动按钮
12-20
在Android应用开发中，我们经常需要根据用户交互来动态调整界面元素的可见性，例如当用户滚动列表时，隐藏或显示顶部的ToolBar以及悬浮动作按钮（Floating Action Button, FAB）。这种效果能提供更好的用户体验，...
计算机软件-商业源码-实例67 去掉ToolBar中的关闭按钮.zip
05-23
这个实例“实例67 去掉ToolBar中的关闭按钮.zip”显然是一个关于如何从ToolBar中移除关闭按钮的源码示例。ToolBar是许多应用程序中常用的一种组件，它通常位于窗口的顶部，包含了执行各种操作的快捷按钮。在某些情况...
EXT中文手册5.pdf
07-10
综上所述，这段代码展示了如何使用 Ext JS 创建一个具有多个可配置区域的布局，并且包含了如何使用工具栏和内容面板的具体实例。这些知识点对于理解和使用 Ext JS 构建复杂的 Web 应用程序非常有帮助。
Ext设置按钮动态隐藏和显示
孤雁是天的寂寞
03-07 613
Ext.getCmp('按钮id').show();显示 Ext.getCmp('按钮id').hide();隐藏
ext2.0中组件(panel,tabPanel,button,window)的使用（3）
897371388
10-24 130
主要的组件：panel,tabPanel,button,window 的使用 1. 面板Ext.Panel 的使用 参数配置： new Ext.Panel({ title:"面板", html:"面板内容", height:100} ); 使用： var obj={title:"hello",width:300,height:200,html:'Hello,easyjf ...
wangEditor富文本编辑器自定义菜单（工具栏）
热门推荐
种麦南山下的博客
05-09 1万+
如果仅仅想排除掉某些菜单，其他都保留，可以使用 excludeKeys 来配置。 可通过 toolbar.getConfig().toolbarKeys 查看工具栏的默认配置。 const toolbarConfig: Partial<IToolbarConfig> = { excludeKeys: [ 'headerSelect', 'italic', 'group-more-style' // 排除菜单组，写菜单组 key 的值即可
wangEditor5在Vue3中的自定义图片+视频+音频菜单
一名业余前端的博客
04-27 8249
wangEditor5用在Vue3中自定义扩展音频、视频、图片菜单；并扩展音频元素节点，保证音频节点的插入、读取、回写功能正常；支持动态修改尺寸。
wangEditor5在vue中的基本使用
qq_45799465的博客
08-29 1万+
一、@wangEditor5的基本使用及配置 二、@wangEditor5上传图片 三、Module parse failed: Unexpected token (12828:18)You may need an appropriate loader to handle this file type.报错解决。 四、@wangEditor5有序列表无需列表样式消失。......
Vue3 + wangEditor实现富文本图片上传并展示
最新发布
weixin_52102740的博客
04-06 1239
简单演示wangeditor的基本使用，案例为上传图片并展示
ExtJS：鼠标移出菜单后菜单自动隐藏
JRQ 的博客
12-31 4298
ExtJS 菜单 自动隐藏
[ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
weixin_30436101的博客
08-12 208
本文地址：http://blog.csdn.net/sushengmiyan/article/details/38515499本文作者：sushengmiyan-------------------------------------------------------------资源链接-----------------------------------------------------...
EXT中文使用指南：从入门到精通
EXT中的继承机制被详细解析，补充了EXT2的相关概述，展示了EXT的组件模型ComponentModel和容器模型ContainerModel，帮助开发者理解EXT的组件层次结构和组合机制。 EXT最新使用手册(中文)是一份全面的EXT开发参考...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值