www.gusucode.com > 一个基于extjs的强大聊天插件源码程序 > 一个基于extjs的强大聊天插件/extjame/ext-jame/js/ext2/examples/grid/binding.js
/* * Ext JS Library 2.0.2 * Copyright(c) 2006-2008, Ext JS, LLC. * licensing@extjs.com * * http://extjs.com/license */ Ext.onReady(function(){ // create the Data Store var store = new Ext.data.Store({ // load using HTTP url: 'sheldon.xml', // the return will be XML, so lets set up a reader reader: new Ext.data.XmlReader({ // records will have an "Item" tag record: 'Item', id: 'ASIN', totalRecords: '@total' }, [ // set up the fields mapping into the xml doc // The first needs mapping, the others are very basic {name: 'Author', mapping: 'ItemAttributes > Author'}, 'Title', 'Manufacturer', 'ProductGroup', // Detail URL is not part of the column model of the grid 'DetailPageURL' ]) }); // create the grid var grid = new Ext.grid.GridPanel({ store: store, columns: [ {header: "Author", width: 120, dataIndex: 'Author', sortable: true}, {header: "Title", width: 180, dataIndex: 'Title', sortable: true}, {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true}, {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true} ], sm: new Ext.grid.RowSelectionModel({singleSelect: true}), viewConfig: { forceFit: true }, height:210, split: true, region: 'north' }); // define a template to use for the detail view var bookTplMarkup = [ 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>', 'Author: {Author}<br/>', 'Manufacturer: {Manufacturer}<br/>', 'Product Group: {ProductGroup}<br/>' ]; var bookTpl = new Ext.Template(bookTplMarkup); var ct = new Ext.Panel({ renderTo: 'binding-example', frame: true, title: 'Book List', width: 540, height: 400, layout: 'border', items: [ grid, { id: 'detailPanel', region: 'center', bodyStyle: { background: '#ffffff', padding: '7px' }, html: 'Please select a book to see additional details.' } ] }) grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) { var detailPanel = Ext.getCmp('detailPanel'); bookTpl.overwrite(detailPanel.body, r.data); }); store.load(); });