ExtJS 4 菜单颜色选择器中的 CustomColors 颜色 (Ext.menu.ColorPicker)答案

【问题标题】：CustomColors colors in ExtJS 4 menu color picker (Ext.menu.ColorPicker)ExtJS 4 菜单颜色选择器中的 CustomColors 颜色 (Ext.menu.ColorPicker)
【发布时间】：2014-04-21 00:42:25
【问题描述】：

感谢您查看此消息！

我在使用 Ext.menu.ColorPicker 的一个项目中遇到问题我不知道为什么（我希望这可能是非常简单的事情）但是选择器根本不假设我需要它拥有的自定义颜色！

这是一些示例代码，可以说明我的问题：

Ext.onReady(function () {
var customColors = [
        'fa7166', 'cf2424', 'a01a1a', '7e3838', 'ca7609', 'f88015', 'eda12a', 'd5b816',
        'e281ca', 'bf53a4', '9d3283', '7a0f60', '542382', '7742a9', '8763ca', 'b586e2',
        '7399f9', '4e79e6', '2951b9', '133897', '1a5173', '1a699c', '3694b7', '64b9d9',
        'a8c67b', '83ad47', '2e8f0c', '176413', '0f4c30', '386651', '3ea987', '7bc3b5'
    ];

var picker = Ext.create('Ext.picker.Color');

picker.colors[0] = '556677';
picker.colors = customColors;

    var btn = Ext.create('Ext.Button', {
        menu: {
            xtype: 'colormenu',
            picker: picker,
            value: 'FFFFFF',
            handler: function (obj, rgb) {
                Ext.Msg.alert('border-color: ' + rgb.toString());
            } // handler
        }, // menu
        renderTo: Ext.getBody(),
        text: 'Menu Button'
    }).showMenu();
}); // onReady()

行：

picker.colors[0] = '556677';

完美运行，你看到了吗，我可以更改数组的元素 0。

但是这一行：

picker.colors = customColors;

应该将整个新颜色数组分配给选择器，我不知道为什么，但它似乎不起作用。

我需要组件具有所有这些颜色，32 种颜色而不是选择器上默认的 40 种默认颜色！

我该怎么做？
提前谢谢...

【问题讨论】：

customColors 不是 costumColors

标签： javascript extjs extjs4 color-picker

【解决方案1】：

您是否使用了错误的小部件组合，您将 Ext.menu.ColorPicker 嵌入到另一个 Ext.menu.Menu 中，而不是按原样使用 Ext.menu.ColorPicker，然后您就可以使用了，就像这样

var customColors = ['fa7166', 'cf2424', ...];
var pickerMenu = Ext.create('Ext.menu.ColorPicker');
pickerMenu.picker.colors = customColors;

var btn = Ext.create('Ext.Button', {
    menu: pickerMenu, // menu
    renderTo: Ext.getBody(),
    text: 'Menu Button'
}).showMenu();

Here's 代码的修改版本，适用于自定义颜色列表。希望对解决您的问题有所帮助。

【讨论】：