Ext.onReady(function(){
    
	Ext.QuickTips.init();
	
	var xg = Ext.grid;
	var encode = false;
    var local = false;
   
	store = new Ext.data.JsonStore({
		autoDestroy: true,
        url:'data/currentstock-grid-filter.php',
        remoteSort: true,
       	//sortInfo:{ field: 'product_id',direction: 'ASC' },
        storeId: 'myStore',
        idProperty: 'product_id',
        root: 'data',
        totalProperty: 'total',
        fields:[
		{
        	name:'product_id', 
			type:'int'
        },{
            name: 'product_name'
        },{
            name: 'product_description'
        },{
            name: 'product_measurement'
        },{
            name: 'puchase',
			type:'int'
        },{
            name: 'sale',
			type:'int'
        },{
            name: 'avilable',
			type:'int'
		}] 
    });
    
	var filters = new Ext.ux.grid.GridFilters({
		encode: encode, 
        local:false,                                      
		filters: [{
			type: 'numeric',
            dataIndex: 'product_id'
        },{
            type:'string',
            dataIndex: 'product_name'
        },{
            type:'string',
            dataIndex: 'product_measurement'
        },{
            type:'numeric',
            dataIndex: 'puchase'
        },{
            type:'numeric',
            dataIndex: 'sale'
        },{
            type:'numeric',
            dataIndex: 'avilable'
        }]
    });    

	var createColModel = function (finish, start) {
    	var columns = [
		{
 			dataIndex:'product_id',
            header:'Product ID',
			align:'center',
			hidden:true
		},{
            dataIndex: 'product_name',
            header: 'Name',
			width:140
		},{
            dataIndex: 'product_description',
            header: 'Discription',
			width:280
		},{
            dataIndex: 'product_measurement',
            header: 'Mesure',
			width:60
		},{
            dataIndex: 'puchase',
            header: 'Purchase Qty',
			width:80
		},{
            dataIndex: 'sale',
            header: 'Sale Qty',
			width:60
		},{
            dataIndex: 'avilable',
            header: 'Available Qty',
			width:80
			
		}];
		return new Ext.grid.ColumnModel({
        	columns: columns.slice(start || 0, finish),
			defaults: {
				sortable: true
			}
        });
    };
	
	var grid = new Ext.grid.GridPanel({
    	store: store,
        colModel: createColModel(40), 
        loadMask: true,
		frame: true,
		enableColLock:false,
		columnLines:true,
	    height: 380,   
        width: 700,
        //layout: 'fit',
    	selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
        plugins: [filters],
		listeners: {
            render: {
                fn: function(){
                    store.reload({
                        params: {
                            start: 0,
                            limit: 10    
                        }
                    });
                }
            }
        },
		bbar: new Ext.PagingToolbar({
            store: store,
            pageSize: 10,
			displayInfo: true,
            plugins: [filters]
        })
    });
    grid.getBottomToolbar().add([
        '->',
        {
            text: 'Clear Filter Data',
            handler: function () {
                grid.filters.clearFilters();
            } 
        }    
    ]);

	grid.on('render', function() {
		grid.tip = new Ext.ToolTip({
			view: grid.getView(),
			target: grid.getView().mainBody,
			delegate: '.x-grid3-row',
			trackMouse: true,
			renderTo: document.body,
			listeners: {
				     beforeshow: function updateTipBody(tip) {
					 tip.body.dom.innerHTML = "Click On Edit Link to Edit Record.";
				}
			}
		});
  	});
	
	store.on({
		'beforeload': {
    		fn: function(store, options){
            	options.params || (options.params = {}); 
            	Ext.apply(options.params, {
            		pageNo: this.pageNumber
            	});
        	},
        	scope: this
    	}
	});
	
	var ViewEmployeeWindow = new Ext.Window({
        title: 'Current Stock Information',
        height: 360,
        width: 750,
		modal:true,
        layout: 'fit',
		closeAction:'close',
		border: false,
		collapsible:'true',
		items: grid
    }).show();
	
	var varWidth =  (screen.width - ViewEmployeeWindow.width)/2;
	ViewEmployeeWindow.setPosition(varWidth,((screen.height/4)-100));
});