Displaying XML data sent by the server

This recipe explains how to populate theMovies grid with the XML data retrieved from the server. This is how the loaded grid will look:

Getting ready...

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.

How to do it...

1. 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. 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...