Ext js 应用例子

最新推荐文章于 2021-06-18 12:32:46 发布

weixin_30294295

最新推荐文章于 2021-06-18 12:32:46 发布

阅读量55

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/CodingArt/p/5707026.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="Default.css" rel="stylesheet" />

    <link href="../js/ext-4.2.1.883/resources/css/ext-all.css" rel="stylesheet" />

    <script src="../Scripts/jquery-1.11.3.min.js"></script>
    <script src="../js/ext-4.2.1.883/ext-all.js"></script>
    <script src="../js/ext-4.2.1.883/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/json2.js"></script>
    <script src="Default.js"></script>
    <style type="text/css">
        .x-tree-node-text {
            align-content: center;
            line-height: 17px;
        }

        .x-tree-view {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    </style>
</head>
<body>
</body>
</html>

Default.html

var products = [];
var templates = [];
var category = '';
var categoryName = '';
var currentSelectedTid = 0;
var currentQuoteType = "";
var uri = "http://" + window.location.hostname + "/WebApi/api/";
var isadmin = false;

Ext.BLANK_IMAGE_URL = '../Themes/resources/images/default/s.gif';
$(function () { IsAdmin() })
function IsAdmin() {
    $.ajax({
        type: 'get',
        url: 'handler.ashx?param=username',
        async: false,
        success: function (data) {
            isadmin = data == "Y" ? true : false;
        }
    });
}


//產品目錄

var tree_store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true
    },
    autoLoad: false
});

var treePanel = Ext.create('Ext.tree.Panel', {
    id: 'tree-panel',
    title: '部件',
    split: true,
    height: 360,
    minSize: 150,
    border: false,
    rootVisible: false,
    autoScroll: true,
    store: tree_store,
    lines: false,
    listeners: {
        itemclick: function (thisTree, record, item, index, e, options) {
            if (record.get('leaf')) {
                TreeClick(record.raw);
            } else {
                TreeClickTypeId(record.raw.FormTypeId);
            }
        }
    }
});



function TreeClick(row) {
    switch (row.FormTypeId) {
        case 1:
        case 5:
            category = row.CategoryId;
            categoryName = row.Name;

            template_store.load({
                url: uri + 'template/GetListByCategoryId',
                params: {
                    categoryId: row.CategoryId,
                    flag: isadmin
                },
                scope: this,
                callback: function (records, operation, success) {
                    if (records == null) return;
                    for (var i = 0; i < records.length; i++) {
                        templates.push(records[i].data);
                    }

                }
            });
            break;
        case 2:
            category = row.FormNo;
            categoryName = row.Name;
            if (row.FormNo == 'SetupBoxN') {

                template_store.load({
                    url: uri + 'template/GetFoldingBoxTemplateByCategoryId',
                    params: {
                        categoryId: 2045,
                        flag: isadmin
                    },
                    scope: this,
                    callback: function (records, operation, success) {

                        if (records == null) return;
                        for (var i = 0; i < records.length; i++) {
                            templates.push(records[i].data);
                        }

                    }
                });
            }
            else {
                template_store.load({
                    url: uri + 'template/GetListByQuoteType',
                    params: {
                        quoteType: row.FormNo,
                        flag: isadmin
                    },
                    scope: this,
                    callback: function (records, operation, success) {

                        if (records == null) return;

                        for (var i = 0; i < records.length; i++) {
                            templates.push(records[i].data);
                        }
                    }
                });
            }
            break;
        case 6:
        case 10:
        case 11:
        case 16:
            category = row.FormNo;
            categoryName = row.Name;

            template_store.load({
                url: uri + 'template/GetListByQuoteType',
                params: {
                    quoteType: row.FormNo,
                    flag: isadmin
                },
                scope: this,
                callback: function (records, operation, success) {

                    if (records == null) return;

                    for (var i = 0; i < records.length; i++) {
                        templates.push(records[i].data);
                    }

                }
            });
            break;
        default:
            $('#TemplateContainer').html(''); templates = [];

    }
    if (row.id == "0") {
        GetAllTemplate();
    };

}

