2011-08-09 7 views
1

Ext.form.PanelにMVCプロジェクトのデータを入力することができません。コントローラでは、データをストアからフォームにロードします。しかし、私はフォームパネルを介して基本的なフォームにアクセスすることはできません。ExtJS 4作成時にフォームパネルにデータをロードする。どのイベントを捕まえるのですか?

フォームビュー

Ext.define('Example.view.webitem.Form', { 
    extend: 'Ext.form.Panel', 
    alias: 'widget.webitemform', 
    renderTo: 'webstructure-form', 

    items: [{ 
     xtype: 'fieldset', 
     title: 'Metadata', 
     items: [{ 
      xtype: 'displayfield', 
      name: 'id', 
      fieldLabel: 'ID' 
     }, 
     { 
      xtype: 'textfield', 
      name: 'name', 
      fieldLabel: 'Name' 
     }] 
    }], 
    buttons: [{ 
     text: 'Load', 
     action: 'loaditem' 
    }] 
}); 

コントローラ

Ext.define('Example.controller.WebItemsForm', { 
    extend: 'Ext.app.Controller', 

    stores: ['WebItemsForm'], 
    models: ['WebItem'], 
    views: ['webitem.Form'], 
    init: function() { 
     // This does not work. Data aren't loaded in store 
     this.control({ 
      'webitemform': { 
       render: this.loadItem 
      } 
     }); 
     // This works, but isn't userfriendly 
     this.control({ 
      'webitemform button[action=loaditem]': { 
       click: this.loadItem 
      } 
     }); 
    },  
    loadItem: function() { 
     var form = this.getWebItemForm().getForm(); 
     var data = this.getStore('WebItemsForm').getAt(0); 
     form.loadRecord(data); 
    } 
}); 

Loadボタンをクリックした後、データが正しくフォームにロードされます。しかし、Ext.form.Panel renderイベントをキャッチしようとすると、ストアにデータがロードされません。

Uncaught TypeError: Cannot read property 'data' of undefined. 

私が正しく理解しているのは、ロード操作が非同期であるためです。 レンダリングイベントのデータをロードするには?より適切なイベントはありますか?

答えて

1

パネルがレンダリングされるのaferストアがまだロードされている場合(afterrenderイベントが)チェック(それは例えば、非アクティブタブにありますので、パネルのレンダリングが延期されていない限り、usallyそれは、されません)。同じイベントでテストが失敗した場合は、リスナーをloadリスナーに追加すると、データは準備完了後にパネルに戻されます。

+1

ありがとうございました。ストアする 'load'イベント(' afterload'ではなく)を受け取るリスナーがこのトリックを行いました。 – kurochenko

+1

そうです、それは 'load'です。私はなぜ彼らが 'beforeload'を持っているのか、' afterload'を持っているのか理解できません。 – Mchl

関連する問題