xml-grid.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. Ext.require([
  2. 'Ext.data.*',
  3. 'Ext.grid.*'
  4. ]);
  5. Ext.onReady(function(){
  6. Ext.define('Book',{
  7. extend: 'Ext.data.Model',
  8. fields: [
  9. // set up the fields mapping into the xml doc
  10. // The first needs mapping, the others are very basic
  11. {name: 'Author', mapping: 'ItemAttributes > Author'},
  12. 'Title', 'Manufacturer', 'ProductGroup'
  13. ]
  14. });
  15. // create the Data Store
  16. var store = Ext.create('Ext.data.Store', {
  17. model: 'Book',
  18. autoLoad: true,
  19. proxy: {
  20. // load using HTTP
  21. type: 'ajax',
  22. url: 'sheldon.xml',
  23. // the return will be XML, so lets set up a reader
  24. reader: {
  25. type: 'xml',
  26. // records will have an "Item" tag
  27. record: 'Item',
  28. idProperty: 'ASIN',
  29. totalRecords: '@total'
  30. }
  31. }
  32. });
  33. // create the grid
  34. var grid = Ext.create('Ext.grid.Panel', {
  35. store: store,
  36. columns: [
  37. {text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
  38. {text: "Title", width: 180, dataIndex: 'Title', sortable: true},
  39. {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
  40. {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
  41. ],
  42. renderTo:'example-grid',
  43. width: 540,
  44. height: 200
  45. });
  46. });