Ext3.4實現增刪查改（form版）

var TaskPolicyStore = new Ext.data.JsonStore( {
    autoLoad : false,
    url : 'PolicyServlet?method=findAllPolicy',
    storeId : 'policy-store',
    root : 'msg',
    fields : [ {
        name : 'id',
        mapping : 'id'
    }, {
        name : 'policyName',
        mapping : 'policyName'
    }, {
        name : 'setUpMan',
        mapping : 'setUpMan'
    }, {
        name : 'taskCheck',
        mapping : 'taskCheck'
    }, {
        name : 'taskDetail',
        mapping : 'taskDetail'
    } ]
});

TaskPolicyUi = Ext
        .extend(
                Ext.Panel,
                {
                    title : 'Policy Task',
                    id : 'taskPolicyUi',
                    width : 500,
                    layout : 'border',
                    border : false,
                    closable : true,
                    initComponent : function() {
                        this.items = [ {
                            xtype : 'panel',
                            title : '',
                            region : 'center',
                            autoScroll : true,
                            closable : true,
                            layout : 'fit',
                            items : [ {
                                xtype : 'grid',
                                id : 'buildGrid',
                                border : false,
                                columnLines : true,
                                autoHeight : true, // 使用固定高度
                                autoScroll : true, // 自動顯示滾動條
                                autoWidth : true,
                                loadMask: true,
                                store : TaskPolicyStore,
                                viewConfig : {
                                    columnsText : '顯示的列',
                                    sortAscText : '升序',
                                    sortDescText : '降序',
                                    forceFit : true,
                                    getRowClass : function(record, rowIndex, p,ds) {
                                        var cls = 'white-row';
                                        if (rowIndex % 2 == 1) {
                                            cls = 'gray-row';
                                        }
                                        return cls;
                                    }
                                },
                                tbar : [{text : '添 加',xtype : 'button',icon : 'icons/add.png',
                                            handler : function() {
                                                var win = Ext.getCmp('fitWin');
                                                // 防止重復實例化
                                                if (Ext.isEmpty(win)) {
                                                    win = new Win();
                                                }
                                                var policyForm = Ext.getCmp('policyForm');
                                                policyForm.isAdd=true;
                                                
                                                win.setTitle("新增策略信息");
                                                win.show();
                                            }
                                        },
                                        '-',
                                        {text : '刪 除',icon : 'icons/delete.png',xtype : 'button',ref: '../removeButton',disabled: true,
                                            handler : function() {
                                            
                                            var grid = Ext.getCmp('buildGrid');
                                            var sm = grid.getSelectionModel();
                                            var store = grid.getStore();
                                            
                                            if(sm.getCount()==1){
                                                Ext.Msg.show( {
                                                    title : '提示',
                                                    msg : "確定要刪除選擇的數據?"+ getSelectionPolicyRecord(),
                                                    buttons : Ext.Msg.YESNO,
                                                    fn : function(btnId) {
                                                    var record = sm.getSelected();
                                                    
                                                        if (btnId == "yes") {
                                                            store.remove(record);
                                                            // 刪除記錄
                                                            deleteHandler(record);
                                                            // 刷新界面
                                                            grid.getView().refresh(false);
                                                        }
                                                    },
                                                    animEl : 'elId',
                                                    icon : Ext.MessageBox.QUESTION,
                                                    maxWidth : 900
                                                });
                                            }else{
                                                var records = sm.getSelections();
                                                
                                                Ext.Msg.show( {
                                                    title : '提示',
                                                    msg : "確定要刪除選擇的多項數據?",
                                                    buttons : Ext.Msg.YESNO,
                                                    fn : function(btnId) {
                                                        if (btnId == "yes") {
                                                            for(i=0;i<records.length;i++){
                                                                var record=records[i];
                                                                store.remove(record);
                                                                // 刪除記錄
                                                                deleteHandler(record);
                                                            }
                                                            // 刷新界面
                                                            grid.getView().refresh(false);
                                                        }
                                                    },
                                                    animEl : 'elId',
                                                    icon : Ext.MessageBox.QUESTION,
                                                    maxWidth : 900
                                                });
                                            }
                                            }
                                        },
                                        '-',
                                        {text : '修改',icon : 'icons/refresh.png',xtype : 'button',handler : loadPolicyForm}
                                        ],
                                        sm:sm,
                                columns : [new Ext.grid.RowNumberer(),sm,
                                           {hidden: true,dataIndex : 'id'},
                                           {xtype : 'gridcolumn',header : '策略名稱',dataIndex : 'policyName',sortable : true,width : 60},
                                           {xtype : 'gridcolumn',dataIndex : 'setUpMan',header : '創建人',sortable : true,width : 60},
                                           {xtype : 'numbercolumn',header : '檢查任務',dataIndex : 'taskCheck',format : 0,sortable : true,width : 40},
                                           {xtype : 'gridcolumn',header : '任務詳情',dataIndex : 'taskDetail',sortable : true,width : 80} ]
                            } ]
                        } ];
                        TaskPolicyUi.superclass.initComponent.call(this);
                    }
                });

