Ext表单之loadRecord用法详解
http://lovebeyond.iteye.com/upload/attachment/133355/c4778cd0-762d-3d20-b310-a186a61702ee.jpg这个方法是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
<!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: }]});});
源代码也加上，编码是UTF-8
页:
[1]