Extjs 表单之loadRecord和load用法示例

最新推荐文章于 2018-08-06 17:18:07 发布

原创最新推荐文章于 2018-08-06 17:18:07 发布 · 8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #header #function #action #user #email

Extjs 专栏收录该内容

98 篇文章

订阅专栏

本文阐述了如何利用BaseForm的公用方法loadRecord将Grid组件内的数据加载至Form表单中，具体通过RowSelectionModel实现单行选择并加载对应记录。代码示例包括HTML结构、JavaScript实现以及数据展示效果，提供了完整的实现流程。

loadRecord

这个方法是BaseForm的一个公用方法，用法比较常用，之前没有想过要专门的去讲这么个方法的运用，但看到官方实例里面也有详细的讲这个方法的具体应用，而且我觉得是比较实用的方法！从BaseForm的角度出发，他一个是所有form组件的基类，实用他的这个方法同样可以用到其子类上，比如FormPanel，我这里就是通过FormPanel来实现这个功能的！
我整理是把grid里面的数据加载到form表单中相对应字段中去！
RowSelectionModel是表示行选择模式CellSelectionModel就表示单元格选择模式
由于前面也有涉及到grid相关知识，这里能理解就行，后面会做详细讲解，同时RowSelectionModel其相对的时间则有rowselect，表示选择当前行的动作！
重点是rowselect: function(sm, row, rec) {Ext.getCmp("user_info").getForm().loadRecord(rec);}这句代码sm是选择模式row是所列的唯一ID，比如第一条记录这个值就是0，以此递推！rec就表示本条记录

loadrecord.html

   Java代码  
   
  
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
     <head>  
         <title>loadrecord.html</title>  
         <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />  
         <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>  
         <script type="text/javascript" src="../Ext/ext-all.js"></script>  
         <script type="text/javascript" src="loadrecord.js"></script>  
     </head>  
     <body>  
     </body>  
 </html>  

loadrecord.js

   Java代码  
   
  
 Ext.onReady(function(){  
     Ext.QuickTips.init();  
     Ext.form.Field.prototype.msgTarget="qtip";  
     var data = [  
                 ["1","男",new Date(1979,09,06),"tom",21,"you_5214@sina.com"],  
                 ["2","女",new Date(1980,08,07),"tony",46,"you_5214@sina.com"],  
                 ["3","男",new Date(1990,07,08),"Jet Li",31,"you_5214@sina.com"],  
                 ["4","女",new Date(1910,06,09),"washington",29,"you_5214@sina.com"]  
     ];  
     var fields = ['id','sex','brithday','name','age','eamil'];  
     var cm = new Ext.grid.ColumnModel([  
         { header: "ID", width: 60, sortable: true,dataIndex :'id',  
         editor:new Ext.form.TextField({allowBlank:false})  
         },  
         { header: "性别", width: 70, sortable: true,dataIndex :'sex',  
             editor:new Ext.form.ComboBox({  
                 editable:false,  
                 allowBlank:false,  
                 displayField:"sex",  
                 valueField:"sex",  
                 triggerAction:"all",  
                 mode:"local",  
                 store:new Ext.data.SimpleStore({  
                     fields:["sex"],  
                     data:[["男"],["女"]]  
                 })  
             })  
         },  
         { header: "生日", width: 130, sortable: true,dataIndex :'brithday',  
             editor:new Ext.form.DateField()  
         },  
         { header: "姓名", width: 100, sortable: true,dataIndex :'name'},  
         { header: "年龄", width: 100, sortable: true,dataIndex :'age',  
             editor:new Ext.form.NumberField({  
                 allowBlank:false  
             })  
         },  
         { header: "Email", width: 120, sortable: true,dataIndex :'eamil',  
             editor:new Ext.form.TextField({  
                 vtype:"email"  
             })  
         }  
     ]);  
     var store = new Ext.data.GroupingStore({  
         data :data,  
         reader : new Ext.data.ArrayReader({id:"id"},fields)  
     });  
     var gridForm = new Ext.FormPanel({  
         id: 'user_info',  
         applyTo:Ext.getBody(),  
         frame: true,  
         autoHeight:true,  
         labelAlign: 'left',  
         title: '员工信息表',  
         bodyStyle:'padding:5px',  
         width: 600,  
         items:[new Ext.grid.GridPanel({  
             title:"人员信息列表",  
                     width:600,  
                     autoHeight:true,  
                     fram:true,  
                     cm:cm,  
                     store:store,  
                     sm:new Ext.grid.RowSelectionModel({  
                         singleSelect: true,  
                         listeners: {  
                 rowselect: function(sm, row, rec) {  
                     Ext.getCmp("user_info").getForm().loadRecord(rec);  
                 }  
             }  
                     }),  
                     view:new Ext.grid.GroupingView({  
                         hideGroupedColumn : true,  
                         showGroupsText :"分组显示",  
                         groupByText:"使用当前字段排序",  
                         forceFit :true,  
                         columnsText :"隐藏/显示字段",  
                         sortAscText:"升序排列",  
                         sortDescText:"降序排列"  
                     })  
         }),{  
                 xtype: 'fieldset',  
             labelWidth: 150,  
             title:'加载grid信息内容',  
             defaultType: 'textfield',  
             autoHeight: true,  
             items:[{  
                 fieldLabel: 'ID',  
                 name :'id',  
                 anchor : '55%'  
             },{  
                 fieldLabel: '性别',  
                 name :'sex',  
                 anchor : '55%'  
             },{  
                 fieldLabel: '生日',  
                 name :'brithday',  
                 anchor : '55%'  
             },{  
                 fieldLabel: '年龄',  
                 name :'age',  
                 anchor : '55%'  
             },{  
                 fieldLabel: '邮箱',  
                 name :'eamil',  
                 anchor : '55%'  
             }]  
         }]  
     });  
 });  

