Ext.grid.Panel在Ext 4中無法從Ext.Direct代理存儲中加載數據

我已經消除了此代碼中的所有異常。但是，來自我的代理的數據不會在我的Ext.grid.Panel小部件中呈現。下面你會發現頁面呈現的不同組件。我沒有包含Ext.Direct代理的服務器端堆棧代碼。Ext.grid.Panel在Ext 4中無法從Ext.Direct代理存儲中加載數據

HTML：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Ext Direct Grid Integration</title> 
<link rel="stylesheet" type="text/css" href="http://www.rasc.ch/extjs-4.1.3/resources/css/ext-all.css" /> 
<link rel="stylesheet" type="text/css" href="http://www.rasc.ch/extjs-4.1.3/examples/shared/example.css" /> 
<script src="http://www.rasc.ch/extjs-4.1.3/ext-all-dev.js"></script> 

<script type="text/javascript" src="../directProxy.ashx"></script> 
<script type="text/javascript" src="XGrid_writer.js"></script> 
<script type="text/javascript" src="XGrid.js"></script> 


<!--<script src="../api-debug.js?group=turnover"></script>--> 
<!--<script src="api-debug.js"></script>--> 
</head> 
<body> 
    <h1>Ext Direct Grid Integration</h1> 

    <p> 
     Source code: <a href="XGrid.js">XGrid.js</a> 
    </p> 

    <div id="loading-mask" style=""></div> 
    <div id="loading"> 
     <div class="loading-indicator"><img src="../extjs/examples/shared/icons/fam/add.png" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>Ext Writer <br /><span id="loading-msg">Loading ...</span></div> 
    </div> 


</body> 
</html>

代理API描述符：

Ext.app.REMOTING_API = { 
    "type": "remoting", 
    "id": "1", 
    "url": "../directRouter.ashx", 
    "actions": { 
     "CallTypes": [{ 
      "name": "Echo", 
      "len": 1, 
      "formHandler": false 
     }, { 
      "name": "GetTime", 
      "len": 0, 
      "formHandler": false 
     }, { 
      "name": "UploadHttpRequestParam", 
      "len": 1, 
      "formHandler": true 
     }, { 
      "name": "UploadNamedParameter", 
      "len": 1, 
      "formHandler": true 
     }, { 
      "name": "SaveMethod", 
      "len": 3, 
      "formHandler": false 
     }, { 
      "name": "SaveMethod_Form", 
      "len": 1, 
      "formHandler": true 
     }, { 
      "name": "DateSample", 
      "len": 2, 
      "formHandler": false 
     }], 
     "TreeAction": [{ 
      "name": "getChildNodes", 
      "len": 2, 
      "formHandler": false 
     }], 
     "CRUDSampleMethods": [{ 
      "name": "create", 
      "len": 1, 
      "formHandler": false 
     }, { 
      "name": "read", 
      "len": 1, 
      "formHandler": false 
     }, { 
      "name": "update", 
      "len": 2, 
      "formHandler": false 
     }, { 
      "name": "destroy", 
      "len": 1, 
      "formHandler": false 
     }, { 
      "name": "reset", 
      "len": 0, 
      "formHandler": false 
     }], 
     "CRUDSampleMethods2": [{ 
      "name": "create", 
      "len": 1, 
      "formHandler": false 
     }, { 
      "name": "read", 
      "len": 1, 
      "formHandler": false 
     }, { 
      "name": "update", 
      "len": 2, 
      "formHandler": false 
     }, { 
      "name": "destroy", 
      "len": 1, 
      "formHandler": false 
     }, { 
      "name": "reset", 
      "len": 0, 
      "formHandler": false 
     }] 
    } 
};

代理數據（又名路由器呈現JSON）：

