Ext表单之loadRecord用法详解

程序员文章站 2022-07-15 16:41:23

...

Ext表单之loadRecord用法详解

博客分类： Extjs ExtjsloadRecordprototypeHTMLExt

这个方法是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:[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