第三节：ExtJS调用WCF系列-----添加，修改，删除（2）

第三节：ExtJS调用WCF系列-----添加，修改，删除（2）2010-07-17 cnblogs.com xiaozhuang接下来编写paging.js代码，主要用到了Ext.FormPanel和Ext.Window 两个控件来提供编辑和添加界面，paging.js的所有代码如下，包括前一节的那部分。
/**//*

* Author by Xiaozhuang

*

*
*/
Ext.onReady（function（）{

  // create the Data Store
  var store = new Ext.data.Store（{
    // load using script tags for cross domain, if the data in on the same domain as
    // this page, an HttpProxy would be better
    proxy: new Ext.data.WCFHttpProxy（{
      url: "/EmployeeService.svc/GetEmployeePaging"
    }）,

    // create reader that reads the Topic records
    reader: new Ext.data.WCFJsonReader（{
      root: "EmployeeList",
      totalProperty: "TotalCount",
      id: "EmployeeID",
      fields: [
        {name: "EmployeeID", type: "int"},
        {name: "CnName", type: "string"},
        {name: "Sex", type: "string"},
        {name: "Age", type: "int"},
        {name: "Email", type: "string"},
        {name: "OnWorkDate",type:"string"},
        {name: "DeptName", type: "string"}
      ]
    }）,

    // turn on remote sorting
    remoteSort: true
  }）;

  store.setDefaultSort（"EmployeeID", "ASC"）;

  // 把true和false转化为男或者女，这个其实可以在服务器端进行转化，写在这里只是为了测试
  function renderSex（value, p, record）{
  return record.data.Sex=="true"？"男":"女";
  }
  //这个函数演示了怎样把服务器端的DateTime类型转为Javascript的日期
  function renderOnWorkDate（value, p, record）{
    var jsondate = record.data.OnWorkDate;
    return eval（"new " + jsondate.substr（1,jsondate.length-2））.toLocaleDateString（）;
  }

  // the column model has information about grid columns
  // dataIndex maps the column to the specific data field in
  // the data store
  var nm = new Ext.grid.RowNumberer（）;
  var sm = new Ext.grid.CheckboxSelectionModel（）; // add checkbox column

  var cm = new Ext.grid.ColumnModel（[nm,sm,{
      header: "员工ID",
      dataIndex: "EmployeeID",
      width: 100
//      renderer: renderTopic
    },{
      header: "姓名",
      dataIndex: "CnName",
      width: 200
    },{
      header: "性别",
      dataIndex: "Sex",
      width: 70,
      renderer: renderSex
    },{
      header: "年龄",
      dataIndex: "Age",
      width: 70

    },{
     header: "Email",
      dataIndex: "Email",
      width: 150
    },{
      header: "入职时间",
      dataIndex: "OnWorkDate",
      width: 150,
      renderer: renderOnWorkDate
    },{
      header: "部门",
      dataIndex: "DeptName",
      width: 200

    }]）;

  // by default columns are sortable
  cm.defaultSortable = true;

  var grid = new Ext.grid.GridPanel（{
    //el:"topic-grid",
    renderTo: document.body,
    width:800,
    height:500,
    title:"分页和排序列表",
    store: store,
    cm: cm,
    trackMouseOver:false,
    sm: sm,
    loadMask: true,
    viewConfig: {
      forceFit:true,
      enableRowBody:true,
      showPreview:true,
      getRowClass : function（record, rowIndex, p, store）{

        return "x-grid3-row-collapsed";
      }
    },
     // inline toolbars
    tbar:[{
      text:"添加",
      tooltip:"添加一条记录",
      iconCls:"add",
      handler:handleAdd
    }, "-", {
      text:"修改",
      tooltip:"修改",
      iconCls:"option",
      handler:handleEdit
    },"-",{
      text:"删除",
      tooltip:"删除记录",
      iconCls:"remove",
      handler:handleDelete
    }],
    bbar: new Ext.PagingToolbar（{
      pageSize: 25,
      store: store,
      displayInfo: true
    }）
  }）;

  // render it
  grid.render（）;

  // trigger the data store load
  var request={start:0,limit:25};
  store.load（{params:request}）;

  //获取部门列表
   var deptDs = new Ext.data.Store（{
    proxy: new Ext.data.WCFHttpProxy（{
      url:"/EmployeeService.svc/GetDeptList"
     }）,
    reader: new Ext.data.WCFJsonReader（{
          root: "DeptList",
          id: "DeptID"
          }, [ "DeptID", "DeptName"]
        ）,
    remoteSort: false
   }）;

  //员工信息表单
   var EmpForm = new Ext.FormPanel（{
    frame: true,
    labelAlign: "right",
    labelWidth: 120,
    width: 450,
    height:250,
    items: new Ext.form.FieldSet（{
        title: "员工资料",
        autoHeight: true,
        defaults: {width: 200},
        defaultType: "textfield",
    items: [new Ext.form.Hidden（{
        name: "EmployeeID"
      }）,{
        fieldLabel: "姓名",
        name: "CnName",
        allowBlank:false
      },new Ext.form.ComboBox（{
        fieldLabel: "性别",
        hiddenName:"Sex",
        store: new Ext.data.SimpleStore（{
          fields: ["value", "text"],
          data : [[1,"男"],[0,"女"]]
        }）,
        valueField:"value",
        displayField:"text",
        typeAhead: true,
        mode: "local",
        triggerAction: "all",
        selectOnFocus:true,
        allowBlank:false
      }）,new Ext.form.NumberField（{
        fieldLabel: "年龄",
        name: "Age"
      }）, {
        fieldLabel: "Email",
        name: "Email",
        vtype:"email"
      }, new Ext.form.DateField（{
              fieldLabel: "入职时间",
              name: "OnWorkDate",
              allowBlank:false,
              format : "Y-m-d"
      }）, new Ext.form.ComboBox（{
              fieldLabel: "所属部门",
              name: "DepartmentName",
              hiddenName: "DepartmentID",
              store: deptDs,
              valueField: "DeptID",
              displayField: "DeptName",
              typeAhead: true,
              mode: "remote",
              triggerAction: "all",
              emptyText: "请选择部门",
              selectOnFocus: true,
              allowBlank: false
            }）
      ]
     }）
  }）;

   function handleAdd（）{
    var AddEmpWin = new Ext.Window（{
        title: "增加新员工",
        layout:"fit",
        width:500,
        height:300,
        plain: true,
        items:EmpForm,
        buttons: [{
          text:"保存",
          handler: AddRecord
        },{
          text: "取消",
          handler: function（）{
            AddEmpWin.hide（）;
          }
        }]
   }）;
    AddEmpWin.show（this）;
  }
  function handleEdit（）{
   var selectedKeys = grid.selModel.selections.keys; //returns array of selected rows ids only
      if（selectedKeys.length ！= 1）{
        Ext.MessageBox.alert（"提示","请选择一条记录！"）;
      }
      else {
      var EditEmpWin = new Ext.Window（{
        title: "修改员工资料",
        layout:"fit",
        width:500,
        height:300,
        plain: true,
        items:EmpForm,
        buttons: [{
          text:"保存",
          handler: UpdateRecord
        },{
          text: "取消",
          handler: function（）{
            EditEmpWin.hide（）;
          }
        }]
   }）;
    EditEmpWin.show（this）;
    //Ext.MessageBox.alert（"提示",selectedKeys）;
     deptDs.load（）; //取得科室列表
    var request = {empID:selectedKeys[0]};
       Ext.MessageBox.show（{
              msg: "正在请求数据, 请稍侯",
              progressText: "正在请求数据",
              width:300,
              wait:true,
              waitConfig: {interval:200}
           }）;
      Ext.Ajax.request（{
          url: "/EmployeeService.svc/GetEmployee", //url to server side script
          method: "POST",
          params:Ext.util.JSON.encode（request）,//the unique id（s）
          callback: function （options, success, response） {
            if （success） { //success will be true if the request succeeded
               Ext.MessageBox.hide（）;
               var formvalue=ConvertResponseText（response.responseText,"OnWorkDate",true,true）;
               EmpForm.form.setValues（formvalue）;
            } else {
               Ext.MessageBox.hide（）;
               Ext.MessageBox.alert（"失败，请重试",response.responseText）;
            }
          },
          //the function to be called upon failure of the request （server script, 404, or 403 errors）
          failure:function（response,options）{
            Ext.MessageBox.hide（）;
            ReturnValue = Ext.MessageBox.alert（"警告","出现异常错误！请联系管理员！"）;
          },
          success:function（response,options）{
            Ext.MessageBox.hide（）;
          }
     }）// end Ajax request
    }
  }
  function UpdateRecord（btn）
  {
    if （EmpForm.form.isValid（）） {
        btn.disabled=true;
        Ext.MessageBox.show（{
            msg: "正在请求数据, 请稍侯",
            progressText: "正在请求数据",
            width:300,
            wait:true,
            waitConfig: {interval:200}
         }）;
         var formvalue = EmpForm.form.getValues（）;
         var request = {emp:ConvertFormValue（formvalue,"OnWorkDate"）};
         //Ext.MessageBox.alert（"提示",formvalues）;
        Ext.Ajax.request（{
            url: "/EmployeeService.svc/UpdateEmployee", //url to server side script
            method: "POST",
            params:Ext.util.JSON.encode（request）,//the unique id（s）
            callback: function （options, success, response） {
              if （success） { //success will be true if the request succeeded
                 Ext.MessageBox.hide（）;
                 var alertcontent=ConvertResponseText（response.responseText,"",true,false）;
                 Ext.MessageBox.alert（"成功",alertcontent）;
              } else {
                 Ext.MessageBox.hide（）;
                 Ext.MessageBox.alert（"失败，请重试",response.responseText）;
              }
            },
            //the function to be called upon failure of the request （server script, 404, or 403 errors）
            failure:function（response,options）{
              Ext.MessageBox.hide（）;
              ReturnValue = Ext.MessageBox.alert（"警告","出现异常错误！请联系管理员！"）;
            },
            success:function（response,options）{
              Ext.MessageBox.hide（）;
              store.reload（）;
            }
       }）// end Ajax request
     }
  }

  function AddRecord（btn）
  {
    if （EmpForm.form.isValid（）） {
     btn.disabled=true;
          Ext.MessageBox.show（{
            msg: "正在请求数据, 请稍侯",
            progressText: "正在请求数据",
            width:300,
            wait:true,
            waitConfig: {interval:200}
         }）;
         var formvalue = EmpForm.form.getValues（）;
         var request = {emp:ConvertFormValue（formvalue,"OnWorkDate"）};
         //Ext.MessageBox.alert（"提示",formvalues）;
        Ext.Ajax.request（{
            url: "/EmployeeService.svc/AddEmployee", //url to server side script
            method: "POST",
            params:Ext.util.JSON.encode（request）,//the unique id（s）
            callback: function （options, success, response） {
              if （success） { //success will be true if the request succeeded
                 Ext.MessageBox.hide（）;
                 var alertcontent=ConvertResponseText（response.responseText,"",true,false）;
                 Ext.MessageBox.alert（"成功",alertcontent）;
              } else {
                 Ext.MessageBox.hide（）;
                 Ext.MessageBox.alert（"失败，请重试",response.responseText）;
              }
            },
            //the function to be called upon failure of the request （server script, 404, or 403 errors）
            failure:function（response,options）{
              Ext.MessageBox.hide（）;
              ReturnValue = Ext.MessageBox.alert（"警告","出现异常错误！请联系管理员！"）;
            },
            success:function（response,options）{
              Ext.MessageBox.hide（）;
              store.reload（）;
            }
       }）// end Ajax request

    }
  }

  function handleDelete（）{
   var selectedKeys = grid.selModel.selections.keys; //returns array of selected rows ids only
      if（selectedKeys.length > 0）
      {
        Ext.MessageBox.confirm（"提示","您确实要删除选定的记录吗？", deleteRecord）;
      }
      else
      {
        Ext.MessageBox.alert（"提示","请至少选择一条记录！"）;
      }//end
  }

  function deleteRecord（btn）{
     if（btn=="yes"）{
       var selectedRows = grid.selModel.selections.items;//returns record objects for selected rows （all info for row）
        var selectedKeys = grid.selModel.selections.keys;
        //var deleteresult = AjaxRequest（"/EmployeeService.svc/DelEmployee",selectedKeys,false,""）
        Ext.MessageBox.show（{
            msg: "正在请求数据, 请稍侯",
            progressText: "正在请求数据",
            width:300,
            wait:true,
            waitConfig: {interval:200}
         }）;
        Ext.Ajax.request（{
            url: "/EmployeeService.svc/DelEmployee", //url to server side script
            method: "POST",
            params:Ext.util.JSON.encode（selectedKeys）,//the unique id（s）
            callback: function （options, success, response） {
              if （success） { //success will be true if the request succeeded
                 Ext.MessageBox.hide（）;
                  var alertcontent=ConvertResponseText（response.responseText,"",false,false）;
                 Ext.MessageBox.alert（"成功",alertcontent）;
              } else {
                 Ext.MessageBox.hide（）;
                 Ext.MessageBox.alert（"失败，请重试",response.responseText）;
              }
            },
            //the function to be called upon failure of the request （server script, 404, or 403 errors）
            failure:function（response,options）{
              Ext.MessageBox.hide（）;
              ReturnValue = Ext.MessageBox.alert（"警告","出现异常错误！请联系管理员！"）;
            },
            success:function（response,options）{
              Ext.MessageBox.hide（）;
              store.reload（）;
            }
       }）// end Ajax request
     }//end if click "yes" on button
  } // end deleteRecord

}）;