icons - 为什么 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
    });

在这里查看结果，2个多选之间的按钮没有图标！

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;}