1

プロジェクトには再利用可能なコードがたくさんあります（一部のGUI、グリッドなど）。Extjs 4は、再利用可能なコードを処理するための機能を提供しますか？例：Javaには、任意のプロジェクトにインポートできるライブラリーの機能があります。

4

4 に答える 4

7

ExtJsは、そのコアをよく知っていれば、高レベルの再利用性を提供します。

これらのさまざまな概念が思い浮かびます。

クラスシステム

ExtJの最も強力な機能の1つは、すべてがクラス階層に編成されていることです。したがって、基本的に設計哲学は、JAVAまたはC++の場合と同様です。

たとえば、グリッドにヘッダーが表示されないことを考慮してください。あなたは書くでしょう：

Ext.define('HeadlessGrid', {
    extend: 'Ext.grid.Panel',

    hideHeaders: true,
});

したがって、その構成HeadlessGridを継承しExt.grid.Panel、変更するだけhideHeadersです。コンポーネントの他の多くの構成を変更できますが、そのメソッドをオーバーライドすることによって実行される動作も変更できます。

Extクラスをサブクラス化する代わりに、Extクラス自体を変更したい場合があります。

だからこのようなもの：

Ext.override( Ext.grid.Panel, {
    hideHeaders: true,
});

すべてのグリッドコンポーネントがデフォルトでヘッダーを表示しないことを意味します。

名前空間

「ライブラリ」の概念は、名前空間を使用して実現できます。したがって、前の例を続けるには、次のようになります。

Ext.define('Ext.Juice.HeadlessGrid', {
    extend: 'Ext.grid.Panel',

    hideHeaders: true,
});

現在、名前空間HeadlessGridに属しています。Ext.Juice

クラスローダーは次のように設定できます。

Ext.Loader.setPath('Ext.Juice', '../../libs/Juice');

これで、そのフォルダーの下にあるクラスは、作成したすべてのアプリケーションで再利用できます。

プラグイン

プラグインを使用すると、継承ではなく構成によってコンポーネントを拡張（表示）できます。したがって、このプラグインをグリッドに追加すると、ヘッダーが非表示になります。

Ext.define("Ext.plugin.Decapitator", {
    extend   : "Ext.AbstractPlugin",
    alias    : "plugin.decapitator",

    init : function( aPanel ) { 
        aPanel.hideHeaders = true;
    },

});

Mixins

ミックスインを使用すると、多重継承のように、クラスを一緒にミックスできます。

次のコード（ドキュメントから）は、CanSingクラスとクラスを混合しMusicianます。

Ext.define('CanSing', {
     sing: function() {
         alert("I'm on the highway to hell...")
     }
});

Ext.define('Musician', {
     mixins: ['CanSing']
})
于 2013-03-01T14:07:20.693 に答える
4

@Mchl、

extjs 4.x バージョンの MVC 構造または一般的な構造を使用していますか。MVC 構造を使用している場合は、app フォルダー内に別のフォルダーを作成できます ( view、model、controller という名前のフォルダーが既に存在します)。アプリ/コンポーネント . そして as を使ってクラスを作成します

Ext.define('MyApp.component.componentName', {.....});

コードをプリロードするには Ext.require('MyApp.component.componentName') を含める必要があることに注意してください。

于 2013-03-01T12:07:00.907 に答える
3

クラスを定義しExt.defineて、アプリケーション全体でExt.create(または xtypes を使用して) 再利用できます。

他のプロジェクトで同じ画面/クラスが必要な場合は、クラスを定義したファイルをコピーして使用できます。

例：

//Defining Class
Ext.define('Stack.Overflow', {
    alias: 'widget.SO',

    someProperty: 'something',
    someMethod: function(s) {
        alert(s + this.someProperty);
    }
});

//Creating class with Ext.create:
var myClass = Ext.create('Stack.Overflow', {
    extraProperty: 1337
});

//Creating component inline:
var panel = Ext.widget('panel', { // Equivalent to Ext.create('widget.panel')
    title: 'Panel',
    items: [{
        xtype: 'SO',
        extraColor: '#BADA55'
    },{
        xtype: 'SO', //reusable class
        extraColor: '#FFFF00'
    }]
});
于 2013-03-01T10:57:07.617 に答える
0

それは.... 同じです... 再利用したいコンポーネントをライブラリに入れ、それを使用Ext.require()してプロジェクトにインポートします。

于 2013-03-01T09:31:29.767 に答える