Extjs, Wie Sie initialisiert werden neue Elemente beim erweitern - ohne Rahmen

Ich versuche, um besser auf die Erweiterung der Klassen von Extjs, und meine Entwicklung haben, die dazu führen mich zu diesem problem:

Habe ich verlängert Ext.Panel und ich möchte, dass meine Erweiterung, um eine Symbolleiste mit einer Schaltfläche als Standard.

myPanel = Ext.extend(Ext.Panel, {
    method: function () {
        return 'response!';
    },

    bbar: new Ext.Toolbar({
        items:
        [
            {
                xtype: 'button',
                text: 'Hit me!',
                handler: function (button, event) {
                    alert(this.method());
                },
                scope: this
            }
        ]
    })
});

Was ich noch nicht gelernt, doch warum ist dies nicht erlaubt. this verweist auf die Globale Reichweite und nicht meine extended panel - so .method() ist undefined innerhalb der handler-Funktion.

InformationsquelleAutor Chau | 2010-06-30
  1. 6

    Du bist der Festlegung der bbar über den Prototyp anstatt sich auf ein bestimmtes Objekt.

    Überschreiben initComponent und verschieben Sie die bbar-definition drin.

    myPanel = Ext.extend(Ext.Panel, {
    method: function () {
        return 'response!';
    },

    initComponent: function() {    
        var bbar = new Ext.Toolbar({
            items:
            [
                {
                    xtype: 'button',
                    text: 'Hit me!',
                    handler: function (button, event) {
                        alert(this.method());
                    },
                    scope: this
                }
            ]
        });

        //Config object has already been applied to 'this' so properties can 
        //be overriden here or new properties (e.g. items, tools, buttons) 
        //can be added, eg:
        Ext.apply(this, {
            bbar: bbar
        });

        //Call parent (required)
        myPanel.superclass.initComponent.apply(this, arguments);

        //After parent code
        //e.g. install event handlers on rendered component
    }
});

    Sehen http://www.sencha.com/learn/Manual:Component:Extending_Ext_Components für eine Vorlage, die Sie verwenden können, wenn die Ausweitung Komponenten

    InformationsquelleAutor ob1
  2. 1

    Haben Sie im Auge zu behalten, dass das anonyme Objekt, das das erste element des items array wird erstellt in dem gleichen Umfang, wie die in die Ext.extend(... ausgeführt wird.

    Wenn Sie hatte dieses:

    var o = { 'a': a, 'b': b, scope: this };

    würden Sie erwarten, dass o.a, o.b, und o.scope hätte die gleichen Werte wie a, b, und this im aktuellen Bereich. Hier ist es ein wenig komplexer, da Sie beim erstellen eines Objekts während der Erstellung ein array während der Erstellung eines Objekts etc., aber die Argumentation ist die gleiche.

    Was Sie tun sollten stattdessen ist zu definieren this.bbar Konstruktor:

    myPanel = Ext.extend(Ext.Panel, {
    method: function () {
        return 'response!';
    },

    constructor: function(config) {
        this.bbar = new Ext.Toolbar({
            items:
            [
                {
                    xtype: 'button',
                    text: 'Hit me!',
                    handler: function (button, event) {
                        alert(this.method());
                    },
                    scope: this
                }
            ]
        });

        myPanel.superclass.constructor.apply(this, arguments);
    }
});
    InformationsquelleAutor Daniel Trebbien
Schreibe einen Kommentar