Erstellen Sie benutzerdefinierte widget in ExtJS 4?

Möchte ich erweitern color-picker-widget und fügen Sie einige neue features mit, die derzeit fehlt. Derzeit ExtJS Farbauswahl ermöglicht die Auswahl von vordefinierte Farben nur. Ich möchte hinzufügen-Funktionen wie das hinzufügen <canvas> element, das Rendern Farbspektrum und Benutzer können wählen, benutzerdefinierte Farbe, die Möglichkeit zu bieten Farbwert in RGB-oder hex-format, etc.

Habe ich versucht zu erweitern, von Ext.Component Klasse direkt, aber dann habe ich nicht die Standard-Funktionalität von ExtJS Farbauswahl.

Also kann jemand mir bitte sagen, wie erweitern Sie aktuelle widgets von ExtJS und die neue Funktionalität hinzuzufügen?

Vielen Dank im Vorraus!!!!!!

  • Haben Sie versucht, zu erweitern 'Ext.- picker.Farbe' ?
  • Ich bin versucht zu verlängern 'Ext.- picker.Color', aber nicht wissen, wie man Textfelder unter den Standard-Farben, so dass Benutzer in der Lage, RGB-und hex-Werte.
  • Sie überschreiben müssen render Methode: docs.sencha.com/ext-js/4-1/#!/api/...
InformationsquelleAutor Shekhar | 2012-11-07
  1. 2

    Die einfachste Möglichkeit wäre, pack Sie alle in einer Klasse, die Sie erweitern fieldcontainer zusammen mit der Feld-mixin. Hier ist ein Beispiel (einfach typisierten zusammen, völlig ungetestet!). Ich denke, Sie brauchen nicht zu schreiben, die das Rendern so lange, wie Sie verwenden nur native Komponenten mit einheitlichen layouts.

    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;
    }
});
    • Danke für deine Antwort. Ich habe noch eine Frage. In meiner benutzerdefinierten Farbauswahl muss ich hinzufügen, einige html-Elemente wie <canvas> in der ich den render Farbspektrum, so dass Benutzer können wählen Sie " benutzerdefinierte Farbe. So ist es möglich, fügen Sie diese Art von benutzerdefinierten html-Elementen mit obigen code?
    • Auch in diesem Fall müssen Sie schreiben Sie Ihre eigene Komponente. Ich bezweifle, dass die vorhandene Farbauswahl wird Ihnen helfen, auf allen. Mein Fehler, dass ich nicht Lesen Sie Ihre post ganz, tut mir Leid. Trotzdem mein Beispiel oben kann ein guter Ausgangspunkt sein, um zu starten. Nur die picker müssen Sie Ihre eigene...
    • Vielleicht picker hilft Ihnen, schreiben Sie Ihre eigene github.com/osnoek/Ext.ux.ColorPicker/tree/master/...
    InformationsquelleAutor sra
Schreibe einen Kommentar