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>

 

查看全部
maricao
maricao
2011/05/03 23:18
  • ext
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

0个回复