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