title: display image in a grid using extjs
body: <p>I am new to extjs. I want to display icon images for each grid elements.
  can you please help me anybody?</p>
  
  <p>I am getting the image path from an xml file.</p>
  
  <p>My code is below. here I am displaying image path.</p>
  
  <p>I have to replace it by displaying image.</p>
  
  <pre><code>Ext.onReady(function(){
  
        var store = new Ext.data.Store({
          url: 'new_frm.xml',
  
                 reader: new Ext.data.XmlReader({
                 record: 'message',
                 fields: [{name: 'first'},{name: 'last'},{name: 'company'},{name: 'email'},{name: 'gender'},{name: 'form-file'},{name: 'state'},{name: 'Live'},{name: 'content'}]
             })
      });
  
        var grid = new Ext.grid.GridPanel({
          store: store,
          columns: [
              {header: "First Name", width: 120, dataIndex: 'first', sortable: true},
              {header: "Last Name", width: 180, dataIndex: 'last', sortable: true},
              {header: "Company", width: 115, dataIndex: 'company', sortable: true},          
              {header: "Email", width: 100, dataIndex: 'email', sortable: true},
              {header: "Gender", width: 100, dataIndex: 'gender', sortable: true},
              {header: "Photo", width: 100, dataIndex: 'form-file', sortable: true},
              {header: "State", width: 100, dataIndex: 'state', sortable: true},
              {header: "Living with", width: 100, dataIndex: 'Live', sortable: true},
              {header: "Commands", width: 100, dataIndex: 'content', sortable: true}
  
          ],
          renderTo:'example-grid',
          height:200
      });
  
      store.load();
  });
  </code></pre>