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