Ext表单之loadRecord用法详解

[img]http://lovebeyond.iteye.com/upload/attachment/133355/c4778cd0-762d-3d20-b310-a186a61702ee.jpg[/img]

[size=large]这个方法是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就表示本条记录[/size]

loadrecord.html

<!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

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%'            }]        }]  });});

源代码也加上，编码是UTF-8

Ext表单之loadRecord用法详解相关推荐

Jquery表单插件ajaxForm用法详解
原文地址: http://www.open-open.com/lib/view/open1325032463827.html 插件主要的方法: ajaxForm ajaxSubmit formToAr ...
【onsubmit】Form表单onsubmit事件用法详解
表单提交数据时,我们有时会用到onsubmit事件,那么onsubmit事件到底是干什么用的,在什么时候触发onsubmit事件以及如何使用onsubmit.本文章将向大家详细讲解onsubmit事件 ...
js form表单onsubmit事件用法详解
onsubmit事件是当表单提交时进行相关js操作的一个事件.(但是有疑问) onsubmit 事件会在表单中的确认按钮被点击时发生.当该事件触发的函数中返回false时,表单就不会被提交. 请看下面 ...
a链接易混淆与form表单简易验证用法详解
链接可以说遍布互联网,比如你想提供一个可以跳转到百度首页的链接给网友,那么代码如下: <a href="http://www.baidu.com">百度一下,你就知道& ...
layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
php表单提交到数据库详解
一般朋友们逛一些网站的时候,想使用网站或者看到更多网站里的内容,网站会要求用户进行新用户的注册,网站会把新用户的注册信息存入数据库中,需要的时候再进行提取. 这样网站就会首先创建自己的数据库和对应的表 ...
createform用法_vue自定义表单生成器form-create使用详解
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
HTML表单的enctype属性详解{转}
用Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlencoded: 窗体数据被编码为名称/值对.这是标准的编码格式 ...
Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

Ext表单之loadRecord用法详解

Ext表单之loadRecord用法详解相关推荐

最新文章

热门文章