想达到的效果是,当点击change按钮后,第一行的textOrDate列,由TextField变为一个DateField组件。试了很多办法,始终是加到最末尾,也就是第三行上。请问有什么好的办法吗?<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Form</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="forms.css" />
</head>
<body>
<script>
Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var fs = new Ext.FormPanel({
frame: true,
title:'Form',
labelAlign: 'right',
labelWidth: 85,
width:500,
waitMsgTarget: true,
items: [
new Ext.form.FieldSet({
id:'fieldset',
title: 'Contact Information',
autoHeight: true,
autoScroll:true,
items :[
{
id:'tableLayout',
layout:'table', //是否和布局有关?
layoutConfig:{columns:2},
items:[
{title:'name',width:150,height:10},
{title:'textOrDate',width:150,height:10},
new Ext.form.TextField({id:'name1', name:'name1', width:150}),
new Ext.form.TextField({id:'text1', name:'text1', width:150}),
new Ext.form.TextField({id:'name2', name:'name2', width:150}),
new Ext.form.TextField({id:'text2', name:'text2', width:150})
]
}]
})
]
}); fs.addButton('Change', function(){
//希望把第一行最后一个文本框替换掉
var datetype = new Ext.form.DateField({id:'date1', name:'date1', width:150}); var table = Ext.getCmp('tableLayout');
table.remove(Ext.getCmp('text1'));//先删除它
table.insert(3,datetype);//在位置3加一个日期框,希望达到替换的效果,但是总加在最后!!!!
table.doLayout();
//fs.doLayout();
}
); fs.render('form-ct');
});
</script>
<div id="form-ct"></div></body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Form</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script></head>
<body>
<script>
Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var fs = new Ext.FormPanel({
frame: true,
title:'Form',
labelAlign: 'right',
labelWidth: 85,
width:500,
waitMsgTarget: true,
items: [
new Ext.form.FieldSet({
id:'fieldset',
title: 'Contact Information',
autoHeight: true,
autoScroll:true,
items :[
{
id:'tableLayout',
layout:'column', //是否和布局有关?
items:[
{title:'name',width:150,height:70,id: 'nameId',
items: [new Ext.form.TextField({id:'name1', name:'name1', width:150}),
new Ext.form.TextField({id:'name2', name:'name2', width:150})
]},
{title:'textOrDate',width:150,height:70,id :'textOrDateId',
items: [new Ext.form.TextField({id:'text1', name:'text1', width:150}),
new Ext.form.TextField({id:'text2', name:'text2', width:150})
]}
]
}]
})
]
}); fs.addButton('Change', function(){
//希望把第一行最后一个文本框替换掉
var datetype = new Ext.form.DateField({id:'date1', name:'date1', width:150}); var table = Ext.getCmp('textOrDateId');
table.remove(Ext.getCmp('text1'));//先删除它
table.insert(0,datetype);//在位置3加一个日期框,希望达到替换的效果,但是总加在最后!!!!
table.doLayout();
//fs.doLayout();
}
); fs.render('form-ct');
});
</script>
<div id="form-ct"></div></body>
</html>
这样子可以达到你想要的效果,可能还有更好的解决办法吧