Question

我无法将此Javascript颜色选择器集成到我的应用中。我使用以下代码：

jscolor安装：

<script src="jscolor.js"></script>
Color: <input class="jscolor" value="ab2567">

http://jscolor.com/

外部。 js部分：

xtype: 'component',
    cls: 'jscolor',
    componentCls: 'jscolor',
    html: {
        html: '<input  type= "text" class="jscolor" />'
    },
    itemId: 'colorPicker',
    listeners: {
        afterrender: {
            fn: me.onComponentAfterRender,
            scope: me
        }
    }
},

渲染表单时，输入类型不会呈现为颜色选择器。我在这里错过了什么。

Answer 1

我不确切地知道错误的来源，但如果您只想渲染输入（没有字段标签），我建议autoEl配置：

xtype: 'component',
cls: 'jscolor',
autoEl: {
    tag: "input",
    type: "text"
},
itemId: 'colorPicker'
listeners: {
    afterrender: {
        fn: me.onComponentAfterRender,
            scope: me
        }
    }
}

如果你想拥有一个带有value，fieldLabel等功能的正确ExtJS字段，你必须扩展Ext.form.field.Base，看看如何将cl添加到inputEl（不应该非常复杂，您可以在afterRender方法上执行此操作或更改inputAttrTpl。

编辑：您似乎需要在渲染组件之后调用jscolor.init() ！ EDIT2：使用ExtJs 4.2，xtype无法识别，因此您需要使用Ext.create('widget.component, {...})

创建组件
希望有所帮助

工作小提琴：https://fiddle.sencha.com/#fiddle/15q9

集成Ext.js和jscolor

1 个答案: