Почему нет иконки для кнопок в itemselector?

Question

Я пытаюсь использовать Ext.ux.form.ItemSelector, но на кнопках добавления / удаления / верха / вниз нет значков! Код ниже:

Ext.create('Ext.ux.form.ItemSelector', {
        renderTo: Ext.getBody(),
        name: 'channelRange',
        store: Ext.create('Ext.data.Store', {
            fields: ['display', 'value'],
            data: [{
                display: '22',
                value: 2
            }, {
                display: '33',
                value: 3
            }]
        }),
        buttons: ['add', 'remove'],//No icons on the buttons! Why?
        //imagePath: '../ux/images/',
        displayField: 'display',
        valueField: 'value',
        value : [ 3 ],
        allowBlank: false
    });

Смотрите результат здесь, кнопки между двумя мультиселектами не имеют иконки!

Answer 1

Да, это проблема с ItemSelector. Вы не увидите никаких значков на кнопках после любого вида BUILD.

Я смог решить эту проблему навсегда с помощью переопределения ниже CSS. На самом деле, если вы отладите код, вы увидите, что он пытается расположить эти значки кнопок в другом месте.

// Do these overrides in any of your CSS file.
.x-form-itemselector-top {
    background-image: url(images/itemselector/top.gif) !important;
}
.x-form-itemselector-up {
    background-image: url(images/itemselector/up.gif) !important;
}
.x-form-itemselector-add {
    background-image: url(images/itemselector/right.gif) !important;
}
.x-form-itemselector-remove {
    background-image: url(images/itemselector/left.gif) !important;
}
.x-form-itemselector-down {
    background-image: url(images/itemselector/down.gif) !important;
}
.x-form-itemselector-bottom {
    background-image: url(images/itemselector/bottom.gif) !important;
}

ПРИМЕЧАНИЕ: также убедитесь, что у вас есть эти значки на указанном пути (images/itemselector/), В моем случае я скопировал эти значки из "ui-client\ext\packages\ux\classic\resources\images\itemselector" в "ui-client\resources\images\itemselector", Вот "ui-client" моя корневая папка приложения

Надеюсь, что приведенная выше информация поможет.

Answer 2

Решение из моего проекта:

grid.tbar.push({
    itemId  : 'create',
    iconCls : 'iconAdd',
    text : 'Add'
}

и настроить в некотором файле.css:

.iconAdd {background: url(/resources/img/action-add.png) no-repeat !important;}