ExtJS panel中组件布局的问题

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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

cbcgkx 2011-05-04 09:22

关注

Ext.onReady(function() {

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';
var name1 = new Ext.form.TextField({
            id : 'name1',
            name : 'name1',
            width : 150
        });
var text1 = new Ext.form.TextField({
            id : 'text1',
            name : 'text1',
            width : 150
        });
var name2 = new Ext.form.TextField({
            id : 'name2',
            name : 'name2',
            width : 150
        });
var text2 = new Ext.form.TextField({
            id : 'text2',
            name : 'text2',
            width : 150
        });
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', // 是否和布局有关？
                                    layoutConfig : {
                                        columns : 2
                                    },
                                    xtype : 'panel',
                                    items : [{
                                                columnWidth : .5,
                                                items : [{
                                                            title : 'name',
                                                            width : 150,
                                                            height : 10
                                                        }, name1, name2]
                                            }, {columnWidth : .5,
                                                id:'textordate',
                                                items : [{
                                                            title : 'textOrDate',
                                                            width : 150,
                                                            height : 10
                                                        }, text1, text2]
                                            }

                                            ]
                                }]
                    })]
        });

fs.addButton('Change', function() {
            // 希望把第一行最后一个文本框替换掉
            var datetype = new Ext.form.DateField({
                        id : 'date1',
                        name : 'date1',
                        width : 150
                    });

            var table = Ext.getCmp("textordate");
            table.remove(text1);

            // 在位置3加一个日期框,希望达到替换的效果，但是总加在最后！！！！
            table.insert(1, datetype);
            table.doLayout(true, true);
            fs.doLayout(true, true);

        });

fs.render(Ext.getBody());

});

这是修改后的代码没问题和你的table布局有问题讲布局方式改成column布局为每一个列定一个id
单后按列操作

本回答被题主选为最佳回答 , 对您是否有帮助呢?