extjs radio 动态切换 组件

Question

如图，如何通过选择radio本地上传，让网络地址的文本框切换成一个file，选择网络图片radio，是网络地址切换成一个文本框！
弄了两天了！
[b]问题补充：[/b]
刚刚开始是觉得用removed和add，去移除再加入的方式进行处理！一直行不通
昨晚采纳了他人的建议，使用card布局，成功！
atian25的思想也是对的！
做程序，要的就是解决问题！嘿嘿！

Answer 1

测试代码如下:
有点小复杂
[code="javascript"]
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/images/s.gif';
Ext.chart.Chart.CHART_URL = '/js/extjs/3.0/resources/charts.swf';
Ext.QuickTips.init();
var f = new Ext.form.FormPanel({
renderTo:Ext.getBody(),
width:300,
height:300,
title:'test',
items:[{
xtype: 'radiogroup',
fieldLabel: '上传方式',
items:[{
xtype:'radio',
boxLabel:'本地上传',
inputValue:'local',
name: 'uploadType',
checked:true
},{
xtype:'radio',
boxLabel:'网络上传',
inputValue:'remote',
name: 'uploadType'
}],
listeners:{
'change':function(group,ck){
var p1 = Ext.getCmp('panel1');
var p2 = Ext.getCmp('panel2');
if(ck.inputValue=='remote'){
p1.hide();
p2.show();
}else{
p2.hide();
p1.show();
}
}
}
},{
xtype:'panel',
layout:'column',
border:false,
frame:false,
items:[{
xtype:'panel',
id:'panel1',
border:false,
frame:false,
layout:'form',
columnWidth:1,
items:{
xtype:'textfield',
id:'uploadUrl1',
fieldLabel:'网络地址'
}
},{
xtype:'panel',
id:'panel2',
border:false,
frame:false,
hidden:true,
layout:'form',
columnWidth:1,
items:[{
xtype:'textfield',
id:'uploadUrl2',
fieldLabel:'网络地址',
autoCreate:{
tag:'input',
type:'file'
}
}]
}]
}]
});
});[/code]