问题加载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()); 
     } 
    } 
});