Ext method

/*
 *
 */
Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = 'admin/ext/resources/images/default/s.gif';
    /*
     * clear error'Permission denied to access property 'dom' from a non-chrome
     * context' method
     */
    Ext.override(Ext.Element, {
        contains : function() {
            var isXUL = Ext.isGecko ? function(node) {
                return Object.prototype.toString.call(node) == '[object XULElement]';
            }
                    : Ext.emptyFn;
            return function(el) {
                return !this.dom.firstChild || // if this Element has no
                        // children, return false
                        // immediately
                        !el || isXUL(el) ? false : Ext.lib.Dom.isAncestor(
                        this.dom, el.dom ? el.dom : el);
            };
        }()
    });

    /* filed declare */

    var addWindowTitle = '新增用戶等級信息';
    var searchWindowTitle = '查詢用戶等級信息';
    var editWindowTitle = '修改用戶等級信息';
    var store = null;
    var start = 0;
    var limit = 10;
    var pageSize = 10;

    // var url = 'user.do?op=doLoadUserById';
    var url = 'userGrade.do?op=';
    var displayDiv = 'divUserGradeGrid';
    var formPanel = null;
    var searchFormPanel = null;
    var window = null;
    var searchWin = null;
    var primaryKey = 'gradeId';
    var recordMapping = ['gradeId', 'userGrade', 'lowerTotal', 'highTotal',
            'discount', 'remark'];

    var combobox = null;

    /*------------------------------------ declare data store begin ---------------------------------------------*/

    store = new Ext.data.Store({
                autoLoad : {
                    params : {
                        start : start,
                        limit : limit,
                        type : 'load'
                    }
                },
                reader : new Ext.data.JsonReader({
                            totalProperty : 'results',
                            root : 'items',
                            id : primaryKey,
                            fields : recordMapping
                        }),
                proxy : new Ext.data.HttpProxy({
                            /* load news list URL */
                            url : url + 'doLoadListByPaging',
                            method : 'POST'
                        })
            });

    /*------------------------------------ declare data store end ---------------------------------------------*/
    /*------------------------------------ declare window element begin ---------------------------------------------*/

    /* setting toolbar */
    var pageBar = new Ext.PagingToolbar({
                store : store,
                plugins : new Ext.ux.grid.PageSizePlugin(),
                pageSize : pageSize,
                displayInfo : true,
                displayMsg : '第 {0} 條到 {1} 條, 一共 {2} 條',
                emptyMsg : '沒有找到記錄'
            });

    var toolBar = new Ext.Toolbar([{
                text : '新增等級',
                tooltip : '新增等級',
                iconCls : 'add',
                handler : showAddWindow
            }, {
                text : '修改等級',
                tooltip : '修改等級',
                iconCls : 'option',
                handler : showModifyWindow
            }, {
                text : '刪除等級',
                tooltip : '刪除等級',
                iconCls : 'remove',
                handler : showDeleteDialog
            }, '-', {
                text : '刷新',
                iconCls : 'refresh',
                tooltip : '刷新',
                handler : refresh
            }, {
                text : '查詢',
                tooltip : '查詢',
                iconCls : 'search',
                width : 5,
                handler : showSearchWindow
            }]);
    /* declare news grid */
    var sm = new Ext.grid.CheckboxSelectionModel();
    var userGrid = new Ext.grid.GridPanel({
                // title : '會員等級列表',
                applyTo : displayDiv,
                autoHeight : true,
                viewConfig : {
                    autoFill : true
                },
                frame : true,
                tbar : toolBar,
                bbar : pageBar,
                sm : sm,
                store : store,
                columns : [sm, new Ext.grid.RowNumberer({
                                    header : '行號',
                                    width : 40,
                                    dataIndex : 'id',
                                    sortable : true
                                }), {
                            header : '編號',
                            tooltip : '編號',
                            dataIndex : 'gradeId',
                            sortable : true
                        }, {
                            header : '會員等級',
                            dataIndex : 'userGrade',
                            tooltip : '會員等級',
                            sortable : true
                        }, {
                            header : '消費下限',
                            dataIndex : 'lowerTotal',
                            tooltip : '消費下限',
                            sortable : true
                        }, {
                            header : '消費上限',
                            dataIndex : 'highTotal',
                            tooltip : '消費上限',
                            sortable : true
                        }, {
                            header : '折扣',
                            dataIndex : 'discount',
                            tooltip : '折扣',
                            sortable : true
                        }, {
                            header : '備註',
                            tooltip : '備註',
                            dataIndex : 'remark',
                            sortable : true
                        }]
            });

    /* declare FormPanel */
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    formPanel = new Ext.form.FormPanel({
                id : 'formPanel',
                labelSeparator : ':',
                frame : true,
                border : false,
                buttons : [{
                            text : '確認',
                            handler : submitForm
                        }, {
                            text : '關閉',
                            handler : function() {
                                window.hide();
                            }
                        }],
                items : [{
                            xtype : 'numberfield',
                            width : 200,
                            allowBlank : false,
                            blankText : '等級不能為空',
                            name : 'userGrade',
                            minLength : 1,
                            minLengthText : '请您输入最少1个字符',
                            maxLength : 20,
                            maxLengthText : '请您输入最多20个字符',
                            vtype : 'alphanum',
                            fieldLabel : '用戶等級'
                        }, {
                            xtype : 'numberfield',
                            width : 200,
                            allowBlank : false,
                            blankText : '上限不能為空',
                            name : 'highTotal',
                            minLength : 1,
                            minLengthText : '请您输入最少1个字符',
                            maxLength : 20,
                            maxLengthText : '请您输入最多20个字符',
                            // vtype:'alphanum',
                            fieldLabel : '最底消費'
                        }, {
                            xtype : 'numberfield',
                            width : 200,
                            allowBlank : false,
                            blankText : '下限不能為空',
                            name : 'lowerTotal',
                            minLength : 1,
                            minLengthText : '请您输入最少1个字符',
                            maxLength : 20,
                            maxLengthText : '请您输入最多20个字符',
                            vtype : 'alphanum',
                            fieldLabel : '最高消費'
                        }, {
                            xtype : 'numberfield',
                            width : 200,
                            allowBlank : false,
                            blankText : '折扣不能為空',
                            name : 'discount',
                            minLength : 1,
                            minLengthText : '请您输入最少1个字符',
                            // maxLength : 20,
                            // maxLengthText : '请您输入最多20个字符',
                            fieldLabel : '折      扣'
                        }, {
                            xtype : 'textarea',
                            width : 200,
                            allowBlank : true,
                            blankText : '',
                            name : 'remark',
                            fieldLabel : '備      註'
                        }, {
                            xtype : 'hidden',
                            name : 'gradeId'
                        }]
            });
    searchFormPanel = new Ext.form.FormPanel({
                id : 'searchFormPanel',
                labelSeparator : ':',
                frame : true,
                border : false,
                buttons : [{
                            text : '確認',
                            handler : searchSubmitForm
                        }, {
                            text : '關閉',
                            handler : function() {
                                searchWindow.hide();
                            }
                        }],
                items : [{
                    xtype : 'numberfield',
                    width : 200,
                    id : 'userGrade',
                    // allowBlank : false,
                    // blankText : '等級不能為空',
                    name : 'userGrade',
                    // minLength : 1,
                    // minLengthText : '请您输入最少1个字符',
                    // maxLength : 20,
                    // maxLengthText : '请您输入最多20个字符',
                    // vtype : 'alphanum',
                    fieldLabel : '用戶等級'
                        // }, {
                        // xtype : 'numberfield',
                        // width : 200,
                        // // allowBlank : false,
                        // // blankText : '上限不能為空',
                        // name : 'highTotal',
                        // // minLength : 1,
                        // // minLengthText : '请您输入最少1个字符',
                        // // maxLength : 20,
                        // // maxLengthText : '请您输入最多20个字符',
                        // // vtype:'alphanum',
                        // fieldLabel : '最底消費'
                        // }, {
                        // xtype : 'numberfield',
                        // width : 200,
                        // // allowBlank : false,
                        // // blankText : '下限不能為空',
                        // name : 'lowerTotal',
                        // // minLength : 1,
                        // // minLengthText : '请您输入最少1个字符',
                        // // maxLength : 20,
                        // // maxLengthText : '请您输入最多20个字符',
                        // // vtype : 'alphanum',
                        // fieldLabel : '最高消費'
                    }, {
                    xtype : 'numberfield',
                    id : 'discount',
                    name : 'discount',
                    width : 200,
                    // allowBlank : false,
                    // blankText : '折扣不能為空',
                    // minLength : 1,
                    // minLengthText : '请您输入最少1个字符',
                    // maxLength : 20,
                    // maxLengthText : '请您输入最多20个字符',
                    fieldLabel : '折      扣'
                }, {
                    xtype : 'textarea',
                    id : 'remark',
                    name : 'remark',
                    width : 200,
                    allowBlank : true,
                    blankText : '',
                    fieldLabel : '備      註'
                }]
            });

    /* declare windows */
    window = new Ext.Window({
                layout : 'fit',
                width : 380,
                closeAction : 'hide',
                height : 280,
                resizable : false,
                shadow : true,
                modal : true,
                closable : true,
                bodyStyle : 'padding:5 5 5 5',
                items : [formPanel],
                animCollapse : true
            });
    /* declare windows */
    searchWindow = new Ext.Window({
                layout : 'fit',
                width : 380,
                closeAction : 'hide',
                height : 220,
                resizable : false,
                shadow : true,
                // modal : true,
                closable : true,
                bodyStyle : 'padding:5 5 5 5',
                items : [searchFormPanel],
                animCollapse : true
            });

    /*------------------------------------ declare window element end ---------------------------------------------*/

    /*------------------------------------ declare function begin ---------------------------------------------*/
    /* prosess function */

    function showSearchWindow() {
        searchWindow.getComponent('searchFormPanel').form.reset();
        searchWindow.setTitle(searchWindowTitle);
        searchWindow.show();
    }

    function refresh() {
        store.removeAll();
        store.load({
                    params : {
                        start : start,
                        limit : limit,
                        type : 'load'
                    }
                });
    }

    function showAddWindow() {
        /* use FormPanel.reset() */
        window.getComponent('formPanel').form.reset();
        window.getComponent('formPanel').isAdd = true;
        window.setTitle(addWindowTitle);
        window.show();
    }
    function getSelectList() {
        var list = [];
        userGrid.getSelectionModel().each(function(record) {
                    list.push(record.get(primaryKey));
                });
        if (list.length == 0) {
            Ext.Msg.alert('提示', '請選擇一行需要操作的數據');
        } else {
            return list;
        }
    }

    function loadForm(itemId) {
        window.getComponent('formPanel').form.load({
                    waitTitle : '提示',
                    waitMsg : '數據載入中........',
                    url : url + 'doLoadItemById',
                    params : {
                        itemId : itemId
                    },
                    method : 'POST',
                    success : function(form, action) {
                        Ext.Msg.alert('提示', '載入成功!');
                    },
                    failure : function(form, action) {
                        Ext.Msg.alert('提示', '載入失敗!');
                    }
                });
    }

    function showModifyWindow() {
        var itemList = getSelectList();
        var size = 0;
        if (itemList) {
            size = itemList.length;
        }
        // alert(size);
        if (size > 1) {
            Ext.Msg.alert('提示', '一次只能修改一條數據');
        } else if (size == 1) {
            window.getComponent('formPanel').form.reset();
            window.getComponent('formPanel').isAdd = false;
            window.setTitle(editWindowTitle);
            var itemId = itemList[0];
            window.show();
            loadForm(itemId);
        }
    }

    function showDeleteDialog() {
        var itemIDList = getSelectList();
        var size = 0;
        if (itemIDList) {
            size = itemIDList.length;
        }
        if (size == 0) {
            return;
        }
        Ext.Msg.confirm('提示', '確定要刪除所選的記錄嗎？', function(id) {
                    if (id == 'yes') {
                        deleteItemList(itemIDList);
                    }
                })
    }

    function deleteItemList(itemIDList) {
        var itemIDListString = itemIDList.join('-');
        var msgTip = Ext.Msg.show({
                    title : '提示',
                    width : 250,
                    msg : '正在刪除中.....'
                });
        Ext.Ajax.request({
                    url : url + 'doDeleteItemById',
                    params : {
                        itemIDListString : itemIDListString
                    },
                    method : 'POST',
                    success : function(response, options) {
                        msgTip.hide();
                        var result = Ext.util.JSON
                                .decode(response.responseText);
                        if (result.success) {
                            for (var i = 0; i < itemIDList.length; i++) {
                                var index = store.find(primaryKey,
                                        itemIDList[i]);
                                if (index != -1) {
                                    var record = store.getAt(index);
                                    store.remove(record);
                                }
                            }
                            Ext.Msg.alert('提示', '刪除操作成功!');
                        } else {
                            Ext.Msg.alert('提示', '刪除操作失敗!');
                        }
                    },
                    failure : function(response, options) {
                        msgTip.hide();
                        Ext.Msg.alert('提示', '刪除操作失敗!');
                    }
                })
    }

    /*------------------------------------- add and update process function begin ---------------------------------*/
    function submitForm() {
        if (window.getComponent('formPanel').form.isValid()) {
            Ext.MessageBox.confirm('提示', '確定要提交嗎？', doSubmitForm);
        }
    }
    function doSubmitForm(id) {
        if (id == 'yes') {
            // confirm submit
            if (window.getComponent('formPanel').isAdd) {
                // add user
                window.getComponent('formPanel').form.submit({
                            clientValidation : true,
                            waitMsg : '正在提交數據.....',
                            waitTitle : '提示',
                            url : url + 'doAddItem',
                            method : 'POST',
                            success : function(form, action) {
                                window.hide();
                                updateUser(action.result.pKey);
                                Ext.Msg.alert('提示', '新增數據成功!');
                            },
                            failure : function(form, action) {
                                Ext.Msg.alert('提示', '新增數據失敗!'
                                                + action.result.message);
                            }
                        });
            } else {
                // update user
                window.getComponent('formPanel').form.submit({
                            clientValidation : true,
                            waitMsg : '正在提交數據.....',
                            waitTitle : '提示',
                            url : url + 'doUpdateItem',
                            method : 'POST',
                            success : function(form, action) {
                                window.hide();
                                updateUser(action.result.pKey);
                                Ext.Msg.alert('提示', '修改數據成功!');
                            },
                            failure : function(form, action) {
                                Ext.Msg.alert('提示', '修改數據失敗!');
                            }
                        });
            }
        } else {
            // cancel submit
            return;
        }
    }

    /*------------------------------------- add and update process function end ---------------------------------*/
    /*------------------------------------- search process function begin ---------------------------------*/
    function searchSubmitForm() {
        Ext.MessageBox.confirm('提示', '確定要提交嗎？', doSearchSubmitForm);
    }
    function doSearchSubmitForm(id) {
        if (id == 'yes') {
            // saerch form submit
            var userGrade = Ext.getCmp('userGrade').getValue();
            var discount = Ext.getCmp('discount').getValue();
            var remark = Ext.getCmp('remark').getValue();
            alert(userGrade + " - " + discount + " - " + remark);
            store.load({
                        params : {
                            start : start,
                            limit : limit,
                            type : 'search',
                            userGrade : userGrade,
                            discount : discount,
                            remark : remark
                        }
                    });
        }
    }

    /*------------------------------------- search process function end ---------------------------------*/

    function updateUser(pKey) {
        var fields = getFormFieldsObj(pKey);
        /* userId 是變化的 */
        var index = store.find(primaryKey, fields.gradeId)
        if (index != -1) {
            var item = store.getAt(index);
            for (var filedName in fields) {
                item.set(filedName, fields[filedName]);
            }
            store.commitChanges();
        } else {
            var recordTemp = new Ext.data.Record(fields);
            store.add(recordTemp);
        }
    }

    /* get form data */
    function getFormFieldsObj(pKey) {
        var fields = window.getComponent('formPanel').items;
        var obj = {};
        for (var i = 0; i < fields.length; i++) {
            var item = fields.itemAt(i);
            var value = item.getValue();
            if (item.getXType() == 'combo') {
                var index = item.store.find('id', value);
                if (index != -1) {
                    var selItem = item.store.getAt(index);
                }
                value = selItem.get('title');
            }
            obj[item.name] = value;
        }
        if (Ext.isEmpty(obj[primaryKey])) {
            obj[primaryKey] = pKey;
        }
        return obj;
    }

        /*------------------------------------ declare function end ---------------------------------------------*/

});