Ext.onReady(function() {
  var store = new Ext.data.JsonStore({
     root: 'sermons',
     totalProperty: 'totalCount',
     idProperty: 'sermon_id',
     remoteSort: true,

     fields: [
        'pastor', 'title', 'sermondate', 'filesize', 'filename'
     ],

     proxy: new Ext.data.ScriptTagProxy({
        url: 'http://lsccmedia.com/sermons.py'
     }) 
/*     proxy: new Ext.data.HttpProxy({
        url: 'http://lsccmedia.com/sermons.py'
     }) */
  });

  store.setDefaultSort('sermondate', 'desc');


  function renderSermon( value, p, record) {
     var link = String.format(
         '<b><a href="http://lsccmedia.com/sermons/{0}" alt="Download now: {2} Mb">{1}</a>', record.data.filename, value, record.data.filesize/1000000);
     if (record.json.series) {
         link += String.format('<br/>From: {0}',record.json.series); 
     }
     return link;
  }

  var grid = new Ext.grid.GridPanel({
     width:650,
     height:520,
     title: 'Lifspring Community Church - Sermon Archive',
     store: store,
     trackMouseOver: false,
     disableSelection: true,
     loadMask: true,
   
     columns: [{
        id: 'sermon',
        header: 'Sermon Name',
        dataIndex: 'title',
        width: 420,
        renderer: renderSermon,
        sortable: true
     },{
        id: 'sermon_id',
        dataIndex: 'sermon_id',
        hidden: true
     },{
        id: 'pastor',
        header: 'Pastor',
        dataIndex: 'pastor',
        width: 200,
        sortable: true
     },{
        id: 'sermondate',
        header: 'Date',
        dataIndex: 'sermondate',
        width: 180,
        sortable: true
     }],

     viewConfig: {
        forceFit: true,
        enableRowBody: true,
        showPreview: false
     },

     bbar: new Ext.PagingToolbar({
         pageSize: 20,
         store: store,
         displayInfo: true,
         displayMsg: 'Displaying Sermons {0} - {1} of {2}',
         emptyMsg: 'No sermons to display',
         items: ['-']
     })
  }); 

  grid.render('topic-grid');

  store.load({params: {start:0, limit:20}});
});