EXT JS 4 Adding Query String to Links

Question

Whenever I create a component with a url, Ext Js 4 is adding ?undefined to the link. How can I get rid of that?

Ext.onReady(function() {
                Ext.create('Ext.toolbar.Toolbar', {"items":[{"text":"Dashboard","xtype":"button","target":"_self","href":"https:\/\/domain.tld\/admin\/"},{"text":"Categories","xtype":"button","menu":{"items":[{"text":"New","xtype":"button","target":"_self","href":"https:\/\/domain.tld\/admin\/category\/create\/"}]}}],"renderTo":"admin_menu","width":"100%"});
            });

Clicking dashboard takes you to https://domain.tld/admin/dashboard?undefined

Answer 1

I looked at the source to figure out how it was creating urls. It takes the href config and appends the params config without checking to see if params is defined. Then appends the baseParams config. So if you want a link without the query string, create your button with an empty params config.

Ext.create("Ext.button.Button", {href: 'www.google.com', params:'',text:'Link',target:'_self'});

Answer 2

ExtJS documentation doesn't mention href as a supported config option for Toolbar.

Instead of specifying target and href, I suggest specifying a handler function. Something to the effect of :

{
  text:'Dashboard',
  handler:function(){
    //window.open(...) or window.location.href=...
  }
//...
}