[{ 
    "type": "rpc", 
    "name": null, 
    "tid": 1, 
    "action": "CRUDSampleMethods2", 
    "method": "read", 
    "result": { 
     "success": true, 
     "results": 3, 
     "data": [{ 
      "id": "1", 
      "email": "[email protected]", 
      "first": "Martin", 
      "last": "Späth" 
     }, { 
      "id": "2", 
      "email": "[email protected]", 
      "first": "Heinz", 
      "last": "Erhart" 
     }, { 
      "id": "3", 
      "email": "[email protected]", 
      "first": "Albert", 
      "last": "Einstein" 
     }] 
    }, 
    "message": null, 
    "where": null, 
    "errorcode": 0 
}]

JavaScript代碼（XGrid.js）：

Ext.require(['Ext.direct.*', 'Ext.data.*', 'Ext.grid.*', 'Ext.util.Format']); 

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: ['id', 'email', 'first', 'last'] 
}); 

Ext.onReady(function() { 
    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); 

    // create the Tree 
    Ext.define('mypanel', { 
     extend: 'Ext.grid.Panel', 
     store: { 
      model: 'User', 
      remoteSort: true, 
      autoLoad: true, 
//   sorters: [{ 
//    property: 'email', 
//    direction: 'ASC' 
//   }, { 
//    property: 'first', 
//    direction: 'DESC' 
//   }], 
      proxy: { 
       type: 'direct', 
       directFn: CRUDSampleMethods2.read 
      } 
     }, 
     columns: [{ 
      dataIndex: 'email', 
      flex: 1, 
      text: 'Email' 
     }, { 
      dataIndex: 'first', 
      //align: 'right', 
      width: 120, 
      text: 'First' 
      //renderer: Ext.util.Format.usMoney 
     }], 
     height: 350, 
     width: 600, 
     title: 'User Grid', 
     renderTo: Ext.getBody() 
    }); 
});

JavaScript代碼（XGrid_writer.js）：