function TreeClickTypeId(typeId) {
    template_store.load({
        url: uri + 'template/GetTemplateByFormTypeId',
        params: {
            typeId: typeId,
            flag: isadmin
        },
        scope: this,
        callback: function (records, operation, success) {

            if (records == null) return;

            for (var i = 0; i < records.length; i++) {
                templates.push(records[i].data);
            }

        }
    });
}


function LoadTree() {
    var treeMask = new Ext.LoadMask('tree-panel', {
        msg: '正在载入，请稍后...',
        removeMask: true //完成后移除  
    });

    treeMask.show(); //显示  
    tree_store.setProxy({
        type: 'ajax',
        url: uri + "Category/GetExtCategory"
    });
    tree_store.load();
    tree_store.on("load", function (store) {
        var record = treePanel.getStore().getNodeById('0');
        var x = treePanel.getSelectionModel().select(record);
        treePanel.fireEvent('itemclick', treePanel, record);
        treeMask.hide();
    });


}







//模板

var TemplateModel = Ext.define('TemplateModel', {
    extend: 'Ext.data.Model',
    fields: [
    {
        name: 'TemplateId'
    },
    {
        name: 'TemplateName'
    },
    {
        name: 'TemplateDesc'
    },
    {
        name: 'QuoteType'
    },
    {
        name: 'ImgUrl'
    },
    {
        name: 'ApproveState'
    },
    {
        name: 'Isdelete'
    },
    {
        name: 'Visible'
    },
    {
        name: 'IsCustom'
    },
    {
        name: 'CategoryName'
    },
    {
        name: 'Notes'
    },
    {
        name: 'EditBtn'
    }
    ]
});
//模板的HTML
var template_store = Ext.create('Ext.data.Store', {
    model: 'TemplateModel',
    proxy: {
        type: 'ajax',
        reader: {
            type: 'json'
        }
    }
});

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="float:left;padding:15px 15px 0px 15px;">',

'<table cellspacing=0 cellpadding =0 class="noBorderTable" style="width:150px;border-spacing:0;border-collapse:collapse;border:2px solid #333">',

'<tr>',
'<td style="height:25px;color:white;background-color:#333;padding:4px 4px;font-weight:bold;font-size:10pt;text-align:center;vertical-align : middle;">',
'<div style="">{CategoryName}</div>',
'</td>',
'</tr>',

'<tr>',
'<td>',
'<img src="ThumbHandler.ashx?path={ImgUrl}&type=mini" style="width:150px;height:90px;border:none;" />',
'</td>',
'</tr>',

'<tr>',
'<td>',
'<div style="height:60px;overflow:auto;padding:2px;">',
'<span  class="template-name" >[{ApproveState}]{TemplateName},<br/>{TemplateDesc}</span >',
'</div>',
'</td>',
'</tr>',

'</table>',

'<div style="margin-top:5px;text-align:center;">',
'<input type="button" value="添加" style="font-weight:bold;font-size:10pt;" onClick="OnSelectTemplate({TemplateId},\'{QuoteType}\')"/>',
'&nbsp;<input type="button" value="查看" style="font-weight:bold;font-size:10pt;" onClick="OnShowTemplate({TemplateId},\'{QuoteType}\')" />',
//'&nbsp;<input type="button" value="编辑" style="font-weight:bold;font-size:11pt;" onClick="OnEditTemplate({TemplateId},\'{QuoteType}\')" />',
'{EditBtn}',

'</div>',

'</div>',

'</tpl>',
'<div class="x-clear"></div>'
);



//單個模板
var template_view = Ext.create('Ext.view.View', {
    id: 'tv1',
    store: template_store,
    tpl: tpl,
    itemSelector: '',
    emptyText: '無模板'
});

//模板容器
var templatePanel = Ext.create('Ext.panel.Panel', {
    id: 'panel1',
    title: '部件模板',
    layout: 'fit',
    region: 'center',
    border: false, autoScroll: true,
    bodyStyle: 'overflow-x:hidden; overflow-y:scroll',
    items: template_view
});


