問題加載json商店在extjs 4.0中形成

Question

我有以下代碼。我試圖通過json創建商店。我可以看到firebug調用json，但是這些數據沒有加載表單。這與模型的本地實例一起工作。所以我相信，包含「formJobSummary」的面板正在工作。這個問題在商店的某個地方。

Ext.define('user', { 
    extend: 'Ext.data.Model' 
    fields: ['quotedPrice'] 
}); 

var store = Ext.create('Ext.data.Store', { 
    model: 'user', 
    proxy: { 
     type: 'ajax', 
     url: '/data/users.js', 
     reader: { 
      type: 'json', 
      root: 'user' 
     } 
    }, 
    autoLoad: true 
}); 


Ext.define('MyApp.view.MyPanel', { 
    extend: 'MyApp.view.ui.MyPanel', 
    initComponent: function() { 
     var me = this; 
     me.callParent(arguments); 
     var form = Ext.getCmp('formJobSummary'); 
     form.loadRecord(store); 
    } 
}); 

的Json '/data/users.js'

{ 
    "success":"true", 
    "user": [{ 
     "quotedPrice":"12345" 
    }] 
} 

的完整性，這裏是view.ui

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); 
    } 
}); 

Answer 1

的問題是在設置記錄形成。首先，loadRecord接受記錄，而不是存儲。接下來的問題是，當您撥打loadRecord時，商店未加載。以下是修正問題的商店定義。基本上你應該綁定到商店的load事件，以確保記錄已被加載。

var store = Ext.create('Ext.data.Store', { 
    model: 'user', 
    proxy: { 
     type: 'ajax', 
     url: 'data2.json', 
     reader: { 
      type: 'json', 
      root: 'user' 
     } 
    }, 
    autoLoad: true, 
    listeners: { 
     load: function() { 
      var form = Ext.getCmp('formJobSummary'); 
      form.loadRecord(store.data.first()); 
     } 
    } 
});