如何将这个小代码从Extjs3升级到Extjs4.2？

Question

I have been trying to find a solution to upgrading the code below from ExtJs3.4 to ExtJs 4.2 ?
I found some answers and looked into Sencha's docs, but still having hard time with it.

If anyone knows how to rewrite this code in ExtJs4.2, please let me know. Thanks in advance.

        var config = 
        {       
            store: new Ext.data.Store({
                autoLoad: true,
                proxy: new Ext.data.HttpProxy({ url: '/main/...' }),
                reader: new Ext.data.JsonReader
                ({
                    root: 'data',
                    totalProperty: 'totalCount',
                    id: 'id',
                    fields: 
                    [
                        'alert_id',
                        {name: 'duration', type: 'int'},
                        {name: 'start_date', type: 'date', dateFormat: 'timestamp'},
                        {name: 'end_date', type: 'date', dateFormat: 'timestamp'},
                        'monitor'
                    ]
                })
            }),
        }

        // more code here

This is what I know from the code above:

• Models are using the field not Stores anymore
• reader should be inside the proxy

These are the warning

[DEPRECATED][4.0][Ext.data.Store]: Passing a "fields" config via the store's reader config is no longer supported. Instead you should configure a model and pass it as the store's "model" config. Please see the header docs for Ext.data.Store for details on properly setting up your data components.
ext-all.js (line 21)
[DEPRECATED][4.0][Ext.data.Store] reader (config): The reader config should now be specified on the configured proxy rather than directly on the store.

---

Addendum

I was doing it this way at first:

  Ext.define('User', { extend: 'Ext.data.Model', id: 'id', fields: [ 'alert_id', {name: 'duration', type: 'int'}, {name: 'start_date', type: 'date', dateFormat: 'timestamp'}, {name: 'end_date', type: 'date', dateFormat: 'timestamp'}, 'monitor' ] }); var config = { store: new Ext.data.Store({ model:'User', proxy: { url: '/main/...', reader: new Ext.data.JsonReader ({ root: 'data', totalProperty: 'totalCount', }) } }), // more code here } 

So I was not sure what to write instead of reader: new Ext.data.JsonReader .
Also whether to use the Model or not since Store was not using fields anymore.
I had no idea about Ext.data.JsonStore until I saw the answer.

Answer 1

How about this? The JsonStore is documented at http://docs-origin.sencha.com/extjs/4.2.0/#!/api/Ext.data.JsonStore .

initComponent: function () {

    var config = {
        store: new Ext.data.JsonStore({
            autoLoad: true,
            fields: [ 'alert_id', 'duration', 'start_date', 'end_date' ],
            proxy: {
                type: 'ajax',
                url: '/main/...',
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'totalCount'
                }
            }
        })
    }
}

Answer 2

Chris Farmer's answer is correct. However, here's a more thorough explanation.

Ext now encourages you to document the format of your data, so you should use an Ext.data.Model to define the field names. The suggested way to do it, is to define the proxy on the model itself so it can be loaded independent of a store

// File 1
Ext.define('my.User', {
     extend: 'Ext.data.Model',
     fields: [
         'alert_id',
         {name: 'duration', type: 'int'},
         {name: 'start_date', type: 'date', dateFormat: 'timestamp'},
         {name: 'end_date', type: 'date', dateFormat: 'timestamp'},
         'monitor'
     ],
     proxy: {
        type: 'ajax',
        url: '/main/...',
        // Reader is now on the proxy, as the message was explaining
        reader: {
            type: 'json',
            root: 'data',
            totalProperty: 'totalCount'
        }
     }
 });

 // File 2
 // Use the model with the store
 var config = {
     // Passing the model definition to the store as the message was explaining
     store: new Ext.data.JsonStore({model:  'my.User', autoLoad: true})
 };

Ext still allows you to use fields definitions instead of models when creating stores, but it's not recommended, an implicit model will be created. Here's how to do it.

 var config = {
     store: new Ext.data.JsonStore({
         fields: [
             'alert_id',
             {name: 'duration', type: 'int'},
             {name: 'start_date', type: 'date', dateFormat: 'timestamp'},
             {name: 'end_date', type: 'date', dateFormat: 'timestamp'},
             'monitor'
         ],
         proxy: {
             type: 'ajax',
             url: '/main/...',
             reader: {
                 type: 'json',
                 root: 'data',
                 totalProperty: 'totalCount'
             }
         }
     });
 };

Answer 3

initComponent: function () {

this.store= new Ext.data.JsonStore({
        autoLoad: true,
        fields: [ 'alert_id', 'duration', 'start_date', 'end_date' ],
        proxy: {
            type: 'ajax',
            url: '/main/...',
            reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'totalCount'
            }
        }
    });

 this.callParent(arguments);
}