Extjsデータモデル/ストアはラッパープロキシビルダーメソッドをサポートしていますか？

Question

Extjs 5.xを使用して、ブラウザベースのシングルページアプリケーションを構築しています。シンプルなモデル&ストアが私たちによって使用されている場合、すべてがうまくいきます。プロキシ用のラッパーを使用しようとすると、ランタイム中にのSencha cmdビルド後にエラーが生成されます。ここで

Ext.define('Pos.model.Article', { 
    extend  : 'Ext.data.Model', 
    alias  : 'widget.Article', 
    idProperty : 'id', 
    fields  : [ 
     { name : 'id',   mapping : 'id',   type : 'int' }, 
     { name : 'code',  mapping : 'code',  type : 'string'}, 
     { name : 'name',  mapping : 'name',  type : 'string'}, 
     { name : 'rate',  mapping : 'rate',  type : 'float' }, 
     { name : 'expireDate', mapping : 'expireDate', type : 'date' } 
    ], 
    proxy  : { 
     type   : 'rest', 
     noCache   : true, 
     limitParam  : 'limit', 
     startParam  : 'start', 
     url    : '/pos/article', 
     reader   : { 
      type   : 'json', 
      rootProperty : 'data', 
      totalProperty : 'total', 
      successProperty : 'success', 
      messageProperty : 'message', 
      implicitIncludes: true 
     }, 
     writer   :{ 
      type   : 'json', 
      writeAllFields : true 
     }, 
     simpleSortMode : true 
    } 
}); 

条の簡単なお店です：：

Ext.define('Pos.store.Articles', { 
    extend  : 'Ext.data.Store', 
    model  : 'Pos.model.Article', 
    idProperty : 'id', 
    autoLoad  : false, 
    autoSync  : false,  
    remoteSort : true, 
    remoteFilter : true, 
    pageSize  : 25, 
    proxy  : { 
     type   : 'rest', 
     noCache   : true, 
     limitParam  : 'limit', 
     startParam  : 'start', 
     url    : '/pos/article/store', 
     reader   : { 
      type   : 'json', 
      rootProperty : 'data', 
      totalProperty : 'total', 
      successProperty : 'success', 
      messageProperty : 'message', 
      implicitIncludes: true 
     }, 
     writer   :{ 
      type   : 'json', 
      writeAllFields : true 
     }, 
     simpleSortMode : true 
    }, 
    sorters  : [{ 
     property : 'name', 
     direction: 'ASC' 
    }] 
}); 

我々は単純なモデルを使用して正常に動作し、それを保存している

ここ条のシンプルなモデルです。しかし、私たちの目標は、コードのボイラープレートを削除して、冗長コードを削除するためのラッパーメソッドをいくつか構築しようとしているからです。プロキシビルダーメソッドのラッパーの準備ができたら

が

var Cki=Cki||{}; 

;Cki.proxy||(function($){ 
    var proxy = { 
     $package  : 'Cki', 
     $class  : 'Cki.proxy', 
     resolveUrl : function(action){ 
      var ctxPath = '/pos/', 
       url  = ctxPath + action; 

      return url; 
     }, 
     getReader   : function(){ 
      var reader = { 
        type   : 'json', 
        rootProperty : 'data', 
        totalProperty : 'total', 
        successProperty : 'success', 
        messageProperty : 'message', 
        implicitIncludes: true 
       }; 
      return reader; 
     }, 
     getWriter   : function(){ 
      var writer = { 
        type   : 'json', 
        writeAllFields : true 
       }; 
      return writer; 
     }, 
     getRestProxy  : function(url, noCache){ 
      url  = (typeof url === 'undefined') ? '' : url; 
      noCache = (typeof noCache === 'undefined') ? false : noCache; 
      var restProxy = { 
       type   : 'rest', 
       noCache   : noCache, 
       limitParam  : 'limit', 
       startParam  : 'start', 
       url    : proxy.resolveUrl(url), 
       reader   : proxy.getReader(), 
       writer   : proxy.getWriter(), 
       simpleSortMode : true 
      };  
      return restProxy; 
     } 
    }; 
    $.proxy = proxy; 
}(Cki)); 

、私たちはモデルと店舗内のプロキシをラップするためにそれを使用することができます。ここでは、あなたの検討のためのプロキシビルダーの簡単なラッパーです。ここで包まれたプロキシのモデルである：ここでは

Ext.define('Pos.model.Article', { 
    extend  : 'Ext.data.Model', 
    alias  : 'widget.Article', 
    idProperty : 'id', 
    fields  : [ 
     { name : 'id',   mapping : 'id',   type : 'int' }, 
     { name : 'code',  mapping : 'code',  type : 'string'}, 
     { name : 'name',  mapping : 'name',  type : 'string'}, 
     { name : 'rate',  mapping : 'rate',  type : 'float' }, 
     { name : 'expireDate', mapping : 'expireDate', type : 'date' } 
    ], 
    proxy  : Cki.proxy.getRestProxy('article') 
}); 

はラッププロキシ店です：

Ext.define('Pos.store.Articles', { 
    extend  : 'Ext.data.Store', 
    model  : 'Pos.model.Article', 
    idProperty : 'id', 
    autoLoad  : false, 
    autoSync  : false,  
    remoteSort : true, 
    remoteFilter : true, 
    pageSize  : 25, 
    proxy  : Cki.proxy.getRestProxy('article/store'), 
    sorters  : [{ 
     property : 'name', 
     direction: 'ASC' 
    }] 
}); 

それは実行時に次のエラーが発生します：メインスレッド上

1. 同期のXMLHttpRequestが廃止されましたエンドユーザーの経験に悪影響を与えるためです。詳細についてはhttps://xhr.spec.whatwg.org/をご確認ください。
2. http://localhost/pos/static/Ext-all.jsは、リソースの読み込みに失敗しました：サーバーがext-all.js @フェッチ（見つかりません）404の状態で応答：22
3. VM42：3キャッチされない例外TypeError：cはコンストラクタ
ではありません

Answer 1

私はあなたが定型的なコードを避けるために使用しているアプローチを変更するようにお勧めしたいことは、それをデバッグすることなく、自分の誤りを見つけることは非常に困難だ、と私はそれがさえたコードでは非常に難しいことだと思う。..

。

これを達成する最善の方法は、残りのプロキシクラスを拡張して、すべてのデフォルト設定を置くことです。 次に、ストア定義でプロキシクラスを使用し、urlだけを渡します（これはモデル間の唯一の違いです）。

例

Ext.define('My.data.proxy.Rest', { 
     extend: 'Ext.data.proxy.Rest', 
     alias : 'proxy.myrest', 
     noCache   : true, 
     limitParam  : 'limit', 
     startParam  : 'start', 
     reader   : { 
      type   : 'json', 
      rootProperty : 'data', 
      totalProperty : 'total', 
      successProperty : 'success', 
      messageProperty : 'message', 
      implicitIncludes: true 
     }, 
     writer   :{ 
      type   : 'json', 
      writeAllFields : true 
     }, 
     simpleSortMode : true 
    }); 

そして、あなたの店にあなたが

Ext.define('Pos.store.Articles', { 
    extend  : 'Ext.data.Store', 
    model  : 'Pos.model.Article', 
    idProperty : 'id', 
    autoLoad  : false, 
    autoSync  : false,  
    remoteSort : true, 
    remoteFilter : true, 
    pageSize  : 25, 
    proxy  : { 
     type: 'myrest', 
     url: '/pos/article/store', 
    }, 
    sorters  : [{ 
     property : 'name', 
     direction: 'ASC' 
    }] 
});