Ext.onReady(function() { 

    Ext.Direct.addProvider(Ext.app.REMOTING_API); 

    Ext.define('User', { 
     extend: 'Ext.data.Model', 
     fields: ['id', 'email', 'first', 'last'] 
    }); 


// var reader = new Ext.data.JsonReader({ // ext 3 code 
//  totalProperty: 'results', 
//  successProperty: 'success', 
//  idProperty: 'id', 
//  root: 'data' 
// }, [{ 
//  name: 'id' 
// }, { 
//  name: 'email', 
//  allowBlank: false 
// }, { 
//  name: 'first', 
//  allowBlank: false 
// }, { 
//  name: 'last', 
//  allowBlank: false 
// }] 
// ); 

    var reader = Ext.create('Ext.data.JsonReader', { // ext 4 code 
     totalProperty: 'results', 
     successProperty: 'success', 
     idProperty: 'id', 
     root: 'data' 
    }); 


    //var writer = new Ext.data.JsonWriter({ // convert from ext 3 to ext 4 
    var writer = Ext.create('Ext.data.JsonWriter', { 
     returnJson: false, 
     writeAllFields: true 
    }); 

    //var store = new Ext.data.DirectStore({ 
    var store = Ext.create('Ext.data.DirectStore', { 
     model: 'User', 
     api: { 
      read: CRUDSampleMethods2.read, 
      create: CRUDSampleMethods2.create, 
      update: CRUDSampleMethods2.update, 
      destroy: CRUDSampleMethods2.destroy 
     }, 
     reader: reader, 
     baseParams: { 
      dummy: 'blubb' 
     }, 
     writer: writer, // <-- plug a DataWriter into the store just as you would a Reader 
     paramsAsHash: true, 
     batchSave: false, 
     batch: false, 
     prettyUrls: false, 
     remoteSort: true, 
     listeners: { 
      load: function (result) { }, 
      loadexception: function() { 

      }, 
      scope: this 
     } 
    }); 
    // 

    var myPageSize = 10; 

    var userColumns = [{ 
     header: "ID", 
     width: 40, 
     sortable: true, 
     dataIndex: 'id' 
    }, { 
     header: "Email", 
     width: 100, 
     sortable: true, 
     dataIndex: 'email' 
     //editor: new Ext.form.TextField({}) 
    }, { 
     header: "First", 
     width: 50, 
     sortable: true, 
     dataIndex: 'first' 
     //editor: new Ext.form.TextField({}) 
    }, { 
     header: "Last", 
     width: 50, 
     sortable: true, 
     dataIndex: 'last' 
     //editor: new Ext.form.TextField({}) 
    }]; 
    Ext.onReady(function() { 
     Ext.QuickTips.init(); 

     //  var userForm = new App.user.Form({ 
     //   renderTo: 'user-form', 
     //   listeners: { 
     //    create: function (fpanel, data) { // <-- custom "create" event defined in App.user.Form class 
     //     var rec = new userGrid.store.recordType(data); 
     //     userGrid.store.insert(0, rec); 
     //    } 
     //   } 
     //  }); 

     // create user.Grid instance (@see UserGrid.js) 
     var userGrid = Ext.create('mypanel', { 
      renderTo: Ext.getBody(), 
      store: store, 
      columns: userColumns, 
      //bbar: new Ext.PagingToolbar({ 
      bbar: Ext.create('Ext.PagingToolbar', { 
       store: store, // grid and PagingToolbar using same store 
       displayInfo: true, 
       pageSize: myPageSize, 
       prependButtons: true, 
       items: [ 
        'text 1' 
       ] 
      }), 
      listeners: { 
       rowclick: function (g, index, ev) { 
        var rec = g.store.getAt(index); 
        //userForm.loadRecord(rec); 
       }, 
       destroy: function() { 
        //userForm.getForm().reset(); 
       } 
      } 
     }); 
     setTimeout(function() { 
      Ext.get('loading').remove(); 
      Ext.fly('loading-mask').fadeOut({ 
       remove: true 
      }); 
      store.load({ 
       params: { 
        start: 0, // specify params for the first page load if using paging 
        limit: myPageSize, 
        foo: 'bar' 
       } 
      }); 

     }, 250); 
    }); 

}); // onready

EDIT 1：

響應：

enter image description here

美化：

[{ 
    "type": "rpc", 
    "name": null, 
    "tid": 1, 
    "action": "CRUDSampleMethods2", 
    "method": "read", 
    "result": { 
     "success": true, 
     "results": 3, 
     "data": [{ 
      "id": "1", 
      "email": "[email protected]", 
      "first": "Martin", 
      "last": "Späth" 
     }, { 
      "id": "2", 
      "email": "[email protected]", 
      "first": "Heinz", 
      "last": "Erhart" 
     }, { 
      "id": "3", 
      "email": "[email protected]", 
      "first": "Albert", 
      "last": "Einstein" 
     }] 
    }, 
    "message": null, 
    "where": null, 
    "errorcode": 0 
}]

編輯2：

var store = Ext.create('Ext.data.Store', { 
    model: 'User', 
    //fields: ['id', 'email', 'first', 'last'], 
    proxy: { 
     type: 'direct', 
     directFn: CRUDSampleMethods2.read, 
     reader: { 
      root: 'data' 
     } 
    } 
});

我曾在定義（Ext.define）和之前的實例（Ext.create）的商店。所以現在我只有一個'Ext.grid.Panel'的實例。我不再有XGrid.js。下面的代碼是XGrid.html。稍後，我可以在MVC中創建自己的定義，但至少可以讓我開始。作者還沒有運作，所以這是下一個挑戰。

Ext.require(['Ext.direct.*', 'Ext.data.*', 'Ext.grid.*', 'Ext.util.Format']); 

