ExtJS 4에서 맞춤 위젯을 만드는 방법은 무엇입니까?

Question

컬러 피커 위젯을 확장하고 여기에없는 새로운 기능을 추가하고 싶습니다. 현재 ExtJS 색상 선택기를 사용하면 미리 정의 된 색상 만 선택할 수 있습니다. 내가 Ext.Component 클래스에서 확장을 시도

등 컬러 스펙트럼을 렌더링하고 사용자가 RGB 또는 16 진수 형식으로 색상 값을 제공 할 수있는 능력을 사용자 정의 색상을 선택할 수 있습니다 <canvas> 요소를 추가하는 등의 기능을 추가 할 직접하지만, ExtJS 색상 선택기에서 제공하는 기본 기능을 사용하지 않습니다.

누구나 ExtJS의 현재 위젯을 확장하고 새 기능을 추가하는 방법을 알려주십시오.

미리 감사드립니다.

Answer 1

가장 쉬운 방법은 필드 믹스와 함께 fieldcontainer을 확장하는 클래스에 모두 팩하는 것입니다. 다음은 예제입니다 (간단히 입력하면 완전히 테스트되지 않았습니다!). 기본 레이아웃으로 네이티브 구성 요소 만 사용하는 경우 렌더링을 다시 작성할 필요가 없다고 생각합니다.

Ext.define('Ext.ux.form.field.AdvancedPicker', { 
    extend: 'Ext.form.FieldContainer', 
    mixins: { 
     field: 'Ext.form.field.Field' 
    }, 
    alias: 'widget.advancedpicker', 
    layout: 'hbox', 
    width: 200, 
    height: 22, 
    combineErrors: true, 
    msgTarget: 'side', 

    pickerCfg: null, 
    textfieldCfg: null, 

    initComponent: function() { 
     var me = this; 
     if (!me.pickerCfg) me.pickerCfg = {}; 
     if (!me.textfieldCfg) me.textfieldCfg = {}; 
     me.buildField(); 
     me.callParent(); 
     me.pickerField = me.down('picker') 
     me.textField = me.down('textfield') 

     me.initField(); 
    }, 

    //@private 
    buildField: function() { 
     var me = this; 
     me.items = [ 
     Ext.apply({ 
      xtype: 'picker', 
      submitValue: false, // this one shouldn't get submitted 
      width: 100, 
      flex: 2 
     }, me.pickerCfg), 
     Ext.apply({ 
      xtype: 'textfield', 
      submitValue: false, // this one shouldn't get submitted 
      width: 80, 
      flex: 1 
     }, me.textfieldCfg)] 
    }, 

    getValue: function() { 
     var me = this, 
      value; 
     // getting the value form the nested fields 
     return value; 
    }, 

    setValue: function (value) { 
     var me = this; 
     // setting the values to the nested fields 
    }, 

    getSubmitData: function() { 
     var me = this, 
      data = null; 
     // getting the value form the nested field which should get submit in formatted manner (if needed. otherwise just call getValue()) 
     return data; 
    } 
});