ext 中grid-form的使用

form与grid的联动实现：

1：首先要保证form中各组件的name值与Ext.data.Record.create({name:''})中name值相同，个数不一定要完全相同，只需form中的name在grid有对应的。
2：在点击事件或你要触发的事件中执行myform.getForm().loadRecor(rec);loadRecord()方法作用是将grid中指定record的值放到form中。
3：也可以将form中的修改传到grid中，可以通过form.updateRecord(store.getAt(index))实现。

有时会用到延时的方法，用法;
function(){Ext.getCmp("formpanel").getForm().loadRecord(rec)}).defer(200);

下面是本例子，仅限参考

var picPanel=new Ext.Panel({
columnWidth:.3,
border:false,
baseCls:'formpic',
height:180
});
var store;
var win;
var formPanel=new Ext.Panel({
columnWidth:.65,
border:false,
height:180,
items:myForm
});
var myForm= new Ext.form.FormPanel({
columnWidth:.70,
id:'formpanel',
width:210,
border:false,
bodyBorder:false,
height:180,
waitMsgTarget:true,
frame:true,
labelWidth:50,
labelAlign:"right",
ether_index:0,
items:[
  {
      xtype:'textfield',
      fieldLabel:'网口名',
      allowBlank:false,
      blankText:'该项不能为空',      
      name:'field1',    
      id:'field1',  
      width:180
    },
    {  
     xtype:'textfield',
     fieldLabel:'IP',
              blankText:'该项不能为空',
              allowBlank:false,
              width:180,
              hiddenName:'ip',
              id:'field2',
           name:'field2'
            },
    {
      xtype:'textfield',
      fieldLabel:'MASK', 
      allowBlank:false,
      blankText:'该项不能为空',
      name:'field3',
      id:'field3',  
      width:180
    },
           {
      xtype:'textfield',
      fieldLabel:'VIP', 
      allowBlank:false,
      blankText:'该项不能为空',
      name:'field4',
      id:'field4',  
      width:180
    }
   
],
buttons:[
{
text:'确定',
handler:function(){
myForm.getForm().submit({
url:'json/success.json',
method:'post',
waitMsg:"提交中",
params: {
ether_index:myForm.ether_index
},
failure:function(form,action){
if         (action.failureType==Ext.form.Action.CONNECT_FAILURE){
RS.failueDeal();
}
},
   success:function(form,action){
   form.updateRecord(store.getAt(myForm.ether_index));
   win.hide();
}
})

}

},
{
text:'重置',
handler:function(){
myForm.getForm().reset();
}

}
]
})

Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    Ext.BLANK_IMAGE_URL = '../lib/ext/resources/images/default/s.gif';
var cm = new Ext.grid.ColumnModel(
[{
         width:80,
        sortable:false,
        hideable:false,
        dataIndex:"field1"
    },
     {
header: "网口名",
width:100,
sortable: true,
dataIndex:"field2"
},
{
header: "IP",
width:100,
sortable: true,
dataIndex:"field3"
},{
header: "MASK",
width:100,
sortable: true,
dataIndex:"field4"
},
{
header: "VIP",
width:100,
sortable: true,
dataIndex:"field5"
}
    ]
);
var storeType= Ext.data.Record.create([
{name: 'field1'},
{name: 'field2'},
                  {name: 'field3'},
{name: 'field4'},
                  {name: 'field5'}
]);
   
store = new Ext.data.Store({
url:'../reflectTest.xml',
autoLoad:true,
reader:new Ext.data.XmlReader({
totalRecords:"total",
record:"row"
},storeType
        )
});
    var bgrid = new Ext.grid.GridPanel({
        renderTo:'info_t2',
cm:cm,
        width:500,
        height:152,
ds:store
    });
    /**
* 绑定给el对象的方法
*/
var ether_conf = function(index){
     win=new Ext.Window({
        title:'网卡(<font color="red">eth'+index+'</font>)配置',
        modal:true,
        width:400,
        autoHeight:true,
        animateTarget: this,
        closeAction:'hide',
        closable:true,
        layout:'column',
        resizable:false,
        buttons:[],
        items:[
            picPanel,myForm
        ]
    })
    myForm.ether_index = index;//改变了表单的参数
     win.show();
    var rec = store.getAt(index);
    if(rec!=null){
Ext.getCmp("formpanel").getForm().loadRecord(rec)
}
  
}
     var cards = Ext.select("ul#ether_cards li a",true);//关键
    cards.each(function(el,ct,index){
        el.addClassOnOver("ether-hover");
        el.on({
            click: ether_conf.createDelegate(el,[index])
        })
    });//each end
   
   
})