maricao
2011-05-03 23:18
浏览 373

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>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

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
    单后按列操作

    打赏 评论

相关推荐 更多相似问题