user-20070921.js

anewssystem新闻发布系统集成使用了spring hibernate freemarker EXTJS等开源框架 可以作为学习参考

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [e-mail]
 *
 * http://www.extjs.com/license
 *
 * @author Lingo
 * @since 2007-09-21
 * http://code.google.com/p/anewssystem/
 */


UserGridPanel = function(container, config) {
    UserGridPanel.superclass.constructor.call(this, container, config);
    this.addMetaData = [
        {id : 'dept',     qtip : '部门', vType : 'treeField', url : "../dept/getChildren.htm", mapping : "dept.name"},
        {id : 'username', qtip : "帐号", vType : "chn",       allowBlank : false},
        {id : 'password', qtip : '密码', vType : "passwordmeta",  allowBlank : false},
        {id : 'confirmpassword', qtip : '确认密码', vType : "password",  allowBlank : false},
        {id : 'truename', qtip : '姓名', vType : "chn"},
        {id : 'sex',      qtip : '性别', vType : "radio", values : [{id : '0', name : '男'}, {id : '1', name : '女'}], defValue : '0', renderer : Ext.lingo.FormUtils.renderSex},
        {id : 'birthday', qtip : '生日', vType : "date"},
        {id : 'tel',      qtip : '电话', vType : "alphanum"},
        {id : 'mobile',   qtip : '手机', vType : "alphanum"},
        {id : 'email',    qtip : '邮箱', vType : "email"},
        {id : 'duty',     qtip : '职务', vType : "chn", allowBlank : true},
        {id : 'descn',    qtip : "备注", vType : "chn", allowBlank : true}
    ];
    this.editMetaData = [
        {id : 'id2',       qtip : "ID",   vType : "integer",  defValue : -1, mapping : "id"},
        {id : 'dept2',     qtip : '部门', vType : 'treeField', url : "../dept/getChildren.htm", mapping : "dept.name"},
        {id : 'username2', qtip : "帐号", vType : "chn",       allowBlank : false, mapping : "username"},
        {id : 'oldpassword2', qtip : '密码', vType : "password",  allowBlank : true, mapping : "oldpassword2"},
        {id : 'password2', qtip : '密码', vType : "passwordmeta",  allowBlank : true, mapping : "password2"},
        {id : 'confirmpassword2', qtip : '确认密码', vType : "password",  allowBlank : true, mapping : "confirmpassword2"},
        {id : 'truename2', qtip : '姓名', vType : "chn", mapping : "truename"},
        {id : 'sex2',      qtip : '性别', vType : "radio", values : [{id : '0', name : '男'}, {id : '1', name : '女'}], defValue : '0', renderer : Ext.lingo.FormUtils.renderSex, mapping : "sex"},
        {id : 'birthday2', qtip : '生日', vType : "date", mapping : "birthday"},
        {id : 'tel2',      qtip : '电话', vType : "alphanum", mapping : "tel"},
        {id : 'mobile2',   qtip : '手机', vType : "alphanum", mapping : "mobile"},
        {id : 'email2',    qtip : '邮箱', vType : "email", mapping : "email"},
        {id : 'duty2',     qtip : '职务', vType : "chn", mapping : "duty", allowBlank : true},
        {id : 'descn2',    qtip : "备注", vType : "chn", mapping : "descn", allowBlank : true}
    ];
    this.headers = ['id','dept','username','password','truename','sex','birthday','tel','mobile','email','duty','descn'];
};

