2

ExtJS 4 の新機能は、Model-View-Controller アーキテクチャです。しかし、ExtJs4 の例はいくつかの単純化されたケース向けに作成されているため、そのイデオロギーに違反しています。

MVC JavaScript ファイル (コントローラー、ビュー、モデル、ストア) の標準的な階層を作成しました。ビューファイルには、ある時点でボタンがあります。

オンラインで例を確認すると、通常は次のようなコードです。

 items: [
                    {
                        xtype: 'button',
                        styleHtmlContent: true,
                        text: 'Upload image',
                        flex: 1,
                        formBind: false,
            handler: function() {...}
            ...
                      }]

そのため、ExtJS4 の例でさえ、実行可能部分をフォーム定義内に配置することを「提案」しています。MVC では、すべてのアクションがコントローラーの JavaScript ファイルに存在する必要があります。

もう 1 つの問題は、テーブルのアクション列です。以下は、標準テーブル構成での列の定義です。

    xtype: 'actioncolumn',
     width: 50,
     fixed: true,
     altText: 'Actions',
      items: [
                  {
         icon: '/delete.png',
         tooltip: 'Delete',
         handler:function (grid, rowIndex,colIndex){
                ...}

問題は、ここでハンドラーがいくつかのグリッド固有のパラメーターを受け入れることです!

念のために言っておきますが、extjs 4 では、コントローラ ファイルの正規の例は次のようなものです。

 Ext.define('MyApp.controller.mainController', {
 extend: 'Ext.app.Controller',

 onButtonClick: function(button, e, options) {
  //  alert("Button has been clicked "+button);
     // TODO which button?

},

init: function() {
    this.control({
        "button": {
            click: this.onButtonClick
        }
    });

}
});

私の質問は、コードを次のように再配置する方法です: 1. 画面上の任意のボタンから handler: ディレクティブを削除する 2. コントローラー ファイル内のボタンにアクションをアタッチします。3. actioncolumn テーブルの列に対して同じことを行い、どの行と列でどのアクションがトリガーされたかを正しく認識します (つまり、関数呼び出しを「ハンドラー」からコントローラー ファイルに完全に転送します)。

前もってありがとう、アスカー

4

1 に答える 1

2

ExtJs の例は、すべてが MVC アーキテクチャに対応しているわけではありません。さらに、MVC は必須の設計ではありません。MVC を使用しないことを好むユーザーもいるため、MVC を使用しない例を示すことは依然として重要です。

あなたが尋ねたほとんどすべてのことは、この docs tutorial で答えられています。

3に関しては、あなたの誤解を招くようなものだと思います。コントローラーで「this.onButtonClick」を定義しても、ボタン ハンドラー メソッドと同様に、呼び出された関数はすべてのパラメーターを取得します。通常、呼び出し元コンポーネントは、各イベントで最初に配信されるパラメーターです。もちろん、コントローラーでアクションまたは ID を使用して、より具体的なセレクターを定義することもできます。例については、上記のリンクを再度参照してください。

于 2012-07-09T14:36:32.760 に答える