extjs 中 如何根据下拉菜单名字 转到对应的页

Question

/////
////menus.js
///
Ext.onReady(function(){
 var tb = new Ext.Toolbar({width:'200'});
  tb.render('toolbar');
   tb.add( 
        new Ext.Toolbar.MenuButton({
            text: '受発注伝票',
            handler: onButtonClick,
            iconCls: 'blist',
            menu : {items: [
                        {text: '<b>受発注伝票</b>', handler: onItemClick}
                     ]}
        }),
         new Ext.Toolbar.MenuButton({
            text: '支払予定一覧',
            handler: onButtonClick,
          
            iconCls: 'blist',
           
            menu : {items: [
                        {text: '<b>支払予定一覧</b>', handler: onItemClick}
                     ]}
        }),
        new Ext.Toolbar.MenuButton({
            text: '照合予定一覧',
            handler: onButtonClick,
            //tooltip: {text:'This is a QuickTip with autoHide set to false and a title', title:'Tip Title', autoHide:false},
            iconCls: 'blist',
            // Menus can be built/referenced by using nested menu config objects
            menu : {items: [
                        {text: '<b>照合予定一覧</b>', handler: onItemClick}
                     ]}
        }),
        new Ext.Toolbar.MenuButton({
            text: '入金予定一覧',
            handler: onButtonClick,
            //tooltip: {text:'This is a QuickTip with autoHide set to false and a title', title:'Tip Title', autoHide:false},
            iconCls: 'blist',
            // Menus can be built/referenced by using nested menu config objects
            menu : {items: [
                        {text: '<b>入金予定一覧</b>', handler: onItemClick}
                     ]}
        }),
        new Ext.Toolbar.MenuButton({
            text: 'logout',
            handler: onButtonClick,
            //tooltip: {text:'This is a QuickTip with autoHide set to false and a title', title:'Tip Title', autoHide:false},
            iconCls: 'blist',
            // Menus can be built/referenced by using nested menu config objects
            menu : {items: [
                        {text: '<b>logout</b>', handler: onItemClick}
                     ]}
        })
        );    menu.addSeparator();    function onButtonClick(btn){
        Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
    }    function onItemClick(item){
        Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
    }    function onItemCheck(item, checked){
        Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
    }    function onItemToggle(item, pressed){
        Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
    }
});

Answer 1

不知道你要在什么时候跳转，如果菜单值被改变就跳的话，可以用onchange事件，
得到菜单被选择的名字所对应的code，根据这个code找到对应的页面跳转如果是菜单值选择完点了按钮跳的话，
同样是先得到菜单被选择的名字所对应的code，再根据这个code找到对应的页面跳转不清楚你具体是什么地方不会，或者你再说详细点

Answer 2

你也没说究竟是哪种情况啊，给你个例子吧第一种        // 菜单，菜单值被改变就跳的
        <html:select property="bigType" onchange="testChange(this);">
            <html:optionsCollection name="<%= Constants.BOX_BIG_TYPE_LIST %>" />
        </html:select>
function selectChange(obj) {
    var code = obj.options[obj.selectedIndex].value; //取得菜单被选中的code
    if(code == "1"){
        window.open("../1Action.do", "_self", ""); // 跳转页面
} else if(code == "2"){
        window.open("../2Action.do", "_self", "");
} else if(code == "3"){
        window.open("../3Action.do", "_self", "");
}
......
}第二种        // 还是那个菜单，这次是由点击其它地方的按钮跳的
        <html:select property="bigType">
            <html:optionsCollection name="<%= Constants.BOX_BIG_TYPE_LIST %>" />
        </html:select>
function theClick() { // 按钮事件
var obj = document.getElementById('bigType'); // 取得菜单对象
    var code = obj.options[obj.selectedIndex].value;
    if(code == "1"){
        window.open("../1Action.do", "_self", "");
} else if(code == "2"){
        window.open("../2Action.do", "_self", "");
} else if(code == "3"){
        window.open("../3Action.do", "_self", "");
}
......
}

Answer 3

我都不知道你在干什么要什么？
你贴出来干什么？我也贴！/*
 * Ext JS Library 2.0
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [email protected]
 * 
 * http://extjs.com/license
 */Ext.onReady(function(){
    Ext.QuickTips.init();    // Menus can be prebuilt and passed by reference
    var dateMenu = new Ext.menu.DateMenu({
        handler : function(dp, date){
            Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
        }
    });    var colorMenu = new Ext.menu.ColorMenu({
        handler : function(cm, color){
            Ext.example.msg('Color Selected', 'You chose {0}.', color);
        }
    });    var menu = new Ext.menu.Menu({
        id: 'mainMenu',
        items: [
            {
                text: 'I like Ext',
                checked: true,       // when checked has a boolean value, it is assumed to be a CheckItem
                checkHandler: onItemCheck
            },
            {
                text: 'Ext for jQuery',
                checked: true,
                checkHandler: onItemCheck
            },
            {
                text: 'I donated!',
                checked:false,
                checkHandler: onItemCheck
            }, '-', {
                text: 'Radio Options',
                menu: {        // <-- submenu by nested config object
                    items: [
                        // stick any up in a menu
                        '<b class="menu-title">Choose a Theme</b>',
                        {
                            text: 'Aero Glass',
                            checked: true,
                            group: 'theme',
                            checkHandler: onItemCheck
                        }, {
                            text: 'Vista Black',
                            checked: false,
                            group: 'theme',
                            checkHandler: onItemCheck
                        }, {
                            text: 'Gray Theme',
                            checked: false,
                            group: 'theme',
                            checkHandler: onItemCheck
                        }, {
                            text: 'Default Theme',
                            checked: false,
                            group: 'theme',
                            checkHandler: onItemCheck
                        }
                    ]
                }
            },{
                text: 'Choose a Date',
                iconCls: 'calendar',
                menu: dateMenu // <-- submenu by reference
            },{
                text: 'Choose a Color',
                menu: colorMenu // <-- submenu by reference
            }
        ]
    });    var tb = new Ext.Toolbar();
    tb.render('toolbar');    tb.add({
            text:'Button w/ Menu',
            iconCls: 'bmenu',  // <-- icon
            menu: menu  // assign menu by instance
        }, 
        new Ext.Toolbar.MenuButton({
            text: 'Split Button',
            handler: onButtonClick,
            tooltip: {text:'This is a QuickTip with autoHide set to false and a title', title:'Tip Title', autoHide:false},
            iconCls: 'blist',
            // Menus can be built/referenced by using nested menu config objects
            menu : {items: [
                        {text: '<b>Bold</b>', handler: onItemClick},
                        {text: '<i>Italic</i>', handler: onItemClick},
                        {text: '<u>Underline</u>', handler: onItemClick}, '-',{
                        text: 'Pick a Color', handler: onItemClick, menu: {
                        items: [
                                new Ext.menu.ColorItem({selectHandler: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
    });    menu.addSeparator();
    // Menus have a rich api for
    // adding and removing elements dynamically
    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: '<b>Quick Tips</b><br/>Icon only button with tooltip'
    }, '-');    // add a combobox to the toolbar
    var store = new Ext.data.SimpleStore({
        fields: ['abbr', 'state'],
        data : Ext.exampledata.states // from states.js
    });
    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);    // functions to display feedback
    function onButtonClick(btn){
        Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
    }    function onItemClick(item){
        Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
    }    function onItemCheck(item, checked){
        Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
    }    function onItemToggle(item, pressed){
        Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
    }});