Ext.extend(UserGridPanel, Ext.lingo.JsonGrid, {

    // 添加
    add : function() {
        this.createAddDialog();
        this.columns = this.addcolumns;
        this.dialog = this.adddialog;
        this.metaData = this.addMetaData;
        UserGridPanel.superclass.add.call(this);
    }

    // 修改
    , edit : function() {
        this.createEditDialog();
        this.columns = this.editcolumns;
        this.dialog = this.editdialog;
        this.metaData = this.editMetaData;
        UserGridPanel.superclass.edit.call(this);
    }

    // 创建弹出式对话框
    , createAddDialog : function() {
        if (this.adddialog) {
            return;
        }
        ///////////////////////////////////////////////////
        // add
        //
        this.adddialog = Ext.lingo.FormUtils.createTabedDialog('add-dialog', ['添加信息','帮助']);

        this.addyesBtn = this.adddialog.addButton("确定", function() {
            if (this.addcolumns.password.getValue() != this.addcolumns.confirmpassword.getValue()) {
                Ext.suggest.msg("错误", "两次输入的密码不一样");
                this.addcolumns.confirmpassword.focus();
                return;
            }
            var item = Ext.lingo.FormUtils.serialFields(this.addcolumns);
            if (!item) {
                return;
            }

            this.adddialog.el.mask('提交数据，请稍候...', 'x-mask-loading');
            var addhide = function(data) {
                var json;
                try {
                    json = Ext.decode(data.responseText);
                } catch (e) {
                    json = {success:false,info:"服务器错误，请刷新页面。"};
                }
                if (json.success) {
                    this.adddialog.el.unmask();
                    this.adddialog.hide();
                    this.refresh.apply(this);
                } else {
                    Ext.MessageBox.alert("错误", json.info);
                    this.adddialog.el.unmask();
                }
            }.createDelegate(this);
            Ext.lib.Ajax.request(
                'POST',
                this.urlSave,
                {success:addhide,failure:addhide},
                'data=' + encodeURIComponent(Ext.encode(item))
            );
        }.createDelegate(this), this.adddialog);

        // 设置两个tab
        var addtabs = this.adddialog.getTabs();
        addtabs.getTab(0).on("activate", function() {
            this.addyesBtn.show();
        }, this, true);
        addtabs.getTab(1).on("activate", function(){
            this.addyesBtn.hide();
        }, this, true);

        addtabs.getTab(0).setContent(Ext.get("add-content").dom.innerHTML);
        document.body.removeChild(document.getElementById("add-content"));

        this.addcolumns = Ext.lingo.FormUtils.createAll(this.addMetaData);
        this.addnoBtn = this.adddialog.addButton("取消", this.adddialog.hide, this.adddialog);

        // 修改帐号后，监听blur事件，与后台交互，检测帐号是否已被其他人注册
        this.addcolumns.username.on("blur", function() {
            var isUsernameValid = function(data) {
                var json = Ext.decode(data.responseText);
                try {
                    json = Ext.decode(data.responseText);
                } catch (e) {
                    json = {success:false};
                }
                if (json.success) {
                    document.getElementById("isUsernameValid").innerHTML = "<span style='font-weight:bold;color:green'>帐号可用。</span>";
                } else {
                    document.getElementById("isUsernameValid").innerHTML = "<span style='font-weight:bold;color:red'>帐号已被注册，请更换。</span>";
                    Ext.getCmp("username").focus();
                }
            };
            Ext.lib.Ajax.request(
                'POST',
                "checkUsername.htm",
                {success:isUsernameValid,failure:isUsernameValid},
                'username=' + this.addcolumns.username.getValue()
            );
        }.createDelegate(this));
    }

    , createEditDialog : function() {
        if (this.editdialog) {
            return;
        }
        ///////////////////////////////////////////////////
        // edit
        //
        this.editdialog = Ext.lingo.FormUtils.createTabedDialog('edit-dialog', ['基本信息','详细信息','帮助']);

        this.edityesBtn = this.editdialog.addButton("确定", function() {
            if (this.editcolumns.oldpassword2.getValue() != "" &&
                    this.editcolumns.password2.getValue() != this.editcolumns.confirmpassword2.getValue()) {
                Ext.suggest.msg("错误", "两次输入的密码不一样");
                this.editcolumns.confirmpassword2.focus();
                return;
            }
            var item = Ext.lingo.FormUtils.serialFields(this.editcolumns);
            if (!item) {
                return
            }

            this.editdialog.el.mask('提交数据，请稍候...', 'x-mask-loading');
            var edithide = function() {
                this.editdialog.el.unmask();
                this.editdialog.hide();
                this.refresh.apply(this);
            }.createDelegate(this);
            Ext.lib.Ajax.request(
                'POST',
                this.urlSave,
                {success:edithide,failure:edithide},
                'data=' + encodeURIComponent(Ext.encode(item))
            );
        }.createDelegate(this), this.editdialog);

        // 设置三个tab
        var edittabs = this.editdialog.getTabs();
        edittabs.getTab(0).on("activate", function() {
            this.edityesBtn.show();
        }, this, true);
        edittabs.getTab(1).on("activate", function() {
            this.edityesBtn.show();
        }, this, true);
        edittabs.getTab(2).on("activate", function(){
            this.edityesBtn.hide();
        }, this, true);

        edittabs.getTab(0).setContent(Ext.get("edit-base-content").dom.innerHTML);
        edittabs.getTab(1).setContent(Ext.get("edit-detail-content").dom.innerHTML);
        document.body.removeChild(document.getElementById("edit-base-content"));
        document.body.removeChild(document.getElementById("edit-detail-content"));

        this.editcolumns = Ext.lingo.FormUtils.createAll(this.editMetaData);
        this.editnoBtn = this.editdialog.addButton("取消", this.editdialog.hide, this.editdialog);
    }

    , applyElements : function() {
        // 重载父类方法，手工制作form
    }
});


Ext.onReady(function(){

    // 开启提示功能
    Ext.QuickTips.init();

    // 使用cookies保持状态
    // TODO: 完全照抄，作用不明
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // 布局管理器
    var layout = new Ext.BorderLayout(document.body, {
        center: {
            autoScroll     : true,
            titlebar       : false,
            tabPosition    : 'top',
            closeOnTab     : true,
            alwaysShowTabs : true,
            resizeTabs     : true,
            fillToFrame    : true
        }
    });

    // 设置布局
    layout.beginUpdate();
        layout.add('center', new Ext.ContentPanel('tab1', {
            title      : '用户管理',
            toolbar    : null,
            closable   : false,
            fitToFrame : true
        }));
        layout.add('center', new Ext.ContentPanel('tab2', {
            title: "帮助",
            toolbar: null,
            closable: false,
            fitToFrame: true
        }));
        layout.restoreState();
    layout.endUpdate();
    layout.getRegion("center").showPanel("tab1");