This recipe explains how to populate theMovies grid with the XML data retrieved from the server. This is how the loaded grid will look:
The sample data used in this chapter's recipes comes from the Sakila sample database.
Note
You can obtain the Sakila database, as well as the installation instructions, at http://dev.mysql.com/doc.
1. Create a data store:
var store = new Ext.data.XmlStore({ url: 'grid-xml-remote.php', record: 'movie', idPath: 'id', fields: ['id', 'title', 'year', 'rating'] })
2. Define a grid panel and retrieve the data:
Ext.onReady(function() { var grid = new Ext.grid.GridPanel({ title: 'Movies', store: store, columns: [ { header: "ID", width: 30, dataIndex: 'id', sortable: true, hidden:true }, { id: 'title-col', header: "Title", width: 180, dataIndex: 'title', sortable: true }, { header: "Rating", width: 75, dataIndex: 'rating', sortable: true }, { header: "Year", width: 75, dataIndex: 'year', sortable: true...