ExtJs 多欄工具條實現

時間 2019-12-01

標籤 extjs 工具條實現简体版

原文原文鏈接

思路：
第一種方式：先建立一個新toolbar,再render到原toolbar的父元素下。
第二種方式：自定義toolbar組件:MultiToolbar，配置參數，將原toolbar轉換爲多個toolbar.javascript

首先貼上參考的代碼，實現第一種方式：
也可參考一下這個頁面的回答:
http://stackoverflow.com/questions/829304/extjs-toolbar-with-multiple-rowscss

        　　var tbar1 = new Ext.Toolbar({
　　　　　　　splitIndexs: [2,2],
                items:[
                    {text:'添加按鈕'},{text:'修改按鈕'},{text:'刪除按鈕'},
                    {text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200},
                    {text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200}
                ],
                
            });
            //普通方式：new一個toolbar後，render()到已有的tbar下.
            var main = new Ext.Panel({
                title:'一個面板',
                border:false,
                tbar : [{text:'一個按鈕'},{text:'另外一個按鈕'}],
                listeners : {
                    'render': function(){
                        //將tbar1添加到main.tbar的下面
                        tbar1.render(main.tbar);
                    }
                }
            });
            main.render(document.body);

而後是第二種方式：html

Ext.namespace("Ext.revenue");
/**
 * 多欄式工具條(可將過長的出現滾動條的toolbar拆成多欄)<p>
 * 
 * 參數說明：<p>
 * splitIndexs: 分割閥值，值爲大於0的整數或整數數組，0或其它值將忽略。
 * 當參數爲一個數組時，表示要分紅n+1個toolbar，n爲數組長度。<br>
 * 能夠簡單的理解爲：該欄要幾保留幾個元素(包括隱藏元素)，參數就填幾。<br>
 * 
 * 參數值示例：<p>
 * 0，或[]，或[0]    //效果同樣，只有一個toolbar不分欄
 * 2或[2]    //效果同樣，第一欄2個元素，剩下的分到第二欄
 * [5,6]    //第一欄5個元素,第二欄6個元素，剩下的分到第三欄
 * 4.7,[4.7]//參數將被轉換爲4，效果爲：第一欄4個元素，剩下的分到第二欄
 * "fsdf"或-1或-232    //無效參數，將忽略，效果與普通toolbar同樣。
 * 100        //數量大於toolbar的items數量，該參數將忽略。
 * [2,2,1,1,1,1,1]        //若index之和超過items數量，多餘的將忽略。
 * [2,2,"q",1,1,1,1]    //"q"爲非法字符，效果至關於[2,2]
 * 調用示例：<p>
 * <pre><code>
 * //從第12個元素開始分,第一欄12個元素,剩下的分到第二欄
 * new Ext.revenue.RevMultiToolbar({
 *         splitIndexs : 12, // or [12]
 *         items : [...]
 * });
 * //第一欄10個元素,第二欄12個元素，剩下的分到第三欄
 * new Ext.revenue.RevMultiToolbar({
 *         splitIndexs : [10,12],
 *         items : [...]
 * });
 * </pre></code>
 * @class Ext.revenue.RevMultiToolbar
 * @extends Ext.Toolbar
 * @author 覃熙科
 */
