binding.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:2k
源码类别:

JavaScript

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.1.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. Ext.onReady(function(){
  8.     // create the Data Store
  9.     var store = new Ext.data.Store({
  10.         // load using HTTP
  11.         url: 'sheldon.xml',
  12.         // the return will be XML, so lets set up a reader
  13.         reader: new Ext.data.XmlReader({
  14.                // records will have an "Item" tag
  15.                record: 'Item',
  16.                id: 'ASIN',
  17.                totalRecords: '@total'
  18.            }, [
  19.                // set up the fields mapping into the xml doc
  20.                // The first needs mapping, the others are very basic
  21.                {name: 'Author', mapping: 'ItemAttributes > Author'},
  22.                'Title',
  23.    'Manufacturer',
  24.    'ProductGroup',
  25.    // Detail URL is not part of the column model of the grid
  26.    'DetailPageURL'
  27.            ])
  28.     });
  29.     // create the grid
  30.     var grid = new Ext.grid.GridPanel({
  31.         store: store,
  32.         columns: [
  33.             {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
  34.             {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
  35.             {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
  36.             {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
  37.         ],
  38. sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
  39. viewConfig: {
  40. forceFit: true
  41. },
  42.         height:210,
  43. split: true,
  44. region: 'north'
  45.     });
  46. // define a template to use for the detail view
  47. var bookTplMarkup = [
  48. 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
  49. 'Author: {Author}<br/>',
  50. 'Manufacturer: {Manufacturer}<br/>',
  51. 'Product Group: {ProductGroup}<br/>'
  52. ];
  53. var bookTpl = new Ext.Template(bookTplMarkup);
  54. var ct = new Ext.Panel({
  55. renderTo: 'binding-example',
  56. frame: true,
  57. title: 'Book List',
  58. width: 540,
  59. height: 400,
  60. layout: 'border',
  61. items: [
  62. grid,
  63. {
  64. id: 'detailPanel',
  65. region: 'center',
  66. bodyStyle: {
  67. background: '#ffffff',
  68. padding: '7px'
  69. },
  70. html: 'Please select a book to see additional details.'
  71. }
  72. ]
  73. })
  74. grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
  75. var detailPanel = Ext.getCmp('detailPanel');
  76. bookTpl.overwrite(detailPanel.body, r.data);
  77. });
  78.     store.load();
  79. });