extjs Issue extending Ext.grid.header.Container

Question

I am trying to create remote multi sort.

fields are separated by comma.

MINUS stands for DESC

EXAMPLE localhost:8080/api/?sort=id,-externalId&page=1&start=0&limit=200

headerclick works fine while i am writing it in grid columns config.

but when i am trying to create MultisortHeader component and load it in with Ext.require i see just white page.

no errors, nothing.

Please give me a clue. Thanks.

Before controller

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.ux.grid.header.MultisortHeader'

]);

Component

Ext.define('Ext.grid.header.MultisortHeader', 
{    extend:'Ext.grid.header.Container',
alias:'widget.MultisortHeader',
requires: [
'Ext.grid.ColumnLayout',
'Ext.grid.column.Column',
'Ext.menu.Menu',
'Ext.menu.CheckItem',
'Ext.menu.Separator',
'Ext.grid.plugin.HeaderResizer',
'Ext.grid.plugin.HeaderReorderer'
],

initComponent:function () {
var me = this;
this.callParent(arguments);
},
listeners:{
headerclick:function (ct, column, e, el, opts) {

var dataIndex = column.dataIndex,
    grid = this.up('grid'),
    item,
    sortline = '';
grid.remoteSorters = grid.remoteSorters || {};
grid.remoteSorters[dataIndex] = Ext.String.toggle(grid.remoteSorters[dataIndex], 'ASC', 'DESC');
for (item in grid.remoteSorters) {
    if (grid.remoteSorters[item] == 'DESC') {
        sortline += '-';
    }
    sortline += item;
    sortline += ',';
}
if (sortline.charAt(sortline.length - 1) == ',') {
    var sortlineTrim = sortline.substring(0, sortline.length - 1);

} else {
    sortlineTrim = sortline;
}

var store = grid.getStore();
var proxy = store.getProxy();
proxy.extraParams.sort = sortlineTrim;
store.load();

}
}

});