颜色选择器实现

Question

Ext.create('Ext.form.field.Picker', {
    renderTo: Ext.getBody(),
    id: 'colorpicker',

    createPicker: function() {
        return Ext.create('Ext.picker.Color', {
            resizable: true,
            floating: true,

            select: function(selColor) {
                Ext.getCmp('colorpicker').setValue("#" + selColor);
                var x = Ext.getCmp('colorpicker').getValue();
                alert(x);
                Ext.getCmp('colorpicker').setFieldStyle('background-color:x ;background-image: none;');
            }
        });
    }
});

在上面的代码示例中，我根据ExtJS 4.0.7 sencha docs实现EXt.form.field.Picker的创建选择器方法，创建了一个颜色选择器。

第一个问题

只有当我将浮动配置指定为true时才能获得输出（如上面的示例所述）。如果我删除配置或使其为假，我无法在输出中看到颜色选择器，那么有什么原因可以解释为什么浮动配置应该是真的？

第二个问题

通过使用上面的示例代码，我得到了输出但是颜色选择器渲染有一些问题，一次它点击选择器字段下拉菜单时会正确显示但有时颜色选择器将出现在字段上方或页面上的某个位置单击下拉菜单。那么如何避免这种情况呢？我想在点击选择器下拉时在下面显示它。

第三个问题

我想应用所选颜色值的选择器背景，所以我添加了以下代码行：

Ext.getCmp('colorpicker')
   .setFieldStyle('background-color:x ;background-image: none;');`

其中x是所选颜色值（比如#000000是从颜色选择器中选择黑色时的颜色值）但是它没有将颜色应用于文本字段

当我在该行代码中用x替换#000000值时说：

Ext.getCmp('colorpicker')
    .setFieldStyle('background-color:#000000 ;background-image: none;'); 

然后它为显示的背景显示黑色但我想将颜色更改为选定的颜色，因此我无法给出静态颜色值。

Answer 1

关于第二个问题： 而不是将字符串'x'传递给函数...

Ext.getCmp('colorpicker').setFieldStyle('background-color:x ;background-image: none;');

你应该尝试类似的东西：

Ext.getCmp('colorpicker').setFieldStyle('background-color:' + x + ' ;background-image: none;');