//取得所有模板
function GetAllTemplate() {

    template_store.load({
        url: uri + 'template/GetAllTemplate',
        params: {
            flag: isadmin
        },
        scope: this,
        callback: function (records, operation, success) {
            if (records == null) return;
            for (var i = 0; i < records.length; i++) {
                templates.push(records[i].data);
            }

        }
    });
}



//添加模板
function OnSelectTemplate(tid, quoteType) {
    currentSelectedTid = tid;
    currentQuoteType = quoteType;
    if (tid == 0) {
        var includeQ = false;
        for (var i = 0; i < products.length; i++) {
            if (products[i].Q == quoteType) {
                includeQ = true;
                break;
            }
        }
        if (!includeQ) {
            products.push({
                ID: GetProductsMaxID() + 1,
                Q: quoteType,
                TID: 0,
                IC: true,
                T: categoryName,
                M: '',
                JC: '',
                OT: ''
            });
        }
    } else {
        if (tid == 491 || tid == 390) {
            Init_491_390_Html(tid);
        }
        else {
            var include = false;
            var template = {
            };
            for (var i = 0; i < templates.length; i++) {
                if (templates[i].TemplateId == tid) {
                    template = templates[i];
                    break;
                }
            }
            products.push({
                ID: GetProductsMaxID() + 1,
                Q: quoteType,
                TID: template.TemplateId,
                IC: template.IsCustom,
                T: template.TemplateName,
                M: '',
                JC: '',
                OT: ''
            });
        }
    }
    SelectedTemplate();
}
//取得已選模板最大ID
function GetProductsMaxID() {
    var maxid = 1;
    for (var i = 0; i < products.length; i++) {
        if (products[i].ID > maxid) {
            maxid = products[i].ID;
        }
    };
    return maxid;
};


