/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){


    var myData = [
        ['グアテマラ',18,575,625,816,444,2460],
        ['ホンジュラス ※1',1,550,2159,440,2820,5969],
        ['メキシコ',19,1324,1038,1323,801,4416],
        ['チリ',10,1656,1345,550,260,3480],
        ['ボリビア ※2',26,413,597,348,1487,2733],
        ['ペルー ※3',21,713,716,590,504,2489],
        ['エクアドル ※4',13,1010,996,3723,2344,7917],
        ['スペイン',8,3117,1358,2776,645,7117],
        ['モロッコ',14,555,668,1825,543,3433],
        ['ドイツ ※5',9,4362,1448,3581,783,9689],
        ['チェコ ※6',2,2720,1395,2041,3990,10146],
        ['ハンガリー ※7',3,2210,942,45,200,3396],
        ['トルコ',13,1118,979,1225,613,3676],
        ['シリア',11,1074,648,395,1093,3210],
        ['イエメン ※8',19,414,433,1592,834,3273],
        ['イスラエル ※9',5,1080,494,1003,55,2631],
        ['エジプト ※10',38,329,771,313,828,2198],
        ['ヨルダン',20,534,453,859,931,2697],
        ['ケニア ※11',10,763,448,675,4536,6117],
        ['タンザニア ※12',12,1813,1186,1057,544,4599],
        ['ネパール',28,228,545,108,818,1691],
        ['インド',36,401,384,178,355,1251],
        ['香港',3,1235,1689,889,108,3921],
        ['マカオ',2,1417,1216,95,2066,4793],
        ['マレーシア',7,900,1017,473,1535,3925],
        ['インドネシア',19,443,514,539,836,2286],
        ['タイ',33,341,536,349,803,1843],
        ['カンボジア',10,315,677,465,583,2039],
        ['ラオス',13,283,455,512,563,1769],
        ['中国',29,513,583,622,685,2350]
    ];

    // example of custom renderer function
    function change(val){
        return '<span style="color:#000;font-weight:bold;">' + val + '</span>';
    }

    function jpMoney(v){
        v = (Math.round((v-0)*100))/100;
        v = (v == Math.floor(v)) ? v + "" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
        v = String(v);
        var ps = v.split('.');
        var whole = ps[0];
        var sub = ps[1] ? '.'+ ps[1] : '';
        var r = /(\d+)(\d{3})/;
        while (r.test(whole)) {
            whole = whole.replace(r, '$1' + ',' + '$2');
        }
        v = whole + sub;
        if(v.charAt(0) == '-'){
            return '-$' + v.substr(1);
        }
        return v + " 円";
    }

    function date(val){
        return '<span style="color:#000;">' + val + '日</span>';
    }

    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: '国名'},
           {name: '日数', type: 'float'},
           {name: '宿泊費', type: 'float'},
           {name: '食費', type: 'float'},
           {name: '移動費', type: 'float'},
           {name: 'その他', type: 'float'},
           {name: '合計', type: 'float'}
        ]
    });
    store.loadData(myData);

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'country',header: "国名", width: 105, sortable: true, renderer: change, dataIndex: '国名'},
            {header: "日数", width: 38, sortable: true, renderer: date, dataIndex: '日数'},
            {header: "宿泊費", width: 70, sortable: true, renderer: jpMoney, dataIndex: '宿泊費'},
            {header: "食費", width: 70, sortable: true, renderer: jpMoney, dataIndex: '食費'},
            {header: "移動費", width: 70, sortable: true, renderer: jpMoney, dataIndex: '移動費'},
            {header: "その他", width: 70, sortable: true, renderer: jpMoney, dataIndex: 'その他'},
            {header: "合計", width: 72, sortable: true, renderer: jpMoney, dataIndex: '合計'}
        ],
        stripeRows: true,
        height:871,
        width:500,
        title:'各国別費用'
    });

    grid.render('grid-1');

});