Ext.onReady(function() { 

    Ext.Direct.addProvider(Ext.app.REMOTING_API); 

    Ext.define('User', { 
     extend: 'Ext.data.Model', 
     fields: ['id', 'email', 'first', 'last'] 
    }); 


    // var reader = new Ext.data.JsonReader({ 
    //  totalProperty: 'results', 
    //  successProperty: 'success', 
    //  idProperty: 'id', 
    //  root: 'data' 
    // }, [{ 
    //  name: 'id' 
    // }, { 
    //  name: 'email', 
    //  allowBlank: false 
    // }, { 
    //  name: 'first', 
    //  allowBlank: false 
    // }, { 
    //  name: 'last', 
    //  allowBlank: false 
    // }] 
    // ); 

    var reader = Ext.create('Ext.data.JsonReader', { 
     totalProperty: 'results', 
     successProperty: 'success', 
     idProperty: 'id', 
     root: 'data' 
     //fields: [ 
     //  { 
     //   name: 'id' 
     //  }, { 
     //   name: 'email' 
     //  }, { 
     //   name: 'first' 
     //  }, { 
     //   name: 'last' 
     //  } 
     //  ] 
    }); 


    //var writer = new Ext.data.JsonWriter({ // convert from ext 3 to ext 4 
    var writer = Ext.create('Ext.data.JsonWriter', { 
     returnJson: false, 
     writeAllFields: true 
    }); 

    var store = Ext.create('Ext.data.Store', { 
     model: 'User', 
     //fields: ['id', 'email', 'first', 'last'], 
     proxy: { 
      type: 'direct', 
      directFn: CRUDSampleMethods2.read, 
      reader: { 
       root: 'data' 
      } 
     } 
    }); 

    //var store = new Ext.data.DirectStore({ 
// var store = Ext.create('Ext.data.DirectStore', { 
//  model: 'User', 
//  api: { 
//   read: CRUDSampleMethods2.read, 
//   create: CRUDSampleMethods2.create, 
//   update: CRUDSampleMethods2.update, 
//   destroy: CRUDSampleMethods2.destroy 
//  }, 
//  //reader: reader, 
//  baseParams: { 
//   dummy: 'blubb' 
//  }, 
//  writer: writer, // <-- plug a DataWriter into the store just as you would a Reader 
//  paramsAsHash: true, 
//  batchSave: false, 
//  batch: false, 
//  prettyUrls: false, 
//  remoteSort: true, 
//  listeners: { 
//   load: function (result) { }, 
//   loadexception: function() { 

//   }, 
//   scope: this 
//  } 
// }); 
// // 

    var myPageSize = 10; 

    var userColumns = [{ 
     header: "ID", 
     flex: 1, 
     sortable: true, 
     dataIndex: 'id' 
    }, { 
     header: "Email", 
     flex: 1, 
     sortable: true, 
     dataIndex: 'email' 
     //editor: new Ext.form.TextField({}) 
    }, { 
     header: "First", 
     flex: 1, 
     sortable: true, 
     dataIndex: 'first' 
     //editor: new Ext.form.TextField({}) 
    }, { 
     header: "Last", 
     flex: 1, 
     sortable: true, 
     dataIndex: 'last' 
     //editor: new Ext.form.TextField({}) 
    }]; 


    // Ext.onReady(function() { 
    Ext.QuickTips.init(); 

    //  var userForm = new App.user.Form({ 
    //   renderTo: 'user-form', 
    //   listeners: { 
    //    create: function (fpanel, data) { // <-- custom "create" event defined in App.user.Form class 
    //     var rec = new userGrid.store.recordType(data); 
    //     userGrid.store.insert(0, rec); 
    //    } 
    //   } 
    //  }); 

    // create user.Grid instance (@see UserGrid.js) 
    var userGrid = Ext.create('Ext.grid.Panel', { 
     title: 'user grid', 
     renderTo: Ext.getBody(), 
     height: 350, 
     width: 600, 
     remoteSort: false, 
//  autoLoad: true, 

     store: store, 
     columns: userColumns, 
     //bbar: new Ext.PagingToolbar({ 
     bbar: Ext.create('Ext.PagingToolbar', { 
      store: store, // grid and PagingToolbar using same store 
      displayInfo: true, 
      pageSize: myPageSize, 
      prependButtons: true, 
      items: [ 
        'text 1' 
       ] 
     }), 
     listeners: { 
      rowclick: function (g, index, ev) { 
       var rec = g.store.getAt(index); 
       //userForm.loadRecord(rec); 
      }, 
      destroy: function() { 
       //userForm.getForm().reset(); 
      } 
     } 
    }); 
    setTimeout(function() { 
     Ext.get('loading').remove(); 
     Ext.fly('loading-mask').fadeOut({ 
      remove: true 
     }); 
     store.load({ 
      params: { 
       start: 0, // specify params for the first page load if using paging 
       limit: myPageSize, 
       foo: 'bar' 
      } 
     }); 

    }, 250); 
    // }); 

    // Ext.require(['Ext.direct.*', 'Ext.data.*', 'Ext.grid.*', 'Ext.util.Format']); 

    // Ext.define('User', { 
    //  extend: 'Ext.data.Model', 
    //  fields: ['id', 'email', 'first', 'last'] 
    // }); 

    // Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); 

    // create the Tree 

// var userGrid = Ext.create('mypanel', { 
//  store: store, 
//  //  store: { 
//  //   model: 'User', 
//  //   remoteSort: true, 
//  //   autoLoad: true, 
//  ////   sorters: [{ 
//  ////    property: 'email', 
//  ////    direction: 'ASC' 
//  ////   }, { 
//  ////    property: 'first', 
//  ////    direction: 'DESC' 
//  ////   }], 
//  //   proxy: { 
//  //    type: 'direct', 
//  //    directFn: CRUDSampleMethods2.read 
//  //   } 
//  //  }, 
//  columns: [{ 
//   dataIndex: 'email', 
//   flex: 1, 
//   text: 'Email' 
//  }, { 
//   dataIndex: 'first', 
//   //align: 'right', 
//   width: 120, 
//   text: 'First' 
//   //renderer: Ext.util.Format.usMoney 
//  }], 
//  height: 350, 
//  width: 600, 
//  title: 'User Grid', 
//  renderTo: Ext.getBody() 
// }); 

}); // onready

