想达到的效果是,当点击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>

解决方案 »

  1.   

    <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>
    这样子可以达到你想要的效果,可能还有更好的解决办法吧