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.Modelデータの読み込みと保存を処理するためにExt.data.Storeで使用されています。通常、開発者はプロキシを直接作成する必要はありません。
2. Ajax Ext.data.Connectionのシングルトンインスタンス。このクラスは、サーバー側のコードとの通信に使用されます。

私は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。 Universalアプリケーションを作成しているので、Ext JS 6以上を使用していることを意味します。このため、CMD生成アプリのフォルダ構造は次のようになります。

app 
    model 
    store 
    view 
classic 
    src 
     view 
modern 
    src 
     view 

b。 アプリフォルダは、クラシックビューとモダンビューで共有されるクラス用です。これは通常、のアプリケーション/モデルのモデル定義、および共有コントローラとビューモデルのapp/viewフォルダのモデル定義です。

c。コード古典のフォルダは、のアプリケーションフォルダのクラスを参照できますが、モダンフォルダのコードを参照することはできません。同様に、モダンフォルダのコードは、アプリフォルダのクラスを参照できますが、クラシックフォルダのコードは参照できません。 （これは、モダンで古典的なアプリケーションのモデル、ストア、ビューモデル、およびビューコントロールのクラスがappフォルダからこれらのクラスを拡張できることを意味します）。

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。ストアがクラス（例えば、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 
    } 
} 

これはあなたの問題を解決します。