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

Posted 2023-02-26

【中文标题】如何将这个小代码从 Extjs3 升级到 Extjs4.2？

【英文标题】：How to upgrade this small code from Extjs3 to Extjs4.2?

【发布时间】：2013-08-20 23:56:53

【问题描述】：

我一直在尝试找到将下面的代码从ExtJs3.4 升级到ExtJs 4.2 的解决方案？ 我找到了一些答案并查看了 Sencha 的文档，但仍然很难。

如果有人知道如何在 ExtJs4.2 中重写这段代码，请告诉我。提前致谢。

        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

这是我从上面的代码中知道的：

Models 不再使用field 而不是Stores reader 应该在 proxy 内

这些是警告

[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.

---

附录

我一开始是这样的：

 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
 

所以我不确定要写什么来代替reader: new Ext.data.JsonReader。 还有是否使用Model，因为Store 不再使用fields。 在看到答案之前，我不知道Ext.data.JsonStore。

【问题讨论】：

我投了反对票，因为它没有表现出足够的努力，你看升级文档了吗？ sencha.com/blog/ext-js-3-to-4-migration

@JuanMendes 你有什么问题？无论如何，您都没有回答这个问题，请不要理会它。仅供参考，对于像你这样的聪明驴，请看我问题的最后一部分。你觉得我怎么得到错误[DEPRECATED][4.0][Ext.data.Store]: Passing a "fields"... ???。那是因为我正在使用迁移指南 ;)

我的问题是那些没有做足够研究就提出问题的人。您的错误消息很清楚，字段现在应该在代理上。如果您查找docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.reader.Json，您将看到正确用法的清晰示例。我的反对票仍然有效，您要求其他人在真正尝试 mattgemmell.com/2008/12/08/what-have-you-tried 之前为您完成工作站着，你什么都没试过。

好的，我会添加我尝试过的，但它不正确。

通过您的新编辑，更容易理解您没有得到哪个部分，我添加了一些关于如何在 Ext 4 中完成的解释，并建议了仍然可以使用的最小更改分机 4。希望你不再生我的气，我投反对票的唯一目的是改进问题和答案，以便对其他人有用。

【参考方案1】：

Chris Farmer 的回答是正确的。但是，这里有一个更彻底的解释。

Ext 现在鼓励您记录数据的格式，因此您应该使用Ext.data.Model 来定义字段名称。建议的方法是在模型本身上定义代理，以便可以独立于商店加载它

// 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 仍然允许您在创建商店时使用字段定义而不是模型，但不建议这样做，会创建隐式模型。以下是操作方法。

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

【讨论】：

+1，使用模型当然是更好的做法。如果您在商店中使用fields: [] inline，则会在后台创建一个匿名模型。

@A.S.Roma 您的最后一次编辑不是必需的，您可以根据需要传递构造函数，如果您正在执行动态加载，则必须传递一个字符串

我不知道为什么？但model 不起作用。当我使用第二个版本时，它可以工作。我怎么知道？ firebug 在第二种情况下显示 php 响应，第一种情况没有？？？你知道为什么吗？

可能你的其他类没有加载？ This example shows 如果类已加载，则可以传递其构造函数。你为什么不单步执行它，看看那个类在那个时候是否未定义？但是，传递字符串名称并没有错，只是如果我传递一个尚未定义的构造函数，我的 IDE 会发现，而如果我传递一个字符串，它不知道......

【参考方案2】：

这个怎么样？ JsonStore 记录在 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'
                
            
        )
    

【参考方案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);

【讨论】：

谢谢，但这和@Chris Farmer回答是一样的

这里你没有将 store 设置为另一个配置变量，你可以使用 this.store 并在 store 定义后调用 this.callparent

@objectone 但本质上是一样的答案，考虑删除吧