Интеграция Ext.js и jscolor

Question

Я не могу интегрировать этот набор цветов Javascript в свое приложение. Я использую следующий код: установка

jscolor:

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

http://jscolor.com/

Ext. js part:

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

если вы хотите все еще имеют правильное поле ExtJS со значениями, возможностями fieldLabel и т. д., вам нужно будет расширить Ext.form.field.Base и посмотреть, как добавить cls в inputEl (не должно быть очень сложно, вы можете сделать это по методу afterRender или изменить inputAttrTpl).

EDIT: И, кажется, вам нужно позвонить jscolor.init()после рендеринга вами компонент !!! EDIT2: с использованием ExtJS 4.2, xtype не признает, так что вы должны создать компонент с Ext.create('widget.component, {...})

Надеется, что это помогает

Рабочей скрипку: https://fiddle.sencha.com/#fiddle/15q9