// 抽屜盒或天地盒，選擇部件組成的對話框
var boxPanel = Ext.create('Ext.panel.Panel', {
    id: 'boxPanel1',
    layout: 'fit',
    region: 'center',
    border: false,
    autoScroll: true,
    bodyStyle: 'overflow-x:hidden; overflow-y:scroll'
});
var box_window = Ext.create('widget.window', {
    title: '選擇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(按下【ESC鍵】關閉對話框)',
    header: {
        titlePosition: 2,
        titleAlign: 'center'
    },
    closable: true,
    closeAction: 'hide',
    width: 250,
    minWidth: 250,
    height: 250,
    modal: true,
    layout: {
        type: 'border',
        padding: 5
    },
    items: [boxPanel]
});
//模板組成HTML
function Init_491_390_Html(type) {
    var t1 = '';
    var t2 = '';

    if (type == 491) {
        t1 = "外盒";
        t2 = "抽屜";
    } else if (type = 48) {
        t1 = "天盒";
        t2 = "地盒";
    }
    var str = "";
    str += t1 + "<br />";
    str += "<input type='checkbox' id='o1' />" + "有面紙" + "<br />";
    str += "<input type='checkbox' id='o2' />" + "有中層" + "<br />";
    str += "<input type='checkbox' id='o3' />" + "有襯紙" + "<br />";

    str += t2 + "<br />";
    str += "<input type='checkbox' id='i1' />" + "有面紙" + "<input type='checkbox' id='im1' />" + "不同于" + t1 + "<br />";
    str += "<input type='checkbox' id='i2' />" + "有中層" + "<input type='checkbox' id='im2' />" + "不同于" + t1 + "<br />";
    str += "<input type='checkbox' id='i3' />" + "有襯紙" + "<input type='checkbox' id='im3' />" + "不同于" + t1 + "<br />";

    str += "<div>";
    str += '<input id="boxConfirm" type="button" value="確認" />';
    str += '&nbsp;<input id="boxCancel" type="button" value="取消" />';
    str += "</div>";
    box_window.show();
    Ext.getCmp('boxPanel1').body.update(str);
    Init_491_390_Check();
}
//選擇模板組成時的選中事件
function Init_491_390_Check() {
    $('#o1').on('change', function () {
        if ($(this).prop('checked') == true) {
            $('#i1').prop('checked', true)
        }
    });
    $('#o2').on('change', function () {
        if ($(this).prop('checked') == true) {
            $('#i2').prop('checked', true)
        }
    });
    $('#o3').on('change', function () {
        if ($(this).prop('checked') == true) {
            $('#i3').prop('checked', true)
        }
    });

    $('#im1').on('change', function () {
        if ($(this).prop('checked') == true) {
            $('#i1').prop('checked', true)
        }
    });
    $('#im2').on('change', function () {
        if ($(this).prop('checked') == true) {
            $('#i2').prop('checked', true)
        }
    });
    $('#im3').on('change', function () {
        if ($(this).prop('checked') == true) {
            $('#i3').prop('checked', true)
        }
    });

    $('#i1').on('change', function () {
        if ($(this).prop('checked') == false) {
            $('#im1').prop('checked', false)
        }
    });
    $('#i2').on('change', function () {
        if ($(this).prop('checked') == false) {
            $('#im2').prop('checked', false)
        }
    });
    $('#i3').on('change', function () {
        if ($(this).prop('checked') == false) {
            $('#im3').prop('checked', false)
        }
    });

    $('#boxConfirm').on('click', function () {
        var template = [];
        if (currentSelectedTid != 0 && currentQuoteType != '') {
            var result = Init_491_390_Result(currentSelectedTid);
            for (var i = 0; i < templates.length; i++) {
                if (templates[i].TemplateId == currentSelectedTid) {
                    template = templates[i];
                }
            }

            products.push({
                ID: GetProductsMaxID() + 1,
                Q: currentQuoteType,
                TID: template.TemplateId,
                IC: template.IsCustom,
                T: template.TemplateName,
                M: result.m,
                JC: result.jc,
                OT: 'TC'
            });

            SelectedTemplate();
            box_window.hide();
        }
    });
    $('#boxCancel').on('click', function () {
        box_window.hide();
    });
}
//取得模板組成選擇結果
function Init_491_390_Result(tid) {
    var t1 = '';
    var t2 = '';
    if (tid == 491) {
        t1 = 'Outer';
        t2 = 'Drawer';
    } else if (tid = 48) {
        t1 = 'Lid';
        t2 = 'Base';
    }
    var x1 = t1 + ' Cover';
    var x2 = t1 + ' Body';
    var x3 = t1 + ' Liner';

    var y1 = t2 + ' Cover';
    var y2 = t2 + ' Body';
    var y3 = t2 + ' Liner';

    var z1 = 'Cover';
    var z2 = 'Body';
    var z3 = 'Liner';

    var x = $('#o1').prop('checked');
    var y = $('#o2').prop('checked');
    var z = $('#o3').prop('checked');

    var u = $('#i1').prop('checked');
    var v = $('#i2').prop('checked');
    var w = $('#i3').prop('checked');

    var um = $('#im1').prop('checked');
    var vm = $('#im2').prop('checked');
    var wm = $('#im3').prop('checked');


    var c1 = '';
    var b1 = '';
    var l1 = '';

    var c2 = '';
    var b2 = '';
    var l2 = '';


    var s = "PM||NIL|0";


    if (u) {
        if (x) {
            if (um) {
                c1 = x1; c2 = y1;
            } else {
                c1 = z1;
            }
        } else {
            c2 = y1;
        }
    } else {
        if (x) {
            c1 = x1;
        }
    }
    if (v) {
        if (y) {
            if (vm) {
                b1 = x2; b2 = y2;
            } else {
                b1 = z2;
            }
        } else {
            b2 = y2;
        }
    } else {
        if (y) {
            b1 = x2;
        }
    }
    if (w) {
        if (z) {
            if (wm) {
                l1 = x3; l2 = y3;
            } else {
                l1 = z3;
            }
        } else {
            l2 = y3;
        }
    } else {
        if (z) {
            l1 = x3;
        }
    }

    var e1 = ((c1 != '') ? c1 + ',' : '') + ((b1 != '') ? b1 + ',' : '') + l1;
    var e2 = ((c2 != '') ? c2 + ',' : '') + ((b2 != '') ? b2 + ',' : '') + l2;

    var m1 = ((c1 != '') ? s + ',' : '') + ((b1 != '') ? s + ',' : '') + ((l1 != '') ? s : '');
    var m2 = ((c2 != '') ? s + ',' : '') + ((b2 != '') ? s + ',' : '') + ((l2 != '') ? s : '');

    var jc = (e1 != '' ? e1 + ',' : '') + e2;
    var m = (m1 != '' ? m1 + ',' : '') + m2;



    return {
        'jc': jc,
        'm': m
    };
}






