2012-01-09 6 views
0

未定義の問題である私は、フォームパネルExt.getCmp(「あるmyForm」)は、私のパネルの一つで

xtype: 'form', 
            id: 'formJobSummary', 
            layout: { 
             align: 'stretch', 
             type: 'hbox' 
            } 

を持っている私は、これにデータをバインドし、次のコードを持つことを望みます。

var form = Ext.getCmp('formJobSummary').getForm(); 
form.loadRecord(user); 

私は取得しています: Ext.getCmp( "formJobSummary")はloadRecordが範囲外であるので、明らかに

が定義されていません。私のアーキテクチャがデザイナーのもので、2つのファイルがあることを考えれば、このloadRecordステートメントはどこに置かれますか?

MyPanel.js

//Define a model with field names mapping to the form field name 
Ext.define('UserModel', { 
    extend: 'Ext.data.Model', 
    fields: ['quotedPrice', 'name'] 
}); 

//Create an instance of the model with the specific value 
var user = Ext.create('UserModel', { 
    quotedPrice: 'test', 
    name: 'test' 
}); 


Ext.define('MyApp.view.MyPanel', { 
    extend: 'MyApp.view.ui.MyPanel', 

    initComponent: function() { 
     var me = this; 
     me.callParent(arguments); 
     me.down('button[text=Submit]').on('click', 
     me.onSubmitBtnClick, me); 
     me.down('button[text=Cancel]').on('click', 
     me.onCancelBtnClick, me); 
    }, 
    onSubmitBtnClick: function() { 

     var conn = new Ext.data.Connection(); 

     var est = Ext.getCmp('estimate'); 
     alert(est.getValue()); 

     conn.request({ 
      method: 'POST', 
      url: 'tmp.php', 
      params: { 
       foo: "bar" 
      }, 
      success: function (responseObject) { alert(responseObject.responseText); }, 
      failure: function() { alert(est); } 
     }); 
    }, 
    onCancelBtnClick: function() { 

    } 
}); 

var form = Ext.getCmp('formJobSummary').getForm(); //returns form1 
form.loadRecord(user); 

UI/MyPanel.jsあなたの文var form = Ext.getCmp('formJobSummary').getForm();の実行中に

Ext.define('MyApp.view.ui.MyPanel', { 
    extend: 'Ext.panel.Panel', 

    height: 600, 
    width: 950, 
    layout: { 
     align: 'stretch', 
     type: 'vbox' 
    }, 
    title: 'JobPanel', 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'tabpanel', 
        activeTab: 0, 
        flex: 1, 
        items: [ 
         { 
          xtype: 'panel', 
          layout: { 
           align: 'stretch', 
           type: 'hbox' 
          }, 
          title: 'Job Summary', 
          items: [ 
           { 
            xtype: 'form', 
            id: 'formJobSummary', 
            layout: { 
             align: 'stretch', 
             type: 'hbox' 
            }, 
            bodyPadding: 10, 
            title: '', 
            url: '/submit.html', 
            flex: 1, 
            dockedItems: [ 
             { 
              xtype: 'toolbar', 
              flex: 1, 
              dock: 'bottom', 
              items: [ 
               { 
                xtype: 'button', 
                text: 'Submit' 
               }, 
               { 
                xtype: 'button', 
                text: 'Cancel' 
               } 
              ] 
             } 
            ], 
            items: [ 
             { 
              xtype: 'panel', 
              flex: 1, 
              items: [ 
               { 
                xtype: 'radiogroup', 
                width: 400, 
                fieldLabel: 'Job Type', 
                items: [ 
                 { 
                  xtype: 'radiofield', 
                  boxLabel: 'Fix Price' 
                 }, 
                 { 
                  xtype: 'radiofield', 
                  boxLabel: 'Production' 
                 } 
                ] 
               }, 
               { 
                xtype: 'textfield', 
                id: 'quotedPrice', 
                name: 'quotedPrice', 
                fieldLabel: 'Quoted Price' 
               }, 
               { 
                xtype: 'textfield', 
                id: 'clientPO', 
                name: 'clientPO', 
                fieldLabel: 'Client PO' 
               }, 
               { 
                xtype: 'textfield', 
                id: 'jobQuantity', 
                name: 'jobQuantity', 
                fieldLabel: 'Job Quatity' 
               }, 
               { 
                xtype: 'textfield', 
                id: 'filesOver', 
                name: 'filesOver', 
                fieldLabel: 'Files Over' 
               }, 
               { 
                xtype: 'textfield', 
                id: 'previousJobId', 
                name: 'previousJobId', 
                fieldLabel: 'Previous JobId' 
               }, 
               { 
                xtype: 'textfield', 
                id: 'estimate', 
                name: 'estimate', 
                fieldLabel: 'Estimate' 
               } 
              ] 
             }, 
             { 
              xtype: 'panel', 
              flex: 1 
             }, 
             { 
              xtype: 'panel', 
              layout: { 
               align: 'stretch', 
               type: 'hbox' 
              }, 
              flex: 1 
             } 
            ] 
           } 
          ] 
         }, 
         { 
          xtype: 'panel', 
          title: 'Parts' 
         }, 
         { 
          xtype: 'panel', 
          title: 'Process' 
         }, 
         { 
          xtype: 'panel', 
          title: 'Invoice' 
         } 
        ] 
       }, 
       { 
        xtype: 'panel', 
        layout: { 
         align: 'stretch', 
         type: 'vbox' 
        }, 
        title: 'FooterPanel', 
        flex: 1 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    } 
}); 

答えて

2

明らかformJobSummaryが定義されていない(すなわち、それは存在しません!)。 Ext.defineは、ビューのインスタンスを作成しません。実行しようとしているコードはグローバルスコープにあります。つまり、javascriptファイルがロードされるとすぐに実行されます。理想的には、クラスのインスタンスが作成された後に呼び出される必要があります。

したがって、解決方法はとなります。の場合、フォームにデータをロードする必要があります。たとえば、フォームをレンダリングするときや、ボタンがクリックされたときなどにデータをロードすることができます。これは、問題の解決に役立ちます。

関連する問題