title: How to display JSON data using grid in Extjs
body: <p>I am new to Extjs and not very familar with Javascript and its related libraries. Now what I want to do is :</p>
  
  <ol>
  <li><p>Send a GET request to a remote server, like GET <a href="http://remote-restful-server.com/find/" rel="nofollow">http://remote-restful-server.com/find/</a>{id}.</p></li>
  <li><p>The server would return a data with JSON format. The data is like :</p>
  
  <pre><code>[{
      id: 1,
      level01: "Food",
      level02: null,
      level03: null,
      code: "XXXX",
      link: ABC1  
  },
  {
      id: 2,
      level01: "Food",
      level02: "Fruit",
      level03: null,
      code: "XXXX",
      link: ABC1  
  },
  ..., ...]
  </code></pre></li>
  <li><p>I want to display these data in a grip in extjs. But I have some problems when I was doing that:</p></li>
  </ol>
  
  <p>1) the {id} is step 1 is got from the url of this page. How to get a parameter in the url by using Extjs?</p>
  
  <p>2) How to make a GET request to a restful web service and get the JSON data returned?</p>
  
  <p>3) How to display all the data through a grid component in Extjs? The fields of all the elements in the JSON array are fixed.</p>
  
  <p>4) I want some columns in the grid to contain links. How to do this?</p>
  
  <p>5) How to do some changes on a few specific fields before they are displayed?</p>
  
  <p>I tried to display the json data on an array grid. But I failed. It seems that I cannot load the json data successfully. The code is:</p>
  
  <pre><code>Ext.onReady(function() {
  
  
      // Define a product model
      Ext.define('Product', {
          extend: 'Ext.data.Model',
          fields: [
              {name: 'product_id', type: 'int'},
              'large_class_code',
              'medium_class_code',
              'small_class_code',
              'product_code',
              'large_class_name',
              'medium_class_name',
              'small_class_name',
              'product_name',
              'current_level',
              'current_code',
              'current_name',
              'parent_id',
              'parent_name',
              'has_standards'
          ]
      });
  
      // create the data store
      var store = Ext.create('Ext.data.Store', {
          model: 'Product',
          proxy: {
              type: 'ajax',
              url : 'http://xxx.xxx.xx.xxx:8080/product/all/',
              reader: {
                  type: 'json'
              }
          }
      });
  
      store.load();
      //console.log(store);
  
      // create the grid
      var grid = Ext.create('Ext.grid.Panel', {
          store: store,
          columns: [
              {id:'id',header: 'ID', width: 30, sortable: true, dataIndex: 'product_id'},
              {header: 'large_class_code', width: 100, sortable: true, dataIndex: 'large_class_code'},
              {header: 'medium_class_code', width: 100, sortable: true, dataIndex: 'medium_class_code'},
              {header: 'small_class_code', width: 100, sortable: true, dataIndex: 'small_class_code'},
              {header: 'product_code', width: 100, sortable: true, dataIndex: 'product_code'},
              {header: 'large_class_name', width: 100, sortable: true, dataIndex: 'large_class_name'},
              {header: 'medium_class_name', width: 100, sortable: true, dataIndex: 'medium_class_name'},
              {header: 'product_name', width: 100, sortable: true, dataIndex: 'product_name'},
              {header: 'current_level', width: 100, sortable: true, dataIndex: 'current_level'},
              {header: 'current_code', width: 100, sortable: true, dataIndex: 'current_code'},
              {header: 'current_name', width: 100, sortable: true, dataIndex: 'current_name'},
              {header: 'parent_id', width: 100, sortable: true, dataIndex: 'parent_id'},
              {header: 'parent_name', width: 100, sortable: true, dataIndex: 'parent_name'},
              {header: 'has_standards', width: 100, sortable: true, dataIndex: 'has_standards'}
          ],
          stripeRows: true,
          height:600,
          width:2000,
          renderTo: 'grid-example',
          title:'test list'
      });
  
  });
  </code></pre>
  
  <p>The grid can be displayed, but without any data on it. I check the console in chrome:</p>
  
  <p>I got:</p>
  
  <p>OPTIONS <a href="http://xxx.xxx.xx.xxx:8080/product/all/?_dc=1384145304301&amp;page=1&amp;start=0&amp;limit=25" rel="nofollow">http://xxx.xxx.xx.xxx:8080/product/all/?_dc=1384145304301&amp;page=1&amp;start=0&amp;limit=25</a> Origin <a href="http://xxx.xxx.xx.xxx" rel="nofollow">http://xxx.xxx.xx.xxx</a> is not allowed by Access-Control-Allow-Origin. </p>
  
  <p>and </p>
  
  <p>XMLHttpRequest cannot load <a href="http://xxx.xxx.xx.xxx:8080/product/all/?_dc=1384145304301&amp;page=1&amp;start=0&amp;limit=25" rel="nofollow">http://xxx.xxx.xx.xxx:8080/product/all/?_dc=1384145304301&amp;page=1&amp;start=0&amp;limit=25</a>. Origin <a href="http://xxx.xxx.xx.xxx" rel="nofollow">http://xxx.xxx.xx.xxx</a> is not allowed by Access-Control-Allow-Origin. </p>