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;');
}
});
}
});
EXt.form.field.Picker
在上面的代码示例中,我通过实现根据ExtJS 4.0.7 sencha docs的创建选择器方法创建了一个颜色选择器。
第一个问题
只有当我将浮动配置指定为 true 时(如上面示例中所述),我才能获得输出。如果我删除配置或将其设为假,我无法在输出中看到颜色选择器,那么背后的原因是什么,谁能解释为什么浮动配置应该为真?
第二个问题
通过使用上面的示例代码,我得到了输出,但是颜色选择器渲染有一些问题,有一次它会在单击选择器字段下拉时正确显示,但有时颜色选择器会出现在字段上方或下拉时页面上的某个位置是点击。那么如何避免这种情况呢?单击选择器下拉菜单时,我想在下面显示它。
第三个问题
我想应用带有所选颜色值的选择器的背景,所以我添加了以下代码行:
Ext.getCmp('colorpicker')
.setFieldStyle('background-color:x ;background-image: none;');`
选择的颜色值在哪里x
(比如#000000
我们从颜色选择器中选择黑色时的颜色值),但它没有将颜色应用于文本字段
当我用那行代码替换x
value 时说:#000000
Ext.getCmp('colorpicker')
.setFieldStyle('background-color:#000000 ;background-image: none;');
然后它为归档背景显示黑色,但我希望将颜色更改为选定的颜色,所以我不能给出静态颜色值。