ExtJs Splitbutton menu - Open in a new tab

Question

I have an ExtJs (ExtJs 4.2) Split button that drops down to give me several options of my choice. Each option is redirected according to my business logic.

My question is: When I right click on one of the options and click open in a new tab, the same page is opened in the new tab with a '#' appended at the end of the same URL. How do I get this to work properly? Thanks.

My ExtJs code -

Ext.onReady(function () {
var but = new Ext.FormPanel({
    items: [{
        xtype: 'splitbutton',
        text: 'Choose an action',

        width: 250,
        scale: 'medium',
        rowspan: 2,

        renderTo: Ext.getBody(),
        margin: '5 15 15 510',
        border: true,
        handler: function () {
            Ext.Msg.alert('<center><br/>Select an option from drop down menu!<center>');
        },
        menu: [{
            text: 'Create Student Record',
            anchor: '100%',
            handler: function () {


                but.getForm().doAction('standardsubmit', {
                    target: '<_s></_s>elf',
                    method: 'POST',
                    standardSubmit: true,
                    formBind: true,
                    url: 'createrecord.jsp'
                })
            }
        }, {
            text: 'Create Class Details',
            anchor: '100%',
            handler: function () {


                but.getForm().doAction('standardsubmit', {
                    target: '_self',
                    method: 'POST',
                    standardSubmit: true,
                    formBind: true,
                    url: 'classrecord.jsp'
                })
            }
        }]
    });

    Ext.create('Ext.Button', {
        text: 'Logout',
        margin: '-85 10 10 1200',
        scale: 'medium',
        renderTo: Ext.getBody(),
        handler: function () {
            but.getForm().doAction('standardsubmit', {
                target: '_self',
                method: 'POST',
                standardSubmit: true,
                url: 'LogoutServlet'
            })
        }


    });

});

score 1 · Accepted Answer · answered Oct 18 '13 at 10:05

As far as I can see you actually can't.

The reason why open in a new tab is shown in menu is that menu item is rendered as a link (<a>) and browser is responsible for that behaviour. But you don't have ordinary links, but ones with JS handler attached. When you click one default behaviour is supressed and you do some POST request using form. When you click on 'open in new tab' JS will not work, and you really can't do anything with that.

What you can do is to use GET requests by providing href in menu items instead of POST and get rid of form. Then it would work.

Understood. So I used `href` instead of the standard submit and it worked just fine. Thanks, appreciate your help. — Anjan Baradwaj, Oct 18 '13 at 10:26

ExtJs Splitbutton menu - Open in a new tab

1 Answers1