殘想的程式筆記

接著我們將Menu的部分補完，上一篇我們將很多元件組合成Menu然後將menu嵌入Tools Bar中，現在我們要直接在Tools Bar上作修改。 

一樣我們先來看原始碼：

    tb.add({
            text:'Button w/ Menu',
            iconCls: 'bmenu',  // <-- icon
            menu: menu  // assign menu by instance
        }, {
            text: 'Users',
            iconCls: 'user',
            menu: {
                xtype: 'menu',
                plain: true,
                items: {
                    xtype: 'buttongroup',
                    title: 'User options',
                    autoWidth: true,
                    columns: 2,
                    defaults: {
                        xtype: 'button',
                        scale: 'large',
                        width: '100%',
                        iconAlign: 'left'
                    },
                    items: [{
                        text: 'User
manager',
                        iconCls: 'edit'
                    },{
                        iconCls: 'add',
                        width: 'auto',
                        tooltip: 'Add user'
                    },{
                        colspan: 2,
                        text: 'Import',
                        scale: 'small'
                    },{
                        colspan: 2,
                        text: 'Who is online?',
                        scale: 'small'
                    }]
                }
            }
        },
        new Ext.Toolbar.SplitButton({
            text: 'Split Button',
            handler: onButtonClick,
            tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
            iconCls: 'blist',
            // Menus can be built/referenced by using nested menu config objects
            menu : {
                items: [{
                    text: 'Bold', handler: onItemClick
                }, {
                    text: 'Italic', handler: onItemClick
                }, {
                    text: 'Underline', handler: onItemClick
                }, '-', {
                    text: 'Pick a Color',
                    handler: onItemClick,
                    menu: {
                        items: [
                            new Ext.ColorPalette({
                                listeners: {
                                    select: function(cp, color){
                                        Ext.example.msg('Color Selected', 'You chose {0}.', color);
                                    }
                                }
                            }), '-',
                            {
                                text: 'More Colors...',
                                handler: onItemClick
                            }
                        ]
                    }
                }, {
                    text: 'Extellent!',
                    handler: onItemClick
                }]
            }
        }), '-', {
        text: 'Toggle Me',
        enableToggle: true,
        toggleHandler: onItemToggle,
        pressed: true
    });

var item = menu.add({
        text: 'Dynamically added Item'
    });
    // items support full Observable API
    item.on('click', onItemClick);

    // items can easily be looked up
    menu.add({
        text: 'Disabled Item',
        id: 'disableMe'  // <-- Items can also have an id for easy lookup
        // disabled: true   <-- allowed but for sake of example we use long way below
    });
    // access items by id or index
    menu.items.get('disableMe').disable();

    // They can also be referenced by id in or components
    tb.add('-', {
        icon: 'list-items.gif', // icons can also be specified inline
        cls: 'x-btn-icon',
        tooltip: 'Quick Tips
Icon only button with tooltip'
    }, '-');

    var scrollMenu = new Ext.menu.Menu();
    for (var i = 0; i < 50; ++i){
        scrollMenu.add({
            text: 'Item ' + (i + 1)
        });
    }
    // scrollable menu
    tb.add({
        icon: 'preview.png',
        cls: 'x-btn-text-icon',
        text: 'Scrolling Menu',
        menu: scrollMenu
    });

    // add a combobox to the toolbar
    var combo = new Ext.form.ComboBox({
        store: store,
        displayField: 'state',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select a state...',
        selectOnFocus:true,
        width:135
    });
    tb.addField(combo);
tb.doLayout();

這是之前的寫法：

tb.add({
            text:'Button w/ Menu',
            iconCls: 'bmenu',  // <-- icon
            menu: menu  // assign menu by instance
        });

可以發現我們新增了很多功能上去，增加的方法都大同小異，比較特別的是他能夠自由的去控制、切割按鈕的排列方式，詳細使用方法在第8行。

另外還有一個很實用的功能，在45行我們可以用tooltip去簡單作出很精緻的註解功能。

第108行我們可以看到，Ext Js可以很簡單作出scrollMenu的功能，甚至能夠用迴圈去賦予元素的名稱，很便於使用。

我們可以發現，只要是在tb.doLayout()之前，我們都還能對他作修改，這一點不管是在Menus(85行)或是Tools Bar(115行)都是成立的。

也就是說我們可以在不破壞原本的結構的情況下，新增新的功能進去，這一點對於常常需要處理一些大同小異Menu的我來說，真是個很方便的功能，我只需要建立一個通用的Menu的型態，就可以一直使用下去了，也不用擔心難以維護。

最後我們來看他完成後的樣子：