EXTjs loadRecord方法 将grid中的数据 加载到form表单中去

重点是rowselect: function(sm, row, rec) {Ext.getCmp("user_info").getForm().loadRecord(rec);}这句代码sm是选择模式row是所列的唯一ID，比如第一条记录这个值就是0，以此递推！rec就表示本条记录

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"],
                ["5","女",new Date(1910,06,09),"washington",29,"you_5214@sina.com"] ,
                 ["6","女",new Date(1910,06,09),"washington",29,"you_5214@sina.com"]  
    ];  
    var fields = ['id','sex','brithday','name','age','email'];  
    
    
    
    function age(value){
    	if(value>30&&value<50)
    	return  '<span style="color:green;">' + value + '</span>';
    	else
    	return  '<span style="color:red;">'+value+'</span>';

       };
    function sex(value){
      if(value=="男")
      return '<span style="color:red;">'+value+'</span>';
       else
       return  '<span style="color:green;">' + value + '</span>';
       
      };
    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',  renderer:sex,
            editor:new Ext.grid.GridEditor(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', renderer:Ext.util.Format.dateRenderer('Y年m月d日'), 
            editor:new Ext.form.DateField()  
        },  
        { header: "姓名", width: 100, sortable: true,dataIndex :'name'},  
        { header: "年龄", width: 100, sortable: true,dataIndex :'age', renderer:age, 
            editor:new Ext.form.NumberField({  
                allowBlank:false
            })  
        },  
        { header: "Email", width: 120, sortable: true,dataIndex :'email',  
            editor:new Ext.grid.GridEditor(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,  
                    frame: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);  
                }  
            }  
                    }), */ 
                    
                     listeners: {
                    viewready: function(g) {
                        g.getSelectionModel().selectRow(0);
                    } // Allow rows to be rendered.
                },
                    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%'
            }]  
        }]  
    });  
});