EXTJS4.x之grid（2）--实现添加用户功能

在上一节中我们利用GridPanel实现了后台jsp的增删改查接口，并通过store得到数据展示在grid上了。实现了基本的数据显示，这节我们将实现添加数据到用户表中，实现如下图效果

 

要达到这个效果我们要使用到ext js的Window控件，下面我们先来学习一下Window对象的一下知识。

Ext.Window是一个专门的面板用于应用程序的窗口。默认情况下Windows是浮动的，可以调整大小，，可拖动。 Windows可以被最大化，以填补视口，恢复到其事先大小，并可以被最小化。

Window通常被关联到Ext.ZIndexManager或被Ext.WindowManager管理。激活前会备份其他组件的状态。

默认情况下，Windows将被渲染到document.body的。要限制一个窗口到另一个元素只要指定renderTo属性就可以。

与所有的容器都一样，重要的是设置窗口的大小，安排所有子组件，选择一个合适的布局结构等都跟其他容器相同。

 

1、主要配置项：
      closable：是否允许关闭窗口，默认为true。
      closeAction：关闭窗口的动作，包括以下两种：
            close：从DOM删除窗口，销毁窗口及其所属组件，窗口不再可用，重新显示需要调用show方法。此为默认值。
            hide：通过设置可见性隐藏窗口，窗口还可用，调用show方法后重新显示。
      constrain：是否约束窗口只能在容器内移动，默认为false。窗口默认渲染到document.body。
      constrainHeader：是否约束窗口头部只能在容器内移动，默认为false。
      draggable：是否可拖曳，默认为true。
      resizable：是否可改变窗口的大小，默认为true。
      modal：是否为模式窗口，默认为false。
      maximizable：是否可最大化窗口，默认为false。
      maximized：是否在初始化时最大化显示窗口，默认为false。
      x：窗口的X坐标值。
      y：窗口的Y坐标值。
      manager：WindowGroup的引用。
 
      expandOnShow：是否在窗口显示时展开它，默认为true。 当取值为false时，collapsed取值为true时，窗口初始显示时收缩。
      minimizable：是否可最小化窗口，默认为false。需要自定义最小化行为。
      defaultButton：当窗口获得焦点时，默认获得焦点的按钮。
      plain：主体背景是否透明，默认为false。

 

2、主要方法：
      show( [String/Element animateTarget], [Function callback], [Object scope] )：显示窗口。
      hide( [String/Element animateTarget], [Function callback], [Object scope] )：隐藏窗口。
      center()：窗口居中显示。
      close()：关闭窗口，相当于closeAction值为close的情形。
      maximize()：最大化窗口。
      restore()：还原窗口大小。
      toggleMaximize()：在最大化和还原之间切换。
 
      minimize()：最小化窗口。
      setActive( Boolean active )：激活窗口。
      focus()：窗口获得焦点。
      toBack()：后置窗口。
      toFront( [Boolean e] )：前置窗口。
      resize( Ext.Window this, Number width, Number height )：改变大小。

 

3、Ext.WindowGroup的主要方法：
      hideAll()
      sendToBack( String/Object win )
      bringToFront( String/Object win )
      get( String/Object id )
      getActive()
 
      each( Function fn, [Object scope] )
      getBy( Function fn, [Object scope] )

 

下面我们开始动手了，打开上一节中的工程，为MyGridPanel指定一个id为myGrid，方便在程序中获取到这个控件。点击添加用户button，添加一个handler。

接下来编写handler的内容，双击handler进入代码编辑界面，输入以下代码

var win = new Ext.Window(
{
    //指定窗口的标题
    title: "添加用户",
    //窗口的宽度
    width: 347,
    //窗口的高度
    height: 250,
    //是否为模式窗口，模式窗口是指到这个窗口弹出后将不能点击后面的窗口
    modal: true,
    //窗口显示的内容，内容为一个form表单控件，在其他章节有讲到
    items: [{
        xtype: "form",
        id: "formadd",
        height: "250",
        borderStyle: "padding-top:3px",
        frame: true,
        defaultType: "textfield",
        labelAlign: "right",
        labelWidth: 57,
        defaults: {
            allowBlank: false, width: 200
        },
        items: [
        { fieldLabel: "用户名", id: "userName", blankText: "请输入用户名" },
        { fieldLabel: "密码", id: "passWord", blankText: "请输入密码" },
        { fieldLabel: "再次输入密码", id: "rePassWord", blankText: "请再次输入密码" },
        ]
    }],
    //为这个窗口配置按钮，一个确定按钮，一个取消按钮    
    buttons: [
    {
        //引用类型为button
        xtype: "button",
        //显示的text为“确定”
        text: "确定",
        //响应事件
        handler: function () {
            //验证输入的内容是否合法等，这个是表单的基本操作
            if (!Ext.getCmp("formadd").getForm().isValid()) {
                Ext.Msg.alert("提示","您输入的信息有误,请重新输入...");
                return false;
            }
            var userName = Ext.getCmp("userName").getValue("");
            var passWord = Ext.getCmp("passWord").getValue("");
            var rePassWord = Ext.getCmp("rePassWord").getValue("");

            Ext.MessageBox.wait("载入中...", "提示", { 
                interval: 100       //进度条加载速度 
            }); 

            Ext.Ajax.request({
                url: "userControl.jsp?cmd=1",
                params: {
                    "userName": userName, "passWord": passWord
                },
                success: function (reponse, option) {
                    //gridStore.reload();
                    Ext.MessageBox.hide(); 
                    Ext.Msg.alert("提示", "添加成功！"); 
                    win.close();
                    Ext.getCmp("myGrid").getStore().reload();
                },
                failure: function () {
                    Ext.MessageBox.hide(); 
                    Ext.Msg.alert("提示", "添加失败！"); 
                }
            });
        }
    },
    {
        xtype: "button",
        text: "取消",
        handler: function () {
            Ext.getCmp("userName").setValue("");
            Ext.getCmp("passWord").setValue("");
            Ext.getCmp("rePassWord").setValue("");

            win.close();
        }
    }
    ]
});
win.show();

代码都有注释了，Ext.MessageBox是extjs提供的一下常用的小窗口集合，这里用到了好几个。很简单的，不详细说了。保存工程，启动服务器就可以看到效果了