//查看模板明細容器
var showPanel = Ext.create('Ext.panel.Panel', {
    id: 'showPanel1',
    layout: 'fit',
    height: 350,
    border: false,
    autoScroll: true,
    bodyStyle: 'overflow-x:hidden; overflow-y:scroll'
});
//查看模板明細對話框
var showTemplate_window = Ext.create('widget.window', {
    title: '模板明細&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(按下【ESC鍵】關閉對話框)',
    closable: true,
    closeAction: 'hide',
    width: 600,
    minWidth: 350,
    height: 350, resizable: false,
    items: [showPanel]
});
//點擊查看模板按鈕的事件
function OnShowTemplate(tid, quoteType) {
    showTemplate_window.show();
    if (tid == 0) {
        var html = '';
        html += '<p>';
        html += quoteType;
        html += '</p>';
        html += '<p>';
        html += categoryName;
        html += '</p>';
        Ext.getCmp('showPanel1').body.update(html);
    }
    else {
        var t = GetTemplateById(tid);
        if (t != null) {
            Ext.getCmp('showPanel1').body.update(TemplateDetailHtml(t));
        }
    }
};
//通過模板ID取得模板對象
function GetTemplateById(tid) {
    for (var i = 0; i < templates.length; i++) {
        if (templates[i].TemplateId == tid) {
            return templates[i];
        }
    }
};


//var showTemplateImgUrlPanel = Ext.create('Ext.panel.Panel', {
//    id: 'panelImage1',
//    title: '模板圖片',
//    layout: 'fit',
//    region: 'center',
//    height: 600,
//    border: false,
//    autoScroll: true,
//    bodyStyle: 'overflow-x:hidden; overflow-y:scroll'
//});


var showTemplateImgUrlWindow = Ext.create('widget.window', {
    title: '模板圖片&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(按下【ESC鍵】關閉對話框)',
    closable: true,
    closeAction: 'hide',
    width: 564,
    height: 360,
    resizable: false,
    modal:true,
    items: {
        id: 'panelImage1',
        height: 360,
        autoScroll: true
    }
});



function ShowBigImage(imgurl) {
    var str = "<img width='550' src='" + imgurl + "'>";

    showTemplateImgUrlWindow.show();
    Ext.getCmp('panelImage1').body.update(str);
}


//查看模板明細HTML
function TemplateDetailHtml(t) {
    var str = '';

    str += '<table>';
    str += '<tr>';
    str += '<td style="vertical-align:top;text-align:left;">';
    str += '點擊圖片看大圖<br/><br/>';
    str += t.ImgUrl == "" ? '<img src="' + "/webquote/Themes/nopic.jpg" : '<a onClick="ShowBigImage(\'' + t.ImgUrl + '\')"><img src="' + "ThumbHandler.ashx?path=" + t.ImgUrl + "&type=big";
    str += '" style=""/></a>';
    str += '</td>';
    str += '<td style="vertical-align:top;text-align:left;padding:10px;width:100%">';

    str += "<textarea  readonly='readonly' style='width:100%;height:40px;border:1px solid #999;overflow:auto;'>";

    str += t.TemplateName;
    if (isadmin) str += t.ApproveState == 'Y' ? '[已批核]' : '[未批核]';
    if (isadmin) str += '[' + t.TemplateId + ']';
    str += "</textarea>";

    if (t.TemplateDesc != null && t.TemplateDesc != "") {
        str += "<textarea  readonly='readonly' style='width:100%;height:40px;border:1px solid #999;overflow:auto;'>";
        str += t.TemplateDesc;
        str += "</textarea>";
    };

    if (t.Notes != null && t.Notes != "") {
        str += "<textarea  readonly='readonly' style='width:100%;height:200px;border:1px solid #999;overflow:auto;'>";
        str += t.Notes;
        str += "</textarea>";
    };

    str += '</td>';
    str += '</tr>';
    str += '</table>';
    return str;
};