Ext.revenue.RevMultiToolbar = Ext.extend(Ext.Toolbar, {
        //xtype: 'toolbar',
        autoScroll:    true,
        splitIndexs : 0, // [0] 默認不分欄
        constructor : function(config){
            //統一轉換爲數組處理;過濾無參(沒配置splitIndexs參數)的狀況;
            var indexs = config.splitIndexs ? [].concat(config.splitIndexs) : [];
            //過濾非法字符;每次只取第一個數，剩下的遞歸。
            var index = parseInt(Ext.num(indexs[0],0),10);
            if( sliceable() ){
                //slice() 方法可從已有的數組中返回選定的元素,原數組不變.
                //將多出的部分分到新items中
                config.newItems = config.items.slice(index);
                //剩下的splitIndexs,存放起來後面遞歸用;
                config.newSplitIndexs = indexs.slice(1)||0;
                //splice() 方法用於插入、刪除或替換數組的元素。
                //index參數值：如1表示從下標1開始分，原數組只留下[0]位置的元素。
                var howmany = config.items.length - index;//要移除多少個元素?//IE8及如下必需要此參數！！蹩腳
                config.items.splice(index,howmany);
            }
            Ext.revenue.RevMultiToolbar.superclass.constructor.call(this,config);
            //檢查是否符合分割的條件
            function sliceable(){
                //參數爲空，退出
                if(index<=0 || indexs.length<=0) return false;
                //若index大於等於原toolbar items的數量，退出。
                if(index >= config.items.length) return false;
                return true;
            }
        },
        listeners : {
            'render': function(thiz){
                //新toolbar渲染到原toolbar的父元素下！這樣才與原toolbar平級
                var renderTo = thiz.el.parent();
                var newSplitIndexs = thiz.newSplitIndexs;
                var newItems = thiz.newItems;

                //排除沒有newItems的狀況
                if(!newItems) return ;
                createToolbar();
                function createToolbar(){
                    //此時再用newItems組建新toolbar
                    var newToolbar = new Ext.revenue.RevMultiToolbar({
                        autoScroll: true,
                        renderTo: renderTo,
                        splitIndexs: newSplitIndexs,
                        items: newItems
                    });
                }
　　　　　　　　//刪除newItems，避免重複render
　　　　　　　　delete newItems;
　　　　　　　　delete newSplitIndexs;

            }
        }
});

//調用示例
var tbar1 = new Ext.revenue.RevMultiToolbar({
　　splitIndexs: [2,2],
　　items:[
　　　　{text:'添加按鈕'},{text:'修改按鈕'},{text:'刪除按鈕'},
　　　　{text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200},
　　　　{text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200}
　　]
});java

