/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
	Ext.menu.RangeMenu.prototype.icons = {
	  gt: 'img/greater_then.png', 
	  lt: 'img/less_then.png',
	  eq: 'img/equals.png'
	};
	Ext.grid.filter.StringFilter.prototype.icon = 'img/find.png';
    
    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	  
	var ds = new Ext.data.JsonStore({
	  url:'grid-filter.php',
    id: 'sermid',
    totalProperty: 'total',
    root: 'data',
    fields: [
      //{name:'medid'}, 
      {name:'url'},
      {name:'title'}, 
      {name:'date',type: 'date', dateFormat: 'Y-m-d'}, 
      {name:'speaker'}, 
      {name:'scripture'},
      {name:'series'}
    ],
	  sortInfo: {field: 'date', direction: 'DESC'},
	  remoteSort: true
	});
  
	var filters = new Ext.grid.GridFilters({
	  filters:[
	    //{type: 'numeric',  dataIndex: 'medid'},
	    {type: 'string',  dataIndex: 'title'},
	    {type: 'date',  dataIndex: 'date'},
	    // {
	      // type: 'list',  
	      // dataIndex: 'size', 
	      // options: ['small', 'medium', 'large', 'extra large'],
	      // phpMode: true
	    // },
	    {type: 'string', dataIndex: 'speaker'},
      {type: 'string', dataIndex: 'scripture'},
      {type: 'string', dataIndex: 'series'}
	]});
	
	var cm = new Ext.grid.ColumnModel([
    {width: 15, dataIndex: 'url', header: 'Listen', id: 'url', renderer:
      function(value, metadata, record, rowIndex, colIndex, store) {
        var newval = String.format('<a href="{0}"><img alt="" border="0" src="/images/sermon.gif" /></a>', value);
        
        return newval;
      },
      sortable:false},
	  //{dataIndex: 'medid', header: 'Id'},
	  {dataIndex: 'title', header: 'Title', id: 'title'},
	  {width: 15, dataIndex: 'date', header: 'Date', renderer: Ext.util.Format.dateRenderer('m/d/Y')}, 
	  {dataIndex: 'speaker', header: 'Speaker'}, 
	  {dataIndex: 'scripture', header: 'Scripture'},
    {dataIndex: 'series', header: 'Series'}
	]);
	cm.defaultSortable = true;
	
	var grid = new Ext.grid.GridPanel({
	  id: 'example',
	  //title: 'Grid Filters Example',
	  ds: ds,
	  cm: cm,
	  enableColLock: false,
	  loadMask: true,
	  plugins: filters,
	  height:480,
	  width:610,        
	  el: 'grid-example',
    autoExpandColumn: 'title',
	  bbar: new Ext.PagingToolbar({
	    store: ds,
	    pageSize: 17,
	    plugins: filters
	  }),
    viewConfig: {
      forceFit: true
    }
	});
	grid.render();
	
	ds.load({params:{start: 0, limit: 17}});
});