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

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();
		}
	}
}