Ext JSグリッドパネルのイベント

Question

私は最初のEXT js mvcアプリケーションを開発しています。コントローラクラスからグリッドパネルにイベントリスナーを追加する際に問題があります。コードの下に使用する方法「オン」を通じて、イベントハンドラを追加しているとき、私はエラーの下に取得していますなぜ

私の質問は

エラー：

Uncaught TypeError: 
    gridPanel.on is not a function 
    at constructor.init 

関連するコード：私は

var gridPanel = Ext.ComponentQuery.query('userlist'); 
gridPanel.on('itemdblclick', this.editUser, gridPanel); 

しかし、別の方法でハンドラを追加することができますが、グリッドパネル参照の 'on'メソッドを追加することで何が間違っているのか把握しようとしています。どんな助けもありがとうございます。ここで

おかげ

---

は私の完全なコントローラクラスは

Ext.define('AM.controller.Users', { 
     extend: 'Ext.app.Controller', 

     views: ['user.List'], 

     init: function() { 

      var gridPanel = Ext.ComponentQuery.query('userlist'); 
      gridPanel.on('itemdblclick', this.editUser, gridPanel); 
     }, 

     editUser: function() { 
      console.log('User edit has begun..'); 
     } 
}, function() { 

}); 

そして、私のグリッドパネルクラスです：

Ext.define('AM.view.user.List', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.userlist', 
    title: 'All Users', 
    id: 'usergrid', 

    initComponent: function() { 

      this.store = { 
       fields: ['name', 'email'], 
       data : [ 
        {name: 'Ed', email: 'ed@sencha.com'}, 
        {name: 'Tommy', email: 'tommy@sencha.com'} 
       ] 
      }; 

      this.columns = [ 
       {header: 'Name', dataIndex: 'name', flex: 1}, 
       {header: 'Email', dataIndex: 'email', flex: 1} 
      ], 

     this.callParent(arguments); 

    } 
}); 

Answer 1

query method Ext.ComponentQuery上のコンポーネントの配列を返します。だから、同じように、インデックスを提供する必要があるでしょう：

var gridPanel = Ext.ComponentQuery.query('userlist')[0]; 

Answer 2

Ext.ComponentQuery.query('userlist')たコンポーネントの配列を返します - あなたは実際にあなたのコンポーネントを取得するために、配列の最初の項目を選択する必要があります。 Ext.ComponentQuery.query('userlist')[0]

Ext.first('userlist')これを簡略化します。あなただけの1つのインスタンスを持つことになります場合は、あなたがあなたもOKです、コンポーネント、のidを指定している

そのXTYPE *で照会するコンポーネントのクエリを使用し

（@sceboratiはコメントで述べたように）あなたは複数のページがあるとすぐにidsを使うべきではありません。 Ext.getCmp('componentid')を使うとずっと素早くコンポーネントを見つけることができるので、Ext.getCmp('userlist')も使えます。

すべてのことExtJSのMVC能力をより有効に活用するために、言われて、あなたがのViewControllerの使用に切り替えることができ、その後、あなたはすべてのあなたのコンポーネントのいずれかの検索を行う必要はありません。

Ext.define('AM.controller.Users', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.userlist', 
    editUser: function() { 
     console.log('User edit has begun..'); 
    } 
}); 

Ext.define('AM.view.user.List', { 
    extend: 'Ext.grid.Panel', 
    xtype: 'userlist', 
    title: 'All Users', 
    id: 'usergrid', 
    controller: 'userlist', 
    store: { 
     fields: ['name', 'email'], 
     data: [{ 
      name: 'Ed', 
      email: 'ed@sencha.com' 
     }, { 
      name: 'Tommy', 
      email: 'tommy@sencha.com' 
     }] 
    }, 
    columns: [{ 
     header: 'Name', 
     dataIndex: 'name', 
     flex: 1 
    }, { 
     header: 'Email', 
     dataIndex: 'email', 
     flex: 1 
    }], 
    listeners:{ 
     itemdblclick:'editUser' 
    } 
}); 

コントローラーにalias設定が追加され、対応するcontroller設定が表示されていることに注目してください。

これは、コントローラにメソッド名を指定するだけでリスナを指定できることを意味します。

listeners:{ 
     itemdblclick:'editUser' 
    } 

また、私はinitComponent方法のうち、あなたのコラムや店舗の設定を移動していることに気づく - initComponentのご使用は動作しますが、この方法は非常にきれいです。私は、この更新されたコードを示すためにバイオリンを作成している

は：

https://fiddle.sencha.com/#view/editor&fiddle/1qvu

はまた、あなたのコントローラを定義するときに3番目の引数として余分な機能を渡しているようだ - あなたがこれを削除する必要があります。 xtype:'userlist'