/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    Ext.QuickTips.init();
    
    // for this demo configure local and remote urls for demo purposes
   /* var url = {
      // local:  'grid-filter.json',  // static data file
        remote: 'grid-filter2_2.php'
    };*/

    // configure whether filter query is encoded or not (initially)
    var encode = false;
    
    // configure whether filtering is performed locally or remotely (initially)
    var local = false;

    store = new Ext.data.JsonStore({
        // store configs
        autoDestroy: true,
        //url: (local ? url.local : url.remote),
		url: 'grid-filter2_2.php',//(url.remote),
        remoteSort: false,
		
     /*   sortInfo: {
            field: 'id',
            direction: 'ASC'
        },*/
        storeId: 'myStore',
        
        // reader configs
        idProperty: 'id',
        root: 'data',
        totalProperty: 'total',
        fields: [
			{
            name: 'hashCodeName'
		}, {
			name: 'hashcode'
        }, {
            name: 'total'
        }]
    });

    var filters = new Ext.ux.grid.GridFilters({
        // encode and local configuration options defined previously for easier reuse
        encode: encode, // json encode the filter query
        local: local,   // defaults to false (remote filtering)
        filters: [
				  /*{
            type: 'numeric',
            dataIndex: 'id'
        }, */{
            type: 'string',
            dataIndex: 'hashCodeName',
			
           // disabled: true
        }, {
			type: 'string',
            dataIndex: 'hashcode'
            
        }, {
            type: 'string',
            dataIndex: 'total'
        }
		/*
		, {
            type: 'list',
            dataIndex: 'size',
            options: ['small', 'medium', 'large', 'extra large'],
            phpMode: true
        }, {
            type: 'boolean',
            dataIndex: 'visible'
        }*/]
    });    
    
    // use a factory method to reduce code while demonstrating
    // that the GridFilter plugin may be configured with or without
    // the filter types (the filters may be specified on the column model
    var createColModel = function (finish, start) {

        var columns = [
					   
					/*   {
					   
            dataIndex: 'id',
            header: 'Id',*/
            // instead of specifying filter config just specify filterable=true
            // to use store's field's type property (if type property not
            // explicitly specified in store config it will be 'auto' which
            // GridFilters will assume to be 'StringFilter'
            //filterable: true
            //,filter: {type: 'numeric'}
        //},
		{
            dataIndex: 'hashCodeName',
            header: 'Name',
			
            id: 'hashCodeName',
			width:120,
			filter: {
                //type: 'string'
                // specify disabled to disable the filter menu
                //, disabled: true
            }
        }, {
            dataIndex: 'hashcode',
            header: 'Hash',
			width:253,
            filter: {
               // type: 'list',
                //options: ['small', 'medium', 'large', 'extra large']
                //,phpMode: true
            }
        }, {
			dataIndex: 'total',
            header: 'Total',
			width:60,
            filter: {
               // type: 'list',
                //options: ['small', 'medium', 'large', 'extra large']
                //,phpMode: true
            }
            // dataIndex: 'price',
           // header: 'Price',
           // filter: {
                //type: 'numeric'  // specify type here or in store fields config
           // }            
        }];

        return new Ext.grid.ColumnModel({
            columns: columns.slice(start || 0, finish),
            defaults: {
                sortable: true,
				
            }
        });
    };
    
    var grid = new Ext.grid.GridPanel({
        border: false,
		store: store,
		
        colModel: createColModel(10),
        loadMask: false,
        plugins: [filters],
        autoExpandColumn: '',
		
        
		listeners: {
            render: {
				
                fn: function(){
                    store.load({
                        params: {
                            start: 0,
                            limit: 10
                        }
                    });
                }
            }
        },
        bbar: new Ext.PagingToolbar({
            store: store,
            pageSize: 10,
            plugins: [filters]
        })
    });

    // add some buttons to bottom toolbar just for demonstration purposes
  /* grid.getBottomToolbar().add([
        '->',
        {
            text: 'Encode: ' + (encode ? 'On' : 'Off'),
            tooltip: 'Toggle Filter encoding on/off',
            enableToggle: true,
            handler: function (button, state) {
                var encode = (grid.filters.encode===true) ? false : true;
                var text = 'Encode: ' + (encode ? 'On' : 'Off'); 
                // remove the prior parameters from the last load options
                grid.filters.cleanParams(grid.getStore().lastOptions.params);
                grid.filters.encode = encode;
                button.setText(text);
                grid.getStore().reload();
            } 
        },{
            text: 'Local Filtering: ' + (local ? 'On' : 'Off'),
            tooltip: 'Toggle Filtering between remote/local',
            enableToggle: true,
            handler: function (button, state) {
                var local = (grid.filters.local===true) ? false : true;
                var text = 'Local Filtering: ' + (local ? 'On' : 'Off');
                var newUrl = local ? url.local : url.remote;
                 
                // update the GridFilter setting
                grid.filters.local = local;
                // bind the store again so GridFilters is listening to appropriate store event
                grid.filters.bindStore(grid.getStore());
                // update the url for the proxy
                grid.getStore().proxy.setApi('read', newUrl);

                button.setText(text);
                grid.getStore().reload();
            } 
        },{
            text: 'All Filter Data',
            tooltip: 'Get Filter Data for Grid',
            handler: function () {
                var data = Ext.encode(grid.filters.getFilterData());
                Ext.Msg.alert('All Filter Data',data);
            } 
        },{
            text: 'Clear Filter Data',
            handler: function () {
                grid.filters.clearFilters();
            } 
        },{
            text: 'Reconfigure Grid',
            handler: function () {
                grid.reconfigure(store, createColModel(6));
            } 
        }    
    ]);*/

    var win = new Ext.Window({
        title: '',
        height: 300,
        width: 450,
        layout: 'fit',
		//closeAction : 'hide',
		closable: false, 
		region: 'center',
		closeAction: 'hide',
		renderTo: 'divWindowId2',
		resizable: false,
		animate: false,
		
		draggable: false,
        items: grid
		
    }).show();
	
	
    
});