//编辑模板

var EditTemplateModel = Ext.define('EditTemplateModel', {
    extend: 'Ext.data.Model',
    fields: [
    {
        name: 'TemplateId', type: 'int'
    },
    {
        name: 'TemplateName'
    },
    {
        name: 'TemplateDesc'
    },
    {
        name: 'Notes'
    }
    ]
});

var editTemplateStore = Ext.create('Ext.data.Store', {
    storeId: 'editTemplateStore',
    model: 'EditTemplateModel',
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: uri + 'template/GetTemplateById',
        reader: {
            type: 'json'
        }
    }
});


function OnEditTemplate(tid, quoteType) {
    editTemplate_window.show();
    var myStore = Ext.getStore('editTemplateStore');
    myStore.load({
        params: {
            id: tid
        },
        callback: function (records, operation, success) {
            var form = editPanel.getForm();
            form.loadRecord(editTemplateStore.last());
        }
    });

}


var editPanel = Ext.create('Ext.form.Panel', {
    frame: true,
    id: 'editPanel1',
    plain: true,
    border: 0, bodyPadding: 5,
    fieldDefaults: {
        labelWidth: 55,
        anchor: '100%'
    },
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'textfield',
        name: 'TemplateId',
        fieldLabel: '模板Id',
        hidden: true
    }, {
        xtype: 'textfield',
        name: 'TemplateName',
        fieldLabel: '模板名称'
    },
    {
        xtype: 'textareafield',
        name: 'TemplateDesc',
        fieldLabel: '模板描述',
        height: 64
    },
    {
        xtype: 'textareafield',
        name: 'Notes',
        fieldLabel: '详细描述',
        height: 170
    }],
    buttons: [{
        xtype: 'button',
        formBind: true,
        text: '保存',
        handler: function () {
            var form = this.up('form').getForm();
            form.submit({
                clientValidation: false,
                url: uri + 'template/Update',
                dataType: "json",
                scope: this,
                //submitEmptyText: false,
                success: function (form, action) {
                    Ext.Msg.alert('消息', '保存成功！可點擊目錄重新加載');
                    editTemplate_window.hide();
                    setTimeout(function () {
                        Ext.Msg.hide()
                    }, 2000);//5后执行关闭窗口函数
                }
,
                failure: function (form, action) {
                    //console.log(action);
                    //Ext.Msg.alert('消息', '保存失敗！'); 
                    switch (action.failureType) {
                        case Ext.form.action.Action.CLIENT_INVALID:
                            Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                            break;
                        case Ext.form.action.Action.CONNECT_FAILURE:
                            Ext.Msg.alert('Failure', 'Ajax communication failed');
                            break;
                        case Ext.form.action.Action.SERVER_INVALID:
                            //Ext.Msg.alert('Failure', action.result.msg); 
                            editTemplate_window.hide();
                            Ext.Msg.alert('消息', '保存成功！可點擊目錄重新加載');
                            setTimeout(function () {
                                Ext.Msg.hide()
                            }, 2000);//5后执行关闭窗口函数

                    }
                }
            });
        }
    }, {
        xtype: 'button',
        formBind: true,
        text: '取消',
        handler: function () {
            editTemplate_window.hide();
        }
    }]
});


