treePanel与gridPanel技术实现页面的增删改查

在WEB开发中，使用传统的table+js+form表单的形式做出来的页面早已无法满足用户对界面图形化操作的需求。而在使用强大的Ext技术可以实现传统页面的几乎所有功能，并且给用户带来更加有亲和力的视图操作。下面是我用Ext做出的一个DEMO，使用TreePanel和GridPanel实现页面基本的增加、删除、修改、查询操作，部份代码如下。

 

Ext.BLANK_IMAGE_URL = "./ext/resources/images/default/s.gif";
Ext.onReady(function(){
 
 var root=new Ext.tree.AsyncTreeNode({
   id:"1", text:"展开/关闭", leaf:false,expand:true
  });
  
 var tree = new Ext.tree.TreePanel({
  id:'tree',//id为tree
  region:'west',//设定显示区域为东边,停靠在容器左边

  split:true,//出现拖动条

  collapseMode:'mini',//拖动条显示类型为mini,可出现拖动条中间的尖头

  width: 210,//初始宽度
  minSize: 210,//拖动最小宽度

  maxSize: 300,//拖动最大宽度

  collapsible: true,//允许隐藏
  title: "角色列表",
  lines:true,//出现节点间虚线

  autoScroll:true,
  loader:
  new Ext.tree.TreeLoader({dataUrl: "listRoleInfo.action"})
//  listeners : {
//   click : function(n){
////    var url = n.attributes.url;
////    var id = n.attributes.id;//id如果没有定义，则会自动生成一个唯一的id
//    
//       
//   }
//  }
 });
 tree.setRootNode(root);
 
 //tree.expandAll();
//============================================树结束==================
 
 var selectNode = '';
 //=========================================树的单击事件 开始====================
 tree.on('click',function(node){//当树节点被点击时触发
  if(node.isLeaf()){//如果不是叶子节点则不处理
   selectNode=node;//设置选择节点为当前节点
   var params = node.id;//请求数据
   store.load({params:{start:0, limit:20,roleId:params}});
   store.on('beforeload',function(){  
          Ext.apply(  
          this.baseParams,  
          {  
              functionId:params
          });  
      });
   }
 })
//=========================================树的单击事件 结束====================
 //Proxy
 var proxy  = new Ext.data.HttpProxy({url:"listUserInfo.action"},"post");

 //var proxy = new Ext.data.MemoryProxy(json);
 
 //Record 定义记录结果
 var parenRecord=Ext.data.Record.create([
 {name:"registerId", type:"String", mapping:"registerId"},
 {name:"loginName", type:"String", mapping:"loginName"},
 {name:"loginPwd", type:"String", mapping:"loginPwd"},
 {name:"userName", type:"String", mapping:"userName"},
 {name:"telephone1", type:"String", mapping:"telephone1"},
 {name:"telephone2", type:"String", mapping:"telephone2"},
 {name:"email", type:"String", mapping:"email"},
 {name:"createTime", type:"String", mapping:"createTime"},
 {name:"lastLoginTime",type:"Date",mapping: "lastLoginTime"},
 {name:"mod_Date",type:"Date",mapping: "mod_Date"},
 {name:"lastModUser",type:"String",mapping:"lastModUser"},
 {name:"remark", type:"String", mapping:"remark"}
 
 ]);
 
 //Reader
 var reader = new Ext.data.JsonReader(
  {totalProperty:"totalProperty", root:"root"},
  parenRecord
 );
 
 //Store
 var store = new Ext.data.Store({
  proxy : proxy,
  reader: reader
//  autoLoad: true//即时加载数据
 });
 
 
 
// store.load({params:{start:0, limit:20,pCode:'ISUP_IAM_TMR'}});
 
 //列模型

 var cm = new Ext.grid.ColumnModel([
 {header:"ID",  dataIndex:"registerId", width:30, hidden: true},
 {header:"登录名称",  dataIndex:"loginName"},
 {header:"登录密码",  dataIndex:"loginPwd", hidden: true},
 {header:"用户姓名",  dataIndex:"userName",hidden:true},
 {header:"办公电话",  dataIndex:"telephone1"},
 {header:"手机",  dataIndex:"telephone2"},
 {header:"邮件地址",  dataIndex:"email"}, 
 {header:"最近登录时间",dataIndex:"lastLoginTime",hidden:true},
 {header:"创建时间",  dataIndex:"createTime",hidden:true},
 {header:"修改时间",dataIndex:"mod_Date",hidden:true},
 {header:"修改人ID",dataIndex:"lastModUser",hidden:true},
 {id:"remark",header:"备注",  dataIndex:"remark"}
 
 ])
 //-------------------------窗口部分-----------------------------------------------------------------------------
 var categoryId;

 var ds_params_select = new Ext.data.Store({
  url : 'listRoleInfo.action',
  reader : new Ext.data.JsonReader({
   }, [{name : 'id',mapping:'id'},
    {name : 'text',mapping:'text'}
   ])
 });
// ds_params_select .load();
// alert(ds_params_select );
 
 var btn_add_params = new Ext.Button({
  text : '添加功能',
  iconCls : 'icon-add',
  handler : function() {
   window_add_params.show();
  }
 });
 
 //Ext.form.Field.prototype.msgTarget='side'
 var paramsForm = new Ext.form.FormPanel({
  url:"addUser.action",
  method:"post",
//  baseParams:{paramDesc:'paramDesc', id:100},
//  title:"欢迎登录",
  labelAlign:"right",
  padding:"10px",
  frame:true,
        items:[
    {
     xtype : 'combo',
     fieldLabel : '使用角色',
     width:250,
    // id : 'roleId',  //value值
     hiddenName : 'roleId',  //要显示的文本,通过name传递ID值
    // name : 'pareFunc',
     emptyText:'请选择或输入角色',
     valueField : 'id',
     displayField : 'text',
     mode : 'remote',
     store : ds_params_select,
     selectOnFocus : true,
     editable : true,
     triggerAction : 'all',
     loadingText : '加载中...',
     listeners : {
      'select' : function() { 
       //alert("TEXT: "+Ext.get("pareFuncId").dom.value+" ID: "+Ext.get("pareFuncName").dom.value);
       //paramsForm.getForm().findField("pareFuncId").setValue(20);
       //Ext.get("pareFuncId").dom.value="hongchun";  //此处只能
       //alert("TEXT: "+Ext.get("pareFuncId").dom.value+" ID: "+paramsForm.getForm().findField("pareFuncId").getValue());
      }
     }
    },{
     name:"loginName",
     xtype:"textfield",
     fieldLabel:"登录名称",
     width:250,
     allowBlank:false
    },{
     name:"loginPwd",
     xtype:"textfield",
     fieldLabel:"登录密码",
     width:250,
     allowBlank:false
    },{
     name:"userName",
     xtype:"textfield",
     fieldLabel:"用户名称",
    // vtype:"email",//email格式验证
    // vtypeText:"只能输入数字",//错误提示信息,默认值我就不说了
     width:250,         
     allowBlank:false
    },{
     name:"telephone1",
     xtype:"textfield",
     fieldLabel:"办公电话",
     width:250,
     allowBlank:true
    },{
     name:"telephone2",
     xtype:"textfield",
     fieldLabel:"手机",
     width:250,
     allowBlank:true
    },{
     name:"email",
     vtype:"email",
     xtype:"textfield",
     fieldLabel:"E-mail",
     width:250,
     allowBlank:true
    },{
     name:"remark",
     xtype:"textarea",
     fieldLabel:"备注",
     width:250,
     allowBlank:true
    }
   ],
   buttonAlign : 'center',
   buttons:[{
    text:"确定",
    handler:function(){
     //得到name为username的表达域控件的值

//     var pCode = paramsForm.getForm().findField("pCode").getValue();
     //提交表单
     paramsForm.getForm().submit({
      success:function(paramsForm, action){
       if(action.result.msg == true){
        Ext.Msg.alert("成功","添加成功");
       }else if(action.result.msg == false){
        Ext.Msg.alert("失败","添加失败");
       }
       
       
      },
      failure:function(){
       Ext.Msg.alert("失败","对不起，提交失败");
      }
     });
    }
   },{
    text:"重置",
    handler:function(){
     paramsForm.getForm().reset();
    }
   },
    {
    text : '取消',
    handler : function() {this.ownerCt.ownerCt.ownerCt.hide();}
   }
   ]
 })
 paramsForm.getForm().clearInvalid();   //取消验证时的红框框
 //----------------------------------------------------------编辑表单--------------------------------------
 var editForm = new Ext.form.FormPanel({
  url:"editUser.action",
  method:"post",
//  baseParams:{paramDesc:'paramDesc', id:100},
//  title:"欢迎登录",
  labelAlign:"right",
  padding:"10px",
  frame:true,
        items:[
          {
     xtype : 'hidden',
     name : 'registerId'
    },
    {
     xtype : 'combo',
     fieldLabel : '使用角色',
     width:250,
    // id : 'editCb',//不能有id相同的的值
     id : 'editRoleName',  //value值
     hiddenName : 'editRoleId',  //要显示的文本
     name : 'role',
     emptyText:'请选择或输入报表名称',
     valueField : 'id',
     displayField : 'text',
     mode : 'remote',
     store : ds_params_select,
     selectOnFocus : true,
     editable : true,
     triggerAction : 'all',
     loadingText : '加载中...',
     listeners : {
      'select' : function() {
//       paramsForm.getForm().findField("pCode").setValue(paramsForm.getForm().findField("paramsCb").getValue());
      }
     }
    },{
     name:"loginName",
     xtype:"textfield",
     fieldLabel:"登录名称",
     width:250,
     allowBlank:false
    },{
     name:"loginPwd",
     xtype:"textfield",
     inputType: 'password',
     fieldLabel:"登录密码",
     width:250,
     allowBlank:false
    },{
     name:"userName",
     xtype:"textfield",
     fieldLabel:"用户名称",
    // vtype:"email",//email格式验证
    // vtypeText:"只能输入数字",//错误提示信息,默认值我就不说了
     width:250,         
     allowBlank:false
    },{
     name:"telephone1",
     xtype:"textfield",
     fieldLabel:"办公电话",
     width:250,
     allowBlank:true
    },{
     name:"telephone2",
     xtype:"textfield",
     fieldLabel:"手机",
     width:250,
     allowBlank:true
    },{
     name:"email",
     vtype:"email",
     xtype:"textfield",
     fieldLabel:"E-mail",
     width:250,
     allowBlank:true
    },{
     name:"remark",
     xtype:"textarea",
     fieldLabel:"备注",
     width:250,
     allowBlank:true
    }
   ],
   buttonAlign : 'center',
   buttons:[{
    text:"确定",
    handler:function(){
     //得到name为username的表达域控件的值

//     var pCode = paramsForm.getForm().findField("pCode").getValue();
     //提交表单
     editForm.getForm().submit({
      success:function(editForm, action){
       Ext.Msg.alert("成功","修改成功!");
      },
      failure:function(){
       Ext.Msg.alert("失败","修改失败!");
      }
     });
    }
   },{
    text:"重置",
    handler:function(){
     var record = grid.getSelectionModel().getSelected();
      if(record){
       editForm.getForm().loadRecord(record);
      }
     }
    
   },
    {
    text : '取消',
    handler : function() {this.ownerCt.ownerCt.ownerCt.hide();}
   }
   ]
 })
 //----------------------------------------------------------------------------编辑表单结束--------------------------
 
 var window_add_params = new Ext.Window({
  title : '添加用户',
  width : 500,
  resizable : false,
  autoHeight : true,
  modal : true,
  closeAction : 'hide',
//  listeners : {
//   'hide' : function() {
//    this.findById('book.bookName').ownerCt.ownerCt.ownerCt.form.reset();
//   }
//  },
  items : [paramsForm]
 });
 
 

 var btn_edit_book = new Ext.Button({
  text : '编辑数据',
  iconCls : 'icon-edit',
  handler : function() {
   var record = grid.getSelectionModel().getSelected();
   var checkNode = tree.getChecked();
   if(record && checkNode){
    window_edit_params.show();
    editForm.getForm().loadRecord(record);   
    Ext.get("editRoleName").dom.value = selectNode.text;
    Ext.get("editRoleId").dom.value = selectNode.id;
   }else{
    Ext.Msg.alert("提示","请选择一行要修改的数据");
   }
  }
 })
 
 var window_edit_params = new Ext.Window({
  title : '编辑参数',
  width : 500,
  resizable : false,
  autoHeight : true,
  modal : true,
  closeAction : 'hide',
//  listeners : {
//   'hide' : function() {
//    this.findById('book.bookName').ownerCt.ownerCt.ownerCt.form.reset();
//   }
//  },
  items : [editForm]
 });
//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                 删除参数    开始        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 var btn_del_book = new Ext.Button({
  text : '删除用户',
  iconCls : 'icon-del',
  handler : function() {
   var record = grid.getSelectionModel().getSelected();
   if (record) {
    Ext.Msg.confirm('确认删除', '你确定删除该条记录?', function(btn) {
     if (btn == 'yes') {
      Ext.Ajax.request({
       url : 'delUser.action',
       params : {registerId : record.data.registerId},
       success : function(request,options) {
        var json = Ext.util.JSON.decode(request.responseText);
        if(json.success == true){
         if(json.msg == true){
          grid.getStore().remove(record);
         }else{
          Ext.Msg.alert("失败","该功能已有用户使用,不能删除!");
         }
        }else{
         Ext.Msg.alert("失败","删除失败!");
        }        
       },
       failure : function() {
        Ext.Msg.show({
         title : '错误提示',
         msg : '删除时发生错误!',
         buttons : Ext.Msg.OK,
         icon : Ext.Msg.ERROR
        });
       }
      });
     }
    });
   }
  }
  
 });
