Ext JS 4.0 - MVC Ext.panel.Form & Ext.ComponentLoader

I'm just starting to dig into Ext JS 4.0 and the new MVC architecture. I've created a user controller with several grid and tree views and their appropriate stores. So far, so good.

I've just created my first form and I'm struggling with the new loader config. The form is rendered and following Ajax call is successful, but the form doesn't populate.

/*
 */
Ext.define('CORE.view.user.Form' ,{
   extend: 'Ext.form.Panel'
  ,alias : 'widget.userform'
  ,frame: true

  /*
   */
  ,initComponent: function() {

      Ext.apply(this, {
         title: 'User Form'
        ,height: 175
        ,items: [{
            xtype: 'textfield'
           ,fieldLabel: 'Name'
           ,name: '开发者_开发技巧name'
         },{
            xtype: 'textfield'
           ,fieldLabel: 'Email'
           ,name: 'email'
         }]

        ,loader: {
            url: 'data/usersform.json'
           ,autoLoad: true
           ,renderer: 'component'
           ,params: {
               email: 'email'
            }
         }
      });

      this.callParent(arguments);
   }
});

The JSON I'm currently using looks like this:

{
    "success":true,
    "data":[{
            "name":"Ed",
            "email":"ed@sencha.com"
        }
    ]
}

I've messed with all of the renderer options and tried playing with target. I'm very confused given the possible combinations of renderers, targets, and JSON formats.

I'm likely way off in the weeds... has anyone gotten this to work? I'm having a very difficult time finding examples of this.

Remove the [ and ] in your JSON.

I'm not sure that your loader is loading a record - the root: might need to be specified. In all of the working examples I've found you just don't use a loader on the form but you specify a store, a model and a proxy on the model. A loader on the form itself would mean you're not really using MVC.

Check out this for a working example of MVC....https://github.com/lucassus/extjs4-account-manager/tree/master/public - he is using ext-debug without the loader....I've had to use ext-debug-all-w-comments and the loader in my app.js to get things working.

But follow his example from app.js, then look through how his controllers and view are used with the store/model/proxy

I realise this is an old question but looking at the docs you are using the wrong renderer type. It should be "data" rather than "component" because you are returning data rather than an Ext Component config.