如何在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 
    } 
} 

希望這能解決您的問題。