load

   Java代码  
   
  
 function loadForm(ptid){  
             ProgramForm.getForm().load({  
                 waitMsg : '正在加载数据请稍后',          //提示信息  
                 waitTitle : '提示',                         //标题  
                 url : 'findTpartytype.action?tpartytype.id='+ptid, //请求的url地址  
                 method:'POST',              //请求方式  
                 success:function(form,action){ //加载成功的处理函数  
                     ProgramForm.load();  
                     (action.result.data),  
                     Ext.Msg.alert('提示','find成功');  
                 },  
                 failure:function(form,action){          //加载失败的处理函数  
                     Ext.Msg.alert('提示','find失败');  
                 }  
             });  
         }  

效果图如下：

FomrPanel代码如下：

   Java代码  
   
  
 var ProgramForm = new Ext.FormPanel({  
             labelSeparator : "：",          //元素分隔符为:s  
             frame:true,                    //是否渲染  
             height:100,  
             border:true,                   //无边框      
             reader : new Ext.data.JsonReader({   
                 field:'json',  
                 root:'root'  
 //              totalProperty:'totalCount'   
         },record),  
             items : [  
                  {  
                     xtype:'textfield',                 //类型  
                     fieldLabel:'名称',                             
                     width : 200,  
                     allowBlank : false,               //验证是否为空  
                     blankText : '当事人名称不能为空'  
                     name : 'tpartytype.partytypename'    //定义元素名称  
                  },  
                 {                          //放置隐藏域修改用  
                     xtype: 'textfield',   
                     name: 'tpartytype.id',   
                     id: 'tpartytype.id',   
                     hidden: true,   
                     hideLabel:true   
   
                 },  
                 {                      //放置隐藏 把多有参数写满/看有无关系  
                     xtype: 'textfield',   
                     name: 'tpartytype.partytypecode',   
                     id: 'tpartytype.partytypecode',   
                     hidden: true,   
                     hideLabel:true   
   
                 }  
             ],  
             buttons:[  
                 {  
                     text : '提交',  
                     handler : submitForm  
                 },  
                 {  
                     text : '关闭',  
                     handler : function(){  
                         win.hide();  
                     }  
                 }  
             ],  
              keys:[{key: [10,13],fn:submitForm}] //键盘事件 提交 fn:对应提交handler  
         });  

结果如下图：

问题：
我怎么才能把查到的数据放到上面的结果图中呢？因为我现在更新总是做插入，我的隐藏域ID传过去。请大家给下方法，我新手刚学。

备注，load()交互的查询结果如下：

   Java代码  
   
 {root:[{"userlogDescription":"当事人类型名称为：gggggggg","partytypename":"gggggggg","systemlogDescription":"","partytypecode":"","searchenddate":"","searchstartdate":"","id":"14ED820E_8D8F_BFB1_37E4_AF156A3FFE88"}]}