如何在ExtJS中使用代理获取数据6

Question

我对Extjs完全陌生。我试图使用像this guide这样的代理来获取数据，但我仍然不明白。代码是这样写的。

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: ['id', 'name', 'email'] 
}); 
//The Store contains the AjaxProxy as an inline configuration 
var store = Ext.create('Ext.data.Store', { 
    model: 'User', 
    proxy: { 
     type: 'ajax', 
     url : 'users.json' 
    } 
}); 
store.load(); 

我的问题是非常基本的。这段代码是否写在同一个文件中，在我的情况下是(root)/app/view/user.js或者我应该把它放在不同的文件中？如果它在分离的文件中，该如何做。 Fyi，当我把它放在同一个文件中时，我得到了错误。

Answer 1

在ExtJS的有实体店面proxy，也Ajax request您可以同时使用。

1. Proxies是使用Ext.data.Store处理Ext.data.Model数据的加载和保存。通常开发人员不需要直接创建或与代理交互。一个Ext.data.Connection的
2. Ajax单一实例。这个类用于与您的服务器端代码进行通信。

我已创建并Sencha Fiddle演示。这里我创建了2个本地json文件（user.json & user1.json）。

我使用存储代理（来自user.json）和Ext.Ajax的请求（来自user1.json）获取数据。

希望这会帮助你解决你的问题。

*请注意，这将适用于现代和经典。

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: ['name', 'email', 'phone'] 
}); 
Ext.create('Ext.data.Store', { 
    storeId: 'userStore', 
    model: 'User', 
    proxy: { 
     type: 'ajax', 
     url: 'user.json', 
     reader: { 
      dataType: 'json', 
      rootProperty: 'data' 
     } 
    } 
}); 
Ext.create('Ext.panel.Panel', { 
    width: '100%', 
    renderTo: Ext.getBody(), 
    padding: 15, 
    items: [{ 
     xtype: 'button', 
     margin:5, 
     text: 'Get Data using Store Load', 
     handler: function() { 
      var gridStore = this.up().down('#grid1').getStore(); 
      gridStore.load(function() { 
       Ext.Msg.alert('Success', 'You have get data from user.json using store.load() method..!'); 
      }); 
     } 
    }, { 
     xtype: 'grid', 
     itemId:'grid1', 
     title: 'User Data Table1', 
     store: Ext.data.StoreManager.lookup('userStore'), 
     columns: [{ 
      text: 'Name', 
      dataIndex: 'name' 
     }, { 
      text: 'Email', 
      dataIndex: 'email', 
      flex: 1 
     }, { 
      text: 'Phone', 
      dataIndex: 'phone' 
     }], 
     height: 200, 
     width: '100%', 
    }, { 
     xtype: 'button', 
     margin:5, 
     text: 'Get Data using Ajax request', 
     handler: function() { 
      var me = this.up(), 
       gridStore = me.down('#grid2').getStore(); 
      me.down('#grid2').mask('Pleas wait..'); 
      Ext.Ajax.request({ 
       url: 'user1.json', 
       method: 'GET', 
       success: function (response) { 
        me.down('#grid2').unmask(); 
        var data = Ext.decode(response.responseText); 
        gridStore.loadData(data.data); 
        Ext.Msg.alert('Success', 'You have get data from user1.json using Ext.Ajax.request method..!'); 
       }, 
       failure: function (response) { 
        me.down('#grid2').unmask(); 
        //put your failure login here. 
       } 
      }); 
     } 
    }, { 
     xtype: 'grid', 
     itemId: 'grid2', 
     title: 'User Data table2', 
     store: Ext.create('Ext.data.Store', { 
      fields: ['name', 'email', 'phone'] 
     }), 
     columns: [{ 
      text: 'Name', 
      dataIndex: 'name' 
     }, { 
      text: 'Email', 
      dataIndex: 'email', 
      flex: 1 
     }, { 
      text: 'Phone', 
      dataIndex: 'phone' 
     }], 
     height: 200, 
     width: '100%', 
    }] 

}); 

Answer 2

请仔细阅读下列要点了解本项目。这个架构上的link会很有帮助。

a。由于您已经创建了通用应用程序，这意味着您使用的是Ext JS 6或更高版本。为此，CMD生成的应用程序的文件夹结构如下：

app 
    model 
    store 
    view 
classic 
    src 
     view 
modern 
    src 
     view 

b。 app文件夹适用于经典视图和现代视图共享的类。这通常是在应用程序/视图夹在应用程序/模型定义模型和共享控制器和视图模型。

c。在经典文件夹中的代码可以在应用文件夹引用类，但在现代文件夹不能引用代码。同样，现代文件夹中的代码可以参考文件夹中的类文件夹，但不能参考文件夹中的代码文件夹。 （这意味着在现代和经典的应用程序模型，存储，视图模型和ViewController类可以从应用程序的文件夹扩展这些类。）

d。最佳做法是在视图模型中声明商店，但如果商店配置复杂，则在商店文件夹中定义其类。

e。要在经典应用的视图模型中声明商店，示例如下所示。同样，你也会为现代应用做些什么。

//MyApp/classic/src/view/main/MainModel.js 
stores: { 
    articles: { 
    model: 'MyApp.model.MyModel',// in classic/src/model folder 
    autoLoad: true, 
    proxy: { 
     type: 'ajax',//if it's cross-domain, use jsonp 
     url : 'users.json', 
     reader: { 
     type: 'json', //this is default 
     rootProperty: 'data'//the location in data feed from where you want to start reading the data 
     } 
    } 
} 

}

现在结合此存储在视图中。例如，在网格中：

{ 
xtype: 'grid', 
bind: { 
    store: '{articles}' 
} 
//More code 
} 

f。如果store是在类中定义的（例如.classic/src/store/Articles.js），那么在视图模型中声明像这样。绑定将如上所述。

//MyApp/classic/src/view/main/MainModel.js 
stores: { 
    articles: { 
    type: 'mystore' //this is alias of store class. 
    model: 'MyApp.model.MyModel', //in classic/src/model folder 
    } 
} 

希望这能解决您的问题。