var editTemplate_window = Ext.create('Ext.window.Window', {
    title: '编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(按下【ESC鍵】關閉對話框)',
    closable: true,
    closeAction: 'hide',
    width: 600,
    minWidth: 350,
    height: 350,
    resizable: false,
    items: [editPanel],
    //modal: true,
    border: false
});







//已選模板的容器
var selectedTemplatePanel = Ext.create('Ext.panel.Panel', {
    id: 'panel2',
    title: '已選模板',
    layout: 'fit',
    region: 'center',
    height: 600,
    border: false,
    autoScroll: true,
    bodyStyle: 'overflow-x:hidden; overflow-y:scroll'
});
//刪除已選模板
function OnDeleteTemplate(id) {
    var temp = [];

    for (var i = 0; i < products.length; i++) {
        if (products[i].ID != id) {
            temp.push(products[i]);
        }
    }

    products = temp;
    SelectedTemplate();
};
//生成已選模板HTML
function SelectedTemplate() {
    if (products.length == 0) {
        Ext.getCmp('panel2').body.update("");
        return;
    };
    var str = "";
    str += "<table class='selected-list-style'>";
    for (var i = 0; i < products.length; i++) {
        str += "<tr>";
        str += "<td style='width:140px;overflow:hidden;'>";
        str += products[i].T;
        str += "</td>";
        str += '<td><input class="deleteSelectedTemplate" type="button" id="' + products[i].ID + '" style="width:40px;padding:2px;" value="刪除"/>';
        str += "</tr>";
    }
    str += "<tr>";

    str += "<td colspan='2' style='text-align:center;'>";
    str += '<input id="CreateIQ" type="button" value="新建請求單" style="color:black;font-weight:bold;font-size:10pt;" />&nbsp;';
    str += '<input id="ClearSelection"  type="button" value="清空" style="color:black;font-weight:bold;font-size:10pt;" />';
    str += "</td>"

    str += "</tr>";

    str += "</table>";
    Ext.getCmp('panel2').body.update(str);

    $('.deleteSelectedTemplate').click(function () {
        var pid = $(this).attr('id');
        OnDeleteTemplate(pid);
    });

    $('#CreateIQ').click(function () {
        Create();
    });
    $('#ClearSelection').click(function () {
        products = [];
        Ext.getCmp('panel2').body.update("");;
    });
};






//創建IQ單
function Create() {

    var suitInfos = new Array();
    for (var i = 0, len = products.length; i < len; i++) {
        suitInfos = suitInfos.concat(products[i])
    }
    if (suitInfos.length == 0) {
        alert('您至少要選擇一個產品!')
        return false
    } else {
        var j = JSON.stringify(suitInfos);

        //var str = encodeURIComponent(j);
        PostSubmit("/Custom.aspx", j);
    }
};
//用post的方法頁面間傳值，跳轉到指定頁面
function PostSubmit(url, para) {
    var postUrl = url;//提交地址   
    var _para = para;//数据   
    var ExportForm = document.createElement("FORM");
    document.body.appendChild(ExportForm);
    ExportForm.method = "POST";
    var newElement = document.createElement("input");
    newElement.setAttribute("name", "suitinfo");
    newElement.setAttribute("type", "hidden");
    ExportForm.appendChild(newElement);
    newElement.value = _para;
    ExportForm.action = postUrl;
    ExportForm.target = "_blank";
    ExportForm.submit();
    document.body.removeChild(ExportForm);
};

Ext.onReady(function () {


    var viewport = Ext.create('Ext.Viewport', {
        layout: 'border',
        items: [
    {
        id: 'category',
        region: 'west',
        split: true,
        width: 180,
        minWidth: 100,
        maxWidth: 200,
        layout: 'fit',
        margin: '5 0 5 5',
        items: [treePanel]
    },
    {
        region: 'center',
        layout: 'fit',
        margin: '5 5 5 0',
        items: [templatePanel]
    },
    {
        region: 'east',
        width: 210,
        margin: '5 5 5 0',
        layout: 'fit',
        items: [selectedTemplatePanel]
    }
        ]
    });

    LoadTree();

});