完整代碼：數組

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <title> </title>
    <meta charset="utf-8">
    <link href="../ext-3.2/resources/css/ext-all.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="../ext-3.2/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="../ext-3.2/ext-all-debug.js"></script>
    <script src="../ext-3.2/build/ext-lang-zh_CN.js" type="text/javascript"></script>
 
 </head>

 <body>
    <script type="text/javascript">
        Ext.QuickTips.init();
        Ext.onReady(function(){
            Ext.namespace("Ext.revenue");
            /**
             * 多欄式工具條(可將過長的出現滾動條的toolbar拆成多欄)<p>
             * 
             * 參數說明：<p>
             * splitIndexs: 分割閥值，值爲大於0的整數或整數數組，0或其它值將忽略。
             * 當參數爲一個數組時，表示要分紅n+1個toolbar，n爲數組長度。<br>
             * 能夠簡單的理解爲：該欄要幾保留幾個元素(包括隱藏元素)，參數就填幾。<br>
             * 
             * 參數值示例：<p>
             * 0，或[]，或[0]    //效果同樣，只有一個toolbar不分欄
             * 2或[2]    //效果同樣，第一欄2個元素，剩下的分到第二欄
             * [5,6]    //第一欄5個元素,第二欄6個元素，剩下的分到第三欄
             * 4.7,[4.7]//參數將被轉換爲4，效果爲：第一欄4個元素，剩下的分到第二欄
             * "fsdf"或-1或-232    //無效參數，將忽略，效果與普通toolbar同樣。
             * 100        //數量大於toolbar的items數量，該參數將忽略。
             * [2,2,1,1,1,1,1]        //若index之和超過items數量，多餘的將忽略。
             * [2,2,"q",1,1,1,1]    //"q"爲非法字符，效果至關於[2,2]
             * 調用示例：<p>
             * <pre><code>
             * //從第12個元素開始分,第一欄12個元素,剩下的分到第二欄
             * new Ext.revenue.RevMultiToolbar({
             *         splitIndexs : 12, // or [12]
             *         items : [...]
             * });
             * //第一欄10個元素,第二欄12個元素，剩下的分到第三欄
             * new Ext.revenue.RevMultiToolbar({
             *         splitIndexs : [10,12],
             *         items : [...]
             * });
             * </pre></code>
             * @class Ext.revenue.RevMultiToolbar
             * @extends Ext.Toolbar
             * @author 覃熙科
             */
            Ext.revenue.RevMultiToolbar = Ext.extend(Ext.Toolbar, {
                    //xtype: 'toolbar',
                    autoScroll:    true,
                    splitIndexs : 0, // [0] 默認不分欄
                    constructor : function(config){
                        //統一轉換爲數組處理;過濾無參(沒配置splitIndexs參數)的狀況;
                        var indexs = config.splitIndexs ? [].concat(config.splitIndexs) : [];
                        //過濾非法字符;每次只取第一個數，剩下的遞歸。
                        var index = parseInt(Ext.num(indexs[0],0),10);
                        if( sliceable() ){
                            //slice() 方法可從已有的數組中返回選定的元素,原數組不變.
                            //將多出的部分分到新items中
                            config.newItems = config.items.slice(index);
                            //剩下的splitIndexs,存放起來後面遞歸用;
                            config.newSplitIndexs = indexs.slice(1)||0;
                            //splice() 方法用於插入、刪除或替換數組的元素。
                            //index參數值：如1表示從下標1開始分，原數組只留下[0]位置的元素。
                            var howmany = config.items.length - index;//要移除多少個元素?//IE8及如下必需要此參數！！蹩腳
                            config.items.splice(index,howmany);
                        }
                        Ext.revenue.RevMultiToolbar.superclass.constructor.call(this,config);
                        //檢查是否符合分割的條件
                        function sliceable(){
                            //參數爲空，退出
                            if(index<=0 || indexs.length<=0) return false;
                            //若index大於等於原toolbar items的數量，退出。
                            if(index >= config.items.length) return false;
                            return true;
                        }
                    },
                    listeners : {
                        'render': function(thiz){
                            //新toolbar渲染到原toolbar的父元素下！這樣才與原toolbar平級
                            var renderTo = thiz.el.parent();
                            var newSplitIndexs = thiz.newSplitIndexs;
                            var newItems = thiz.newItems;

                            //排除沒有newItems的狀況
                            if(!newItems) return ;
                            createToolbar();
                            function createToolbar(){
                                //此時再用newItems組建新toolbar
                                var newToolbar = new Ext.revenue.RevMultiToolbar({
                                    autoScroll: true,
                                    renderTo: renderTo,
                                    splitIndexs: newSplitIndexs,
                                    items: newItems
                                });
                            }
                            //刪除newItems，避免重複render
                            delete newItems;
                            delete newSplitIndexs;
                        }
                    }
            });

            //調用示例
            //var tbar1 = new Ext.Toolbar({
            var tbar1 = new Ext.revenue.RevMultiToolbar({
                splitIndexs: [3,3,1,1,1,1],
                items:[
                    {text:'添加按鈕'},{text:'修改按鈕'},{text:'刪除按鈕'},
                    {text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200},
                    {text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200},{text:'很長的按鈕',width:200}
                ]
            });
            //普通方式：new一個toolbar後，render()到已有的tbar下.
            var main = new Ext.Panel({
                title:'一個面板',
                border:false,
                tbar : [{text:'一個按鈕'},{text:'另外一個按鈕'}],
                listeners : {
                    'render': function(){
                        //將tbar1添加到main.tbar的下面
                        tbar1.render(main.tbar);
                    }
                }
            });
            main.render(document.body);
        });
    </script>
 </body>
</html>

View Code

效果預覽(第一個工具欄請忽略)：ide

未分欄前:

使用splitIndexs : 3分欄後：

使用splitIndexs : [3,3]分欄後：

使用splitIndexs : [3,3,1,1]分欄後：

使用splitIndexs : [3,3,1,1,1,1]分欄後：其實後面的參數超了，會忽略掉和上面[3,3,1,1]效果是同樣的。
工具

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。