<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" Culture="auto:zh-TW" UICulture="auto" CodeFile="WeeklyPayment.aspx.cs" Inherits="Personal_WeeklyPayment" Title="<%$ Resources: SiteMapLocalizations, Personal_WeeklyPayment %>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<link rel="stylesheet" type="text/css" href="../ext2/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext2/adapter/ext/ext-base.js"></script>  
<script type="text/javascript" src="../ext2/ext-all.js"></script>  
<script type="text/javascript" src="../ext2/source/locale/ext-lang-zh_TW.js"></script>  
<style type="text/css">
#selection .x-panel-body { 
    font-size:12px; 
    font-family:Verdana, Arial sans-serif; 
} 
#selection .x-table-layout { 
    width:50%; 
}#selection .x-table-layout td { 
    text-align:center; 
    vertical-align:middle; 
} 
</style>

<script language="javascript">
// Add the additional 'advanced' VTypes
var cm;
var store;
var grid;
Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);

        if(!date){
            return;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        } 
        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    },

    password : function(val, field) {
        if (field.initialPassField) {
            var pwd = Ext.getCmp(field.initialPassField);
            return (val == pwd.getValue());
        }
        return true;
    },

    passwordText : 'Passwords do not match'
});

Ext.onReady(function(){

    Ext.QuickTips.init();

//    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

//    var bd = Ext.getBody();

   
    var dr = new Ext.Panel({
        //id: 'selection',
        layout: 'table',
        layoutConfig: {
            columns: 3
//            attributes:{cellspacing: 100, cellpadding: 100}
        },
        //labelWidth: 125,
        frame: true,
        title: '選擇時間範圍',
        bodyStyle:'width: 98%; text-align:center; padding:3px',
        //ctCls: 'padding:20px',
        width: 980,
        defaults: {width: 175},
        defaultType: 'datefield',
        items: [{
            xtype: 'datefield',
            fieldLabel: 'Start',
            //        cls: 'padding: 20px',
            emptyText: ((new Date()).add(Date.YEAR, -1)).format("Y/m/d"),//'啟始時間',
            name: 'startDate',
            id: 'startDate',
            vtype: 'daterange',
            //value: ((new Date()).add(Date.YEAR, -1)).format("Y/m/d"),
            endDateField: 'endDate' // id of the end date field
            },{
            xtype: 'datefield',
            //fieldLabel: 'End',
            //cellCls: 'width: 300; padding:5 5 5 5',
            emptyText: (new Date()).format("Y/m/d"),//'結束時間',
            name: 'endDate',
            id: 'endDate',
            vtype: 'daterange',
            //value: (new Date()).format("Y/m/d"),
            startDateField: 'startDate' // id of the start date field
            },{
            xtype: 'button',
            text: '搜尋',
            handler: showGrid}]
    });
    dr.render('selection');


    cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(), // 有 rownumberer 則 expander 會移到最前面去 (左邊)
        //sm,
        {id: 'PettyCashID', header:'編號',dataIndex:'PettyCashID', type: 'number', width: 30, hidden: 'true'},
        {header:'姓名',dataIndex:'UserName', width: 40},
        {header:'項目',dataIndex:'Item', width: 250},
        {header:'票據時間',dataIndex:'ReceiptDate', width: 40},
        {header:'付款時間',dataIndex:'PayDate', width: 40},
        {header:'金額', dataIndex:'Amount', align: 'right', width: 50}//Ext.data.SortTypes.asInt
    ]);
    cm.defaultSortable = true;
    
    // 顯示預設的資料
    showGrid();
function showGrid(){
//debugger;
    // Ext.data.Store
    store = new Ext.data.Store({
        method: 'post',
        proxy: new Ext.data.ScriptTagProxy({
            url: '../WebServices/WeeklyPayment.ashx'
        }),
        reader: new Ext.data.JsonReader({totalProperty: 'totalProperty', root: 'Items'}, [
            {name: 'PettyCashID'},
            {name: 'UserName'},
            {name: 'Item'},
            {name: 'ReceiptDate'},
            {name: 'PayDate'},
            {name: 'Amount', type: 'int', sortType: 'asInt'} // sort 要在這並非 ColumnModel
        ])
    });

    if (grid != null)
        grid.destroy();
    grid = new Ext.grid.GridPanel({
        store: store,
        cm: cm,
        viewConfig: {
            forceFit:true,
            showPreview:true
        },
        title:'週付款',
        height: 380,
        width: 980,
//        plugins: expander,
        loadMask: {msg:'載入中 ...'},
//        autoExpandColumn: 'Subject',
//        collapsible: true,
        animCollapse: false,
//        titleStyle:'width:100%;',
        bodyStyle:'width:99.8%;',
        iconCls:'icon-grid'
//        remove: function (pid){
//            alert(pid);
//        }
    });
    store.on('beforeload', function(store) {
//    debugger;
        var para = {UserName:'',StartDate:'',EndDate:''};
        para.UserName = document.getElementById("ctl00_ContentPlaceHolder1_hidUserName").value;
//        alert (document.getElementById("ctl00_ContentPlaceHolder1_hidUserName").value);
        para.StartDate = Ext.get("startDate").dom.value;
        para.EndDate = Ext.get("endDate").dom.value;
        
        Ext.apply(store.baseParams,para);  
    });
    store.load({params:{start:0, limit:30}});
    grid.render('tblContent');
    grid.loadMask.msg = "載入中 ...";
    grid.loadMask.show();
    //grid.load.defer(50,grid);
}});


</script>
<input type="hidden" id="hidUserName" runat="Server" />
<div id="selection"></div>
<hr />
<div id="tblContent"></div>
</asp:Content>

