接著我們將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的型態,就可以一直使用下去了,也不用擔心難以維護。

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

ext-menu1 

創作者介紹

殘想的程式筆記

blakechen 發表在 痞客邦 留言(0) 人氣()