PDA

View Full Version : dynamic remove and insert field in table layout



cnwy
3 May 2011, 8:53 PM
I have tried to replace the textfield with datefield in a table layout .
I tried to remove the textfield first and then insert the datefield in the same position, but the inserted datefield does appear in the end of table.




<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);//
table.doLayout();
//fs.doLayout();
}
);

fs.render('form-ct');
});
</script>
<div id="form-ct"></div>

</body>
</html>

Any idea?

kendoctor
3 May 2011, 11:07 PM
I can not guarantee this will cause the disaster, but it works.


var table = Ext.getCmp('tableLayout');
//alert(table.getXType());
var t = Ext.getCmp('text1');


var p = t.getEl().dom.parentNode;
alert(table.items.length);
table.remove(Ext.getCmp('text1'));//

var datetype = new Ext.form.DateField({renderTo:p, id:'date1', name:'date1', width:150});
table.insert(3,datetype);
var index = table.items.indexOf(t);

alert(table.items.length);