Ext.onReady(function(){
	Ext.menu.RangeMenu.prototype.icons = {
	  gt: '', 
	  lt: '',
	  eq: ''
	};
	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:'excel/grid-filter.asp',
    id: 'id',
    totalProperty: 'total',
    root: 'data',
    fields: [
      {name:'id'}, 
      {name:'sharp'}, 
       //{name:'date',type: 'date', dateFormat: 'Y-m-d H:i:s'}, 
	  {name:'carat'},
	  {name:'rap'},
      {name:'cl'}, 
	  {name:'col'}, 
      {name:'pl'},
	  {name:'sym'},
	  {name:'cut'},
	  {name:'cert'}
	  	  
    ],
	  sortInfo: {field: 'id', direction: 'ASC'},
	  remoteSort: true
	});
  
	var filters = new Ext.grid.GridFilters({
	  filters:[
	    {type: 'numeric',  dataIndex: 'id'},
			    {
	      type: 'list',  
	      dataIndex: 'sharp', //xingzhuang
	      options: ['ROUND','EMERALD', 'HEART', 'CUSHION', 'MARQUISE','OVAL','PRINCESS','PEAR'],
	      phpMode: true
	    },
	   // {type: 'string',  dataIndex: 'company'},
	   
		{type: 'numeric', dataIndex: 'carat'},
		{type: 'numeric', dataIndex: 'rap'},
	    //{type: 'date',  dataIndex: 'date'},

		
			    {
	      type: 'list',  
	      dataIndex: 'cl', //jingdu
	      options: ['FL', 'IF', 'VVS1', 'VVS2','VS1','VS2','SI1','SI2'],
	      phpMode: true
	    },
	    {
	      type: 'list',  
	      dataIndex: 'col', //yanse
	      options: ['D', 'E', 'F', 'G','H','I','J','K'],
	      phpMode: true
	    },
			    {
	      type: 'list',  
	      dataIndex: 'pl', //guangze
	      options: ['Ideal', 'EX', 'VG', 'G','Fair'],
	      phpMode: true
	    },
			    {
	      type: 'list',  
	      dataIndex: 'sym', //duicheng
	      options: ['Ideal', 'EX', 'VG', 'G','Fair'],
	      phpMode: true
	    },
			    {
	      type: 'list',  
	      dataIndex: 'cut', //qiegong
	      options: ['Ideal', 'EX', 'VG', 'G','Fair'],
	      phpMode: true
	    },
			    {
	      type: 'list',  
	      dataIndex: 'cert', //zhengshu
	      options: ['GIA', 'IGI'],
	      phpMode: true
	    }
	    //{type: 'boolean', dataIndex: 'visible'}
	]});
	function renderTopic(value, p, record){
        return String.format(
                '{0}<a  href="http://www.diamond-lover.com/showdiamonddetail.asp?id={1}" target="_blank" style="color:#385F95; text-decoration:none;">详细</a>',
                value, record.data.id, record.data.cert);
    } 
	var cm = new Ext.grid.ColumnModel([
	  {dataIndex: 'id', header: 'Id', id: 'id', width : 40},
	  {dataIndex: 'sharp', header: '形状', width : 80, id: 'sharp'},
	  {dataIndex: 'carat', header: '钻重', width : 80, id: 'carat'}, 
	  {dataIndex: 'rap', header: 'RAP报价', width : 90, id: 'rap'},
	 // {dataIndex: 'date',header: 'Date', renderer: Ext.util.Format.dateRenderer('m/d/Y')}, 
	  {dataIndex: 'cl', header: '净度', width : 80, id: 'cl'}, 
	  {dataIndex: 'col', header: '颜色', width : 80, id: 'col'}, 
	  {dataIndex: 'pl', header: '抛光', width : 80, id: 'pl'}, 
	  {dataIndex: 'sym', header: '对称', width : 80, id: 'sym'}, 
	  {dataIndex: 'cut', header: '切工', width : 80, id: 'cut'}, 
	  {dataIndex: 'cert', header: '证书', width : 80, id: 'cert', renderer: renderTopic}
	 ]);
	cm.defaultSortable = true;
	
	var grid = new Ext.grid.GridPanel({
	  id: 'example',
	  title: '裸石筛选展示表格',
	  ds: ds,
	  cm: cm,
	  enableColLock: false,
	  loadMask: true,
	  plugins: filters,
	  height:410,
	  width:785,        
	  el: 'grid-diamond',
    //autoExpandColumn: 'company',
	  bbar: new Ext.PagingToolbar({
	    store: ds,
	    pageSize: 15,
	    plugins: filters
	  })
	});
	grid.render();
	
	ds.load({params:{start: 0, limit: 15}});
});