Load a grid with XML data
<!-- /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ --> <html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <!-- Revised from demo code in ext3.0.0 --> <body> <script type="text/javascript"> /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ Ext.onReady(function(){ // create the Data Store var store = new Ext.data.Store({ // load using HTTP url: 'ext-3.0.0/examples/grid/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' ]) }); // 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} ], renderTo:'example-grid', width:540, height:200 }); store.load(); }); </script> <div id="example-grid"></div></body> </html>
1. | Server Json reader based Store | ||
2. | Set sortInfo for Ext.data.Store |