3

この問題についてしばらく考えていましたが、合理的な解決策が思い浮かびません。私がやりたいのは、ビュー内のテキストフィールド/その値のゲッター/セッターを作成することです。推奨される Ext JS の方法は、コントローラー内で参照を使用し、その方法で取得することだと認識していますが、それはあまりオブジェクト指向ではないように感じます。ゲッターが未定義を返した場合にメッセージを出力したいので、これらのゲッターとセッターもラップする必要があります。私がやりたいのは、独自のゲッター/セッターを作成するか、デフォルトのゲッター/セッターをオーバーライドすることです。これを達成するために私が考えていたいくつかの方法があります。

を使用できると思ってconfig {}いましたが、定義したい変数に対してのみ機能するようです。それから私はどうにかしてIDを使用することを考えていましたが、コミュニティはそれが良い習慣であるかどうかで分かれているようです. これが私の現在の解決策につながります...ラッピング。これが私のコードです：

ログインウィンドウ

Ext.define('MyApp.view.LoginWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.loginWindow',
    autoShow: true,
    closable: false,
    border: 0,
    plain: true,
    allowBlank: false,
    title: "Enter your username",
    modal: true,
    config: {
        buttons: [{
            text: "Ok"
        }],
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Username',
            id: 'loginUserInput',
            name: 'loginUserInput',
            msgTarget: 'under',
            validator: function(value) {
                if (Ext.isEmpty(value)) {
                    return "You need to enter a username.";
                }
                return true;
            }
        }]
    },

    constructor: function(config) {
        this.callParent(config);
    },

    getButton: function() {
        console.log('here');
    }
});

マイコントローラー

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

    requires: [
        'Views.ChatModule.view.LoginWindow'
    ],

    refs: [{
        ref: 'loginWindow',
        selector: 'loginWindow',
        xtype: 'loginWindow',
        autoCreate: true
    }, {
        ref: 'loginUserInput',
        selector: '#loginUserInput'
    }],

    init: function() {
        // The events controller oversees
        this.control({
            'loginWindow button[text="Ok"]': {
                'click': this.onSubmitLoginWindow
            }
        });
    },

    getLoginUserInputValue: function() {
        var loginUserInput = this.getLoginUserInput();
        if (loginUserInput) {
            var username = loginUserInput.getValue();
            if (username) {
                console.log(username);
            } else {
                console.warn("username is undefined");
            }
        }
        console.warn("loginUserInput is undefined");
    },

    onSubmitLoginWindow: function(button, event, eOpts) {
        this.getLoginUserInputValue();
    }
});

これは機能し、非常に細かいことだと思いますが、コントローラーにゲッターを入れるのは適切ではありません。ウィンドウにあれば、よりオブジェクト指向になる気がします。ただし、ウィンドウに配置する場合、唯一のオプションは、ID に依存するか、ウィンドウの initComponent に手動でテキスト フィールドを作成することだと思います。 ... doLayout も呼び出す必要があるためです。

繰り返しますが、ウィンドウにゲッター/セッターがあればいいのですが、コントローラーがオブジェクトを参照する方法と同様に、それを参照する簡単な方法を探しています。主な答えは、id を使用Ext.ComponentQuery.query('#loginUserInput')してウィンドウ内で呼び出すことだと思いますが、自動生成されたゲッター/セッターをオーバーライドしたり、単純なゲッターを追加したりするなど、より良いアプローチがあるかどうかを知りたいです。 /入力値のセッター。

Sencha フォーラムからのクロスポスト。

編集

私は自分が何を望んでいるのか少し不明確だったと思います。より一般的なステートメントとして、ビューに関連するすべてのものをコントローラーに詰め込むのではなく、ゲッター/セッターなどを含むビュー自体にすべてを格納したいと考えています。これらのゲッター/セッターの 1 つは、たまたま loginUserInput ゲッターです。

モデルを使用するのは興味深いアイデアですが、シングルトン値のオーバーヘッドが非常に大きくなると思います。私は基本的に、LoginWindow ビューでJava のセッター/ゲッターのようなものを探しています...そしてできれば Java と同じくらい (またはそれに近い) シンプルなものを探しています。

ビューに含める (カプセル化する) ことで、コントローラーが少しすっきりします。ビューを削除すると、その関数も削除されるので、コントローラー内の関数を探す必要がなくなります。 ..私が心配しなければならないのは、参照を削除することだけです（これは最小限にする必要があります）。

4

3 に答える 3

0

正直に言うと、あなたがどのような問題を解決しようとしているのか、よくわかりません。

コントローラーがウィンドウ内のボタンをリッスンするのを好まない場合は、コントローラーがリッスンできるカスタム イベントを発生させるビュー定義内のボタン ハンドラーを使用できます。fireEvent メソッドを使用します。ちなみに、initConfig は、ビューをセットアップするための推奨される方法です。必要に応じてメソッドに分割できます。「this」参照が使用可能で、インスタンス化される View コンポーネントです。

ビュー内の内部コンポーネントを見つける必要がある場合は、up/downからnextSiblingおよびquery. 

For Components:
    • Ext.getCmp(id)
    • Ext.ComponentQuery.query()
    • up() 
    • down() 
    • nextSibling() 
    • previousSibling()
    • child()
    • previousNode()
plus various find.. Methods

編集

ゲッターとセッターの意味が理解できたと思います。Ext フォームには、個々のフィールドへのデータの取得と設定を簡単にするためのフィールド ファインダーがあります。これらの SO の質問を参照してください:隣接するコンポーネント/フィールドにアクセスするための最良の方法と、フィールドセットから項目のリストを取得する EXT.JS

また、セルジオが言ったように、データバインディングを処理するために、フォームに getRecord getValues および setRecord メソッドがあります。それでおしまい。

EDIT2

明確で明確な MVC パターンとフォーム処理を示す最適な出発点ガイド。http://docs.sencha.com/extjs/4.1.3/#!/guide/application_architecture

于 2013-09-23T18:13:36.900 に答える
0

私の考えは次のようなものです。

...
items: [],
constructor: function(config) {
  this.loginUserInput = Ext.create('Ext.form.field.Text', {
    fieldLabel: 'Username',
    id: 'loginUserInput',
    name: 'loginUserInput',
    msgTarget: 'under',
    validator: function(value) {
      if (Ext.isEmpty(value)) {
        return "You need to enter a username.";
      }
      return true;
    }
  });
  this.items.push(this.loginUserInput);
  this.callParent(config);
},

getLoginUserInput: function() {
  var loginUserInput = this.loginUserInput;
  if (!loginUserInput) {
    console.warn("LoginWindow::getLoginUserInput: loginUserInput is undefined");
  }
  return loginUserInput;
}

そのため、Ext に魔法をかけてもらう代わりに、自分でオブジェクトをインスタンス化します。これにより、オブジェクトの参照を格納できるようになり、getter で簡単にアクセスできるようになります。これがなんらかのパフォーマンス ヒットを引き起こしているのではないかと思います。それほど悪くはないようです...実際には、このオブジェクトをIDで参照していないため、少し良くなり、検索する必要がないようです必要なときに。

于 2013-09-24T15:08:37.127 に答える