<?php require "_header.php";?>

<script type="text/javascript" src="jquery/ux/SuperBoxSelect.js"></script>
<script type="text/javascript" src="jquery/ux/GroupSummary.js"></script>
<script type="text/javascript" src="jquery/ux/RowExpander.js"></script>
<script type="text/javascript" src="jquery/ux/CheckColumn.js"></script>

<script type="text/javascript">
 /*!
 * 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();

    var xg = Ext.grid;
	
	
	var productstore = new Ext.data.Store
	({
		reader: new Ext.data.JsonReader
		({
			fields:['product_id','product_name','product_description'],
			root: 'rows'
		}),
		proxy: new Ext.data.HttpProxy
		({
			url: 'data/getproduct.php'
		}),autoLoad:true
		
	});
	
	var product_combo = new Ext.form.ComboBox({
				
				name:'product_data',
				id:'product_data',
				hiddenName: 'hiddenvendor_cpdesignation1',		
				displayField:'product_name',
				valueField: 'product_name',
				width:50,	
				allowBlank:false,
				triggerAction:'all',
				mode:'local',
				store: productstore,
				editable:true,
				forceSelection:true
	});
	
	 var Employee = Ext.data.Record.create([
	 		{name: 'id', type: 'string'},
            {name: 'description', type: 'string'},
            {name: 'estimate', type: 'float'},
            {name: 'rate', type: 'float'},
            {name: 'cost', type: 'float'}]);

    var reader = new Ext.data.JsonReader({
        fields: [
			{name: 'id', type: 'string'},
            {name: 'description', type: 'string'},
            {name: 'estimate', type: 'float'},
            {name: 'rate', type: 'float'},
            {name: 'cost', type: 'float'}
        ]

    });

    // define a custom summary function
    Ext.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
        return v + (record.data.estimate * record.data.rate);
    };

	// utilize custom extension for Group Summary
      var summary = new Ext.grid.GroupSummary();


    var invoicegrid = new xg.EditorGridPanel({
        ds: new Ext.data.GroupingStore({
            reader: reader,
			// use local data
            //data: app.grid.dummyData,
            sortInfo: {field: 'id', direction: 'ASC'},
            groupField: 'id'
        }),
		selModel:  new Ext.grid.RowSelectionModel({singleSelect: true}),
		 columns: [
		  new Ext.grid.RowNumberer(),
		  {
                header: 'Id',
                dataIndex: 'id',
				width: 10,
				hidden:true
            },
            {
                id: 'description',
                header: 'Product',
                width: 200,
                sortable: true,
                dataIndex: 'description',
               // summaryType: 'count',
                hideable: true,
                summaryRenderer: function(v, params, data){
                    return ('Total:');
                },
                editor:product_combo
            },{
                header: 'QTY',
                width: 20,
                sortable: true,
                dataIndex: 'estimate',
                // summaryType: 'sum',
                renderer : function(v){
                    return v +' Nos';
                },
                editor: new Ext.form.NumberField({
                   allowBlank: false,
                   allowNegative: false,
                   style: 'text-align:left'
                })
            },{
                header: 'Rate',
                width: 20,
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'rate',
                //summaryType: 'average',
                editor: new Ext.form.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    style: 'text-align:left'
                })
            },{
                id: 'cost',
                header: 'Cost',
                width: 20,
                sortable: false,
                groupable: false,
                renderer: function(v, params, record){
                    return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);
                },
                dataIndex: 'cost',
                summaryType: 'totalCost',
                summaryRenderer: Ext.util.Format.usMoney
            }
        ],
		

        view: new Ext.grid.GroupingView({
            forceFit: true,
            //showGroupName: false,
           // enableNoGroups: true,
			//enableGroupingMenu: false,
           // hideGroupedColumn: false,
			//groupTextTpl:"" ,
			//hideHeaders:true


        }),

      plugins: summary,
	   tbar: [{
             iconCls: 'icon-add',
            text: 'Add Tax',
            handler: function(){
                var e = new Employee({
					id:'Invoice',
					description:'',
					project:'',
					estimate:1,
					rate:0,
                    cost: ''
                });
                invoicegrid.stopEditing();
				var insert=(invoicegrid.store.getCount());
                invoicegrid.store.insert(insert, e);
                invoicegrid.getView().refresh();
                invoicegrid.getSelectionModel().selectRow(insert);
                invoicegrid.startEditing(insert,2);
            }
        },{
            ref: '../removeBtn',
            iconCls:'remove',
            text: 'Delete Tax',
            disabled: true,
            handler: function(){
                invoicegrid.stopEditing();
                var s = invoicegrid.getSelectionModel().getSelections();
                for(var i = 0, r; r = s[i]; i++){
					      	 invoicegrid.store.remove(r);
				}
				var remove=(invoicegrid.store.getCount()-1);
				if(remove!=-1)
				{
						invoicegrid.getSelectionModel().selectRow(remove);
				        invoicegrid.startEditing(remove,2);
				}
			           
				
            }
        }], 
        frame: true,
        width: 800,
        height: 450,
        clicksToEdit: 1,
        collapsible: true,
        animCollapse: false,
        trackMouseOver: false,
        enableColumnMove: false,
        title: 'Sponsored Projects',
        iconCls: 'icon-grid',
        renderTo:'main-content'
    });
	 invoicegrid.getSelectionModel().on('selectionchange', function(sm){
        invoicegrid.removeBtn.setDisabled(sm.getCount() < 1);
    });
	


});


</script>
<!-- end custom CSS/JS -->
<div id="main-content"></div>
<?php require "_footer.php";?>