How to link buttons in toolbar in Sencha touch?

问题

I have multiple buttons loading up in the button toolbar I need those buttons to go to different links. However, I have not been able to figure it out. Below is what I tried to do but it does not work.

        //Below are three buttons that need to go to three different links 
    var buttonsGroup1 = new Ext.Button({
    text: 'MESSAGES',
    handler: tapHandler
    });

    var buttonsGroup2 = new Ext.Button({
    text: 'HOLDS',
    handler: tap2Handler
    });

    var buttonsGroup3 = new Ext.Button({
    text: 'FINANCIALS',
    handler: tapHandler
    });

    //Click on the button and it goes to these links 
    var tapHandler = function (btn, evt) {
        window.location = 'index.html';
    };

    var tap2Handler = function (btn, evt) {
        window.location = 'redirect.php';
    };

    //Combine all the variables above and some other stuff and then add it to docked items very object oriented =)
    var dockedItems = [
    {
        xtype: 'toolbar',
        title: 'Student Portal',
        ui: 'light',
        dock: 'top',
        items: buttonsSpecTop,
        defaults: { handler: tapHandler }
    },  
    {
        xtype: 'toolbar',
        ui: 'dark',
        items: [buttonsGroup1, buttonsGroup2, buttonsGroup3], //This is where I load up all the buttons 
        dock: 'bottom',
        layout:{
        pack: 'center'
        },
        defaults: [handler: tapHandler, handler: tap2Handler] //This is the handler for the links

    }];

回答1:

For each button config, add one extra config param say actionUrl this way:

{
    xtype: 'toolbar',
    actionUrl : 'http://www.google.com',
    title: 'Student Portal',
    ui: 'light',
    dock: 'top',
    items: buttonsSpecTop,
    defaults: { handler: tapHandler }
}

Now, for tapHandler function, the first parameter is the button instance. So, you can get the url this way:

function tapHandler(btn){
   console.log(btn);
   window.open(btn.actionUrl);
}

And you cannot put things in javascript this way inside an array:

defaults: [handler: tapHandler, handler: tap2Handler]

You have to use an object for that, similar to the first one:

defaults: { handler: tapHandler }

And, you cannot put multiple parameter of same name within a single object, only one "handler" will go there. And for defaults, only one handler will be applied to all the items. So, if you want individual handlers for individual buttons, use handler listener to each of the button.

来源：https://stackoverflow.com/questions/6473719/how-to-link-buttons-in-toolbar-in-sencha-touch

标签

button

sencha-touch

extjs