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


})