var grid;
var record;
var store;
Ext.onReady(function () {
    //后台返回的数据格式是 {total:总页数值,rows:[{},{}]}
    store = new Ext.data.JsonStore({
        url: 'ExtDataModifyShipAddressList.aspx?p=' + Math.random(),
        root: 'rows',
        totalProperty: 'total',
        fields: [
            { name: 'Id' },
            { name: 'Sid' },
            { name: 'Status' },
            { name: 'CustomerID' },
            { name: 'Description' },
            { name: 'ShipAddress' },
            { name: 'StateName' },
            { name: 'CityName' },
            { name: 'ZipCode' },
            { name: 'ContactPerson' },
            { name: 'ContactTel' },
            { name: 'ShipVia' },
            { name: 'Country' },
            { name: 'StId' },
            { name: 'Default'}],
        method: 'post'
    });

    //加载数据
    store.load({
        params: {
            start: 0,
            limit: 20
        }
    }); 

    grid = new Ext.grid.GridPanel({
        frame: true,
        title: 'New Customer Application List',
        stripeRows: true, //斑马线
        store: store,
        applyTo: 'grid', //指定显示数据的div
        trackMouseOver: true,
        height: 550,
        width: window.screen.width - 17, //屏幕分辨率的宽
        loadMask: { msg: 'loading……' },

        columns: [
        new Ext.grid.RowNumberer(), //行号
        {header: '<font size=2>Id</font>', dataIndex: 'Id', sortable: true },
        { header: '<font size=2>Sid</font>', dataIndex: 'Sid', sortable: true },
        { header: '<font size=2>Status</font>', dataIndex: 'Status', sortable: true },
        { header: '<font size=2>CustomerID</font>', dataIndex: 'CustomerID', sortable: true },
        { header: '<font size=2>Description</font>', dataIndex: 'Description', sortable: true },
        { header: '<font size=2>ShipAddress</font>', dataIndex: 'ShipAddress', sortable: true },
        { header: '<font size=2>StateName</font>', dataIndex: 'StateName', sortable: true },
        { header: '<font size=2>CityName</font>', dataIndex: 'CityName', sortable: true },
        { header: '<font size=2>ZipCode</font>', dataIndex: 'ZipCode', sortable: true },
        { header: '<font size=2>ContactPerson</font>', dataIndex: 'ContactPerson', sortable: true },
        { header: '<font size=2>ContactTel</font>', dataIndex: 'ContactTel', sortable: true },
        { header: '<font size=2>ShipVia</font>', dataIndex: 'ShipVia', sortable: true },
        { header: '<font size=2>Country</font>', dataIndex: 'Country', sortable: true },
        { header: '<font size=2>StId</font>', dataIndex: 'StId', sortable: true}],
        //分页
        bbar: new Ext.PagingToolbar({
            pageSize: 20,
            store: store,
            displayInfo: true, //显示分页
            emptyMsg: "NO DATA"
        })
    })

    //底下容器
    var bookTplMarkup = [
        'Id: <br/>{Id}<br/><br/>',
        "<input type='button' value='Del' onclick=Del({Id})><br/>"
    ];
    var bookTpl = new Ext.Template(bookTplMarkup);

    var ct = new Ext.Panel({
        renderTo: 'grid', 
        frame: true,
        title: 'Customer Detailed Info',
        loadMask: { msg: 'loading……' },
        width: window.screen.width - 17,
        height: 500,
        layout: 'border',
        items: [
            grid,
            {
                id: 'detailPanel',
                region: 'center',
                bodyStyle: {
                    background: '#ffffff',
                    padding: '7px'
                },
                html: 'Please select a row to see additional details.'