如何在ExtJS 4中創建自定義小部件？

Question

我想擴展顏色選擇器小部件，並添加一些新的功能，它目前缺少它。目前ExtJS顏色選擇器只允許我們從預定義顏色中進行選擇。我要添加如添加<canvas>元件，其將呈現顏色光譜和用戶將能夠選擇自定義顏色，能力在RGB或十六進制格式提供顏色值等特徵

我試圖從Ext.Component類直接延伸但那麼我沒有得到由ExtJS顏色選擇器提供的默認功能。

那麼任何人都可以告訴我如何擴展ExtJS的當前小部件並添加新的功能？

在此先感謝！

Answer 1

最簡單的方法是把它全部打包到一個擴展名爲fieldcontainer的字段以及字段mixin中。這裏有一個例子（簡單的輸入，完全沒有經過測試！）。我認爲只要使用本地組件和本機佈局，就不需要重寫渲染。

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