1

カラー ピッカー ウィジェットを拡張し、現在不足しているいくつかの新機能を追加したいと考えています。現在、ExtJS カラー ピッカーでは、事前定義された色からのみ選択できます。<canvas>カラー スペクトルをレンダリングする要素を追加し、ユーザーがカスタム カラーを選択できるようにする機能、RGB または 16 進形式でカラー値を提供する機能などの機能を追加したいと考えています。

クラスから直接拡張しようとしましExt.Componentたが、ExtJS カラー ピッカーが提供するデフォルトの機能が得られません。

ExtJS の現在のウィジェットを拡張し、新しい機能を追加する方法を教えてください。

前もって感謝します ！！！

4

1 に答える 1

2

最も簡単な方法は、フィールド ミックスインとともにフィールドコンテナを拡張するクラスにすべてをパックすることです。以下に例を示します (単純に一緒に入力しただけで、まったくテストされていません!)。ネイティブ レイアウトでネイティブ コンポーネントだけを使用する限り、レンダリングを書き直す必要はないと思います。

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;
    }
});
于 2012-11-07T10:44:10.780 に答える