//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx       删除参数    结束       xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 

//>>>>>>>>>>>>>>>>>>>>>>>>>>>>     查询参数     开始      >>>>>>>>>>>>>>>>>>>>>>> 
 
 var searchParams = function() {
//  ds_params.baseParams.conditions = text_search_params.getValue();
//  ds_params.load({params : {start : 0,limit : 20}});
  var value = text_search_params.getValue();
  store.load({params : {start : 0,limit : 20, inputValue:value}});
 }
 
 
 var btn_search_params = new Ext.Button({
 text : '查询',
 iconCls : 'icon-search',
 handler : searchParams
 });
 
 var text_search_params = new Ext.form.TextField({
  name : 'textSearchParams',
  width : 200,
  emptyText : '请输入用户ID或登录名称',
  listeners : {
   'specialkey' : function(field, e) {
    if (e.getKey() == Ext.EventObject.ENTER) { //按下ENTER键时触发查询
     searchParams();
    }
   }
  }
 });
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>     查询参数     结束      >>>>>>>>>>>>>>>>>>>>>>> 
 
//==========================================GridPanel  Start=====================
 var grid = new Ext.grid.GridPanel({
 id:'grid',
 border:true,
 title:'功能列表',
 region:'center',
 layout: 'fit',
 cm:cm,
 sm : new Ext.grid.RowSelectionModel({singleSelect : true}),
 store:store,
// store:ds_params,
 autoExpandColumn:"remark",
 viewConfig: {
   sortAscText:'升序',
   sortDescText:'降序',
   columnsText:'显示列',
            forceFit:true
        },
    tbar : [btn_add_params, '-',btn_edit_book, '-', btn_del_book, '-',text_search_params,btn_search_params],   
 bbar:
 new Ext.PagingToolbar({
  store:store,
//  store:ds_params,
  pageSize:20,
  displayInfo:true,
  displayMsg:"本页显示第{0}条到第{1}条的记录，一共{2}条",
  emptyMsg:"没有记录"
 }),
 listeners : {
  'rowdblclick':function(grid, rowIndex){
//   alert('双击我了');
  },
  'rowclick':function(grid,rowIndex){
//   alert(grid.getStore().getAt(rowIndex).data.paramId);
  }
 }
 });
//==========================================GridPanel  End=====================

  var viewport = new Ext.Viewport({
  layout:'border',
  items:[
   tree,grid
   ]
 });
});