來源

2013-07-29 MacGyver

您能否看到正確的HTTP請求離開瀏覽器並返回預期的JSON負載？ – rixo

我會執行哪些工作流程來查看此內容？（我可以在Mozilla Firefox或谷歌瀏覽器中進行疑難解答） – MacGyver

只需查看開發工具的網絡選項卡即可。您可以在'store.load'行放置一個js斷點，並在執行之前清除所有請求。這將更容易找到相關請求。 – rixo

事實上，您的閱讀器配置被忽略。 reader是代理的配置選項，而不是存儲...請注意，XGrid.js（其中配置了代理）的存儲配置在XGrid_writer.js中完全替換。

爲了證實這個診斷，你可以直接在你創建（如記錄here）的DirectStore設置你的閱讀器配置：

var store = Ext.create('Ext.data.DirectStore', { 
    ... 

    // reader: reader, 
    totalProperty: 'results', 
    successProperty: 'success', 
    idProperty: 'id', 
    root: 'data', 

    ...  
});

然後，您可以搜索的方式來做到這一點乾淨。請注意，出於同樣的原因，您的寫入器配置也被忽略。

來源

2013-07-29 07:32:23 rixo

哈哈！我也得到了答案。我通過將根配置包裝在代理配置中做了一個稍微不同的方式。餅乾的關鍵是商店缺失的根配置。看我的編輯2我的解決方案。 – MacGyver

我通過記下這些註釋找到答案https://github.com/ralscha/extdirectspring/wiki/Store-Read-Method – MacGyver

Ext.grid.Panel在Ext 4中無法從Ext.Direct代理存儲中加載數據

回答

相關問題