Extjs 表单之loadRecord和load用法示例

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代码   收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.     <head>  
  4.         <title>loadrecord.html</title>  
  5.         <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />  
  6.         <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>  
  7.         <script type="text/javascript" src="../Ext/ext-all.js"></script>  
  8.         <script type="text/javascript" src="loadrecord.js"></script>  
  9.     </head>  
  10.     <body>  
  11.     </body>  
  12. </html>  


loadrecord.js 

Java代码   收藏代码
  1. Ext.onReady(function(){  
  2.     Ext.QuickTips.init();  
  3.     Ext.form.Field.prototype.msgTarget="qtip";  
  4.     var data = [  
  5.                 ["1","男",new Date(1979,09,06),"tom",21,"[email protected]"],  
  6.                 ["2","女",new Date(1980,08,07),"tony",46,"[email protected]"],  
  7.                 ["3","男",new Date(1990,07,08),"Jet Li",31,"[email protected]"],  
  8.                 ["4","女",new Date(1910,06,09),"washington",29,"[email protected]"]  
  9.     ];  
  10.     var fields = ['id','sex','brithday','name','age','eamil'];  
  11.     var cm = new Ext.grid.ColumnModel([  
  12.         { header: "ID", width: 60, sortable: true,dataIndex :'id',  
  13.         editor:new Ext.form.TextField({allowBlank:false})  
  14.         },  
  15.         { header: "性别", width: 70, sortable: true,dataIndex :'sex',  
  16.             editor:new Ext.form.ComboBox({  
  17.                 editable:false,  
  18.                 allowBlank:false,  
  19.                 displayField:"sex",  
  20.                 valueField:"sex",  
  21.                 triggerAction:"all",  
  22.                 mode:"local",  
  23.                 store:new Ext.data.SimpleStore({  
  24.                     fields:["sex"],  
  25.                     data:[["男"],["女"]]  
  26.                 })  
  27.             })  
  28.         },  
  29.         { header: "生日", width: 130, sortable: true,dataIndex :'brithday',  
  30.             editor:new Ext.form.DateField()  
  31.         },  
  32.         { header: "姓名", width: 100, sortable: true,dataIndex :'name'},  
  33.         { header: "年龄", width: 100, sortable: true,dataIndex :'age',  
  34.             editor:new Ext.form.NumberField({  
  35.                 allowBlank:false  
  36.             })  
  37.         },  
  38.         { header: "Email", width: 120, sortable: true,dataIndex :'eamil',  
  39.             editor:new Ext.form.TextField({  
  40.                 vtype:"email"  
  41.             })  
  42.         }  
  43.     ]);  
  44.     var store = new Ext.data.GroupingStore({  
  45.         data :data,  
  46.         reader : new Ext.data.ArrayReader({id:"id"},fields)  
  47.     });  
  48.     var gridForm = new Ext.FormPanel({  
  49.         id: 'user_info',  
  50.         applyTo:Ext.getBody(),  
  51.         frame: true,  
  52.         autoHeight:true,  
  53.         labelAlign: 'left',  
  54.         title: '员工信息表',  
  55.         bodyStyle:'padding:5px',  
  56.         width: 600,  
  57.         items:[new Ext.grid.GridPanel({  
  58.             title:"人员信息列表",  
  59.                     width:600,  
  60.                     autoHeight:true,  
  61.                     fram:true,  
  62.                     cm:cm,  
  63.                     store:store,  
  64.                     sm:new Ext.grid.RowSelectionModel({  
  65.                         singleSelect: true,  
  66.                         listeners: {  
  67.                 rowselect: function(sm, row, rec) {  
  68.                     Ext.getCmp("user_info").getForm().loadRecord(rec);  
  69.                 }  
  70.             }  
  71.                     }),  
  72.                     view:new Ext.grid.GroupingView({  
  73.                         hideGroupedColumn : true,  
  74.                         showGroupsText :"分组显示",  
  75.                         groupByText:"使用当前字段排序",  
  76.                         forceFit :true,  
  77.                         columnsText :"隐藏/显示字段",  
  78.                         sortAscText:"升序排列",  
  79.                         sortDescText:"降序排列"  
  80.                     })  
  81.         }),{  
  82.                 xtype: 'fieldset',  
  83.             labelWidth: 150,  
  84.             title:'加载grid信息内容',  
  85.             defaultType: 'textfield',  
  86.             autoHeight: true,  
  87.             items:[{  
  88.                 fieldLabel: 'ID',  
  89.                 name :'id',  
  90.                 anchor : '55%'  
  91.             },{  
  92.                 fieldLabel: '性别',  
  93.                 name :'sex',  
  94.                 anchor : '55%'  
  95.             },{  
  96.                 fieldLabel: '生日',  
  97.                 name :'brithday',  
  98.                 anchor : '55%'  
  99.             },{  
  100.                 fieldLabel: '年龄',  
  101.                 name :'age',  
  102.                 anchor : '55%'  
  103.             },{  
  104.                 fieldLabel: '邮箱',  
  105.                 name :'eamil',  
  106.                 anchor : '55%'  
  107.             }]  
  108.         }]  
  109.     });  
  110. });  