sm=new Ext.grid.CheckboxSelectionModel({
    listeners: {
    selectionchange: function(sm) {
    var gridRemoveButton=Ext.getCmp('buildGrid');
        if (sm.getCount()) {
            gridRemoveButton.removeButton.enable();
        } else {
            gridRemoveButton.removeButton.disable();
        }
    }
}})

function loadPolicyForm(){
    var sm =Ext.getCmp('buildGrid').getSelectionModel();
    var records = sm.getSelections();
    var num=records.length;
    if(num>1){
        Ext.MessageBox.alert("提示","每次只能修改一條策略信息。");
    }else if(num == 1){
        var win = Ext.getCmp('fitWin');
        // 防止重復實例化
        if (Ext.isEmpty(win)) {
            win = new Win();
        }
        
        var policyForm = Ext.getCmp('policyForm');
        policyForm.form.reset();
        policyForm.isAdd = false;
        win.setTitle("修改策略信息");
        win.show();
        
        var record = sm.getSelected();
        
        var policyId = record.get('id');
        
        var conn = new Ext.data.Connection({
            method: 'POST',
            url: 'PolicyServlet?method=getPolicyById',
            extraParams : {'id':policyId}
        });
        Ext.MessageBox.show({
            msg: '正在加載數據, 請稍后...',
            progressText: '提示...',
            width: 300,
            wait: true,
            waitConfig: {interval: 100}
        });
        conn.request({
            success: function(response) {
                Ext.MessageBox.hide();
                var p = Ext.decode(response.responseText);   
                
                // {"id":49,"policyName":"1","setUpMan":"1","taskCheck":1,"taskDetail":"111"}
                var grid = Ext.getCmp('buildGrid');
                var store = grid.getStore();
                var Policy = store.recordType;
                var p1 = new Policy({
                    id : p.msg.id,
                    policyName :p.msg.policyName,
                    setUpMan : p.msg.setUpMan,
                    taskCheck : p.msg.taskCheck,
                    taskDetail : p.msg.taskDetail
                });
                policyForm.getForm().loadRecord(p1);
            },
            failure: function(response) {
                Ext.MessageBox.hide();
                policyForm.destroy();
                Ext.Msg.show({title: '錯誤', msg: response.statusText, buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR});
                return;
            }
        });
    }
}

var getSelectionPolicyRecord = function() {
    var grid = Ext.getCmp('buildGrid');
    var sm = grid.getSelectionModel();
    var store = grid.getStore();
    var record = sm.getSelected();
    
    var policyName = record.get('policyName');
    var setUpMan = record.get('setUpMan');
    var taskCheck = record.get('taskCheck');
    var taskDetail = record.get('taskDetail');
    var itemMsg = String.format("【策略名稱:'{0}', 策略創建人:'{1}', 檢查任務數量:'{2}', 任務詳情:'{3}'】", policyName, setUpMan, taskCheck, taskDetail);
    return itemMsg;
}

var deleteHandler=function(record) {
    var id = record.get('id');
    // 發送請求
    var params = {
        "id" : id
    };
    var conn = new Ext.data.Connection({
        method: 'POST',
        url: 'PolicyServlet?method=delPolicy',
        extraParams: params
    });
    Ext.MessageBox.show({
        msg: '正在刪除策略管理記錄, 請稍后...',
        progressText: '正在刪除...',
        width: 300,
        wait: true,
        waitConfig: {interval: 100}
    });
    conn.request({
        success: function(response) {
            Ext.MessageBox.hide();
            var responseJson = JSON.parse(response.responseText);
            if (Ext.isEmpty(responseJson.errors)) {
                store.commitChanges();
            }
            else {
                Ext.Msg.show({title: '錯誤', msg: responseJson.errors, buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR});
            }
        },
        failure: function(response) {
            Ext.MessageBox.hide();
            Ext.Msg.show({title: '錯誤', msg: response.statusText, buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR});
            return;
        }
    });
    
    // 排序並刷新界面
    var grid = Ext.getCmp('buildGrid');
    var store = grid.getStore();
    store.sort('policyName', "ASC");
    grid.getView().refresh(false);
}


PolicyForm = Ext.extend(Ext.form.FormPanel, {
    id : 'policyForm',
    xtype : "form",
    fieldDefaults : {// 統一設置表單字段默認屬性
        labelSeparator : '：',// 分隔符
        labelWidth : 80,// 標簽寬度
        msgTarget : 'side',
        width : 300
    },
    bodyPadding : 5,
    frame : true,
    initComponent : function() {
        this.items = [ {
            xtype : 'textfield',
            allowBlank : false,
            blankText : '策略名稱不能為空',
            name : 'policyName',
            width : 220,
            fieldLabel : '策略名稱'
        }, {
            xtype : 'textfield',
            allowBlank : false,
            blankText : '創建人不能為空',
            name : 'setUpMan',
            width : 220,
            fieldLabel : '創建人'
        }, {
            xtype : 'numberfield',
            blankText : '檢查任務不能為空',
            name : 'taskCheck',
            width : 220,
            fieldLabel : '檢查任務'
        }, {
            xtype : 'textarea',
            width : 220,
            height:120,
            name : 'taskDetail',
            fieldLabel : '任務詳情'
        }, {
            xtype : 'hidden',
            name : 'id'
        } ];
        this.buttons = [ {
            text : '提交',
            type : "submit",
            handler : function() {
                // 新增策略
                var policyForm = Ext.getCmp('policyForm');

                if(policyForm.isAdd){
                    policyForm.form.submit( {
                        clientValidation : true,// 進行客戶端驗證
                        waitMsg : '正在提交數據請稍后',// 提示信息
                        waitTitle : '提示',// 標題
                        url : 'PolicyServlet?method=addPolicy',// 請求的url地址
                        method : 'POST',// 請求方式
                        success : function(form, action) {// 加載成功的處理函數
                            var win = Ext.getCmp('fitWin');
                            win.hide();
                            var flag=action.result.msg;
                            
                            if (flag=='success') {
                                loadPolicyGridPanel();
                                var grid = Ext.getCmp('buildGrid');
                                var store = grid.getStore();
                                store.commitChanges();
                                Ext.Msg.alert('提示', '新增策略成功');
                            }
                            else {
                                Ext.Msg.show({title: '錯誤', msg: '添加失敗', buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR});
                            }
                            
                            win.destroy();
                        },
                        failure : function(form, action) {// 加載失敗的處理函數
                            Ext.Msg.alert('提示', '新增策略失敗');
                        }
                    });
                }else{
                    //處理修改
                    policyForm.form.submit( {
                        clientValidation : true,// 進行客戶端驗證
                        waitMsg : '正在提交數據請稍后',// 提示信息
                        waitTitle : '提示',// 標題
                        url : 'PolicyServlet?method=modifyPolicy',// 請求的url地址
                        method : 'POST',// 請求方式
                        success : function(form, action) {// 加載成功的處理函數
                            var win = Ext.getCmp('fitWin');
                            win.hide();
                            var flag=action.result.msg;
                            
                            if (flag=='success') {
                                loadPolicyGridPanel();
                                var grid = Ext.getCmp('buildGrid');
                                var store = grid.getStore();
                                store.commitChanges();
                                Ext.Msg.alert('提示', '新增策略成功');
                            }
                            else {
                                Ext.Msg.show({title: '錯誤', msg: '添加失敗', buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR});
                            }
                            
                            win.destroy();
                        },
                        failure : function(form, action) {// 加載失敗的處理函數
                            Ext.Msg.alert('提示', '新增策略失敗');
                        }
                    });
                }
            }
        }, {
            text : '關閉',
            handler : function() {
                var win = Ext.getCmp('fitWin');

                win.destroy();
            }
        }, '->' ];
        PolicyForm.superclass.initComponent.call(this);
    }
});

loadPolicyGridPanel = function(){
    var grid = Ext.getCmp('buildGrid');
    var store = grid.getStore();
    
    var policyForm = Ext.getCmp('policyForm');
    var values = policyForm.form.getValues();
    
    var index = store.find('id',values['id']);
    if(index != -1){
        var item = store.getAt(index);
        for(var fieldName in values){
            item.set(fieldName,values[fieldName]);
        }
        item.commit();
    }else{
        var Policy = store.recordType;
        var p = new Policy({
            id : values['id'],
            policyName : values['policyName'],
            setUpMan : values['setUpMan'],
            taskCheck : values['taskCheck'],
            taskDetail : values['taskDetail']
        });
        store.insert(0, p);
    }
    
    store.sort('policyName', "ASC");
    grid.getView().refresh(false);
};

// 創建彈出窗口
Win = Ext.extend(Ext.Window, {
    id : 'fitWin',
    xtype : "window",
    layout : 'fit',
    width : 380,
    closeAction : 'hide',
    height : 280,
    resizable : false,
    shadow : true,
    modal : true,
    closable : true,
    initComponent : function() {
        this.items = new PolicyForm();
        Win.superclass.initComponent.call(this);
    }
});


TaskPolicy = Ext.extend(TaskPolicyUi, {
    id : 'taskPolicy',
    initComponent : function() {
        TaskPolicy.superclass.initComponent.call(this);
    }
});
Ext.reg('TaskPolicy', TaskPolicy);