為什么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的問題。 進行任何形式的構建后，您都不會在按鈕上看到任何圖標。

通過覆蓋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;}