load

Extjs 表单之loadRecord和load用法示例_第1张图片 

Java代码   收藏代码
  1. function loadForm(ptid){  
  2.             ProgramForm.getForm().load({  
  3.                 waitMsg : '正在加载数据请稍后',          //提示信息  
  4.                 waitTitle : '提示',                         //标题  
  5.                 url : 'findTpartytype.action?tpartytype.id='+ptid, //请求的url地址  
  6.                 method:'POST',              //请求方式  
  7.                 success:function(form,action){ //加载成功的处理函数  
  8.                     ProgramForm.load();  
  9.                     (action.result.data),  
  10.                     Ext.Msg.alert('提示','find成功');  
  11.                 },  
  12.                 failure:function(form,action){          //加载失败的处理函数  
  13.                     Ext.Msg.alert('提示','find失败');  
  14.                 }  
  15.             });  
  16.         }  


效果图如下:

Extjs 表单之loadRecord和load用法示例_第2张图片  
FomrPanel代码如下: 
Java代码   收藏代码
  1. var ProgramForm = new Ext.FormPanel({  
  2.             labelSeparator : ":",          //元素分隔符为:s  
  3.             frame:true,                    //是否渲染  
  4.             height:100,  
  5.             border:true,                   //无边框      
  6.             reader : new Ext.data.JsonReader({   
  7.                 field:'json',  
  8.                 root:'root'  
  9. //              totalProperty:'totalCount'   
  10.         },record),  
  11.             items : [  
  12.                  {  
  13.                     xtype:'textfield',                 //类型  
  14.                     fieldLabel:'名称',                             
  15.                     width : 200,  
  16.                     allowBlank : false,               //验证是否为空  
  17.                     blankText : '当事人名称不能为空'  
  18.                     name : 'tpartytype.partytypename'    //定义元素名称  
  19.                  },  
  20.                 {                          //放置隐藏域修改用  
  21.                     xtype: 'textfield',   
  22.                     name: 'tpartytype.id',   
  23.                     id: 'tpartytype.id',   
  24.                     hidden: true,   
  25.                     hideLabel:true   
  26.   
  27.                 },  
  28.                 {                      //放置隐藏 把多有参数写满/看有无关系  
  29.                     xtype: 'textfield',   
  30.                     name: 'tpartytype.partytypecode',   
  31.                     id: 'tpartytype.partytypecode',   
  32.                     hidden: true,   
  33.                     hideLabel:true   
  34.   
  35.                 }  
  36.             ],  
  37.             buttons:[  
  38.                 {  
  39.                     text : '提交',  
  40.                     handler : submitForm  
  41.                 },  
  42.                 {  
  43.                     text : '关闭',  
  44.                     handler : function(){  
  45.                         win.hide();  
  46.                     }  
  47.                 }  
  48.             ],  
  49.              keys:[{key: [10,13],fn:submitForm}] //键盘事件 提交 fn:对应提交handler  
  50.         });  

结果如下图:

Extjs 表单之loadRecord和load用法示例_第3张图片  

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

备注,load()交互的查询结果如下:

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



你可能感兴趣的:(Extjs 表单之loadRecord和load用法示例)