JavaScript-ExtJS4.2：想实现动态替换Viewport的内容，为何不符合预期呢？

发布于 2017-06-28 09:43:04 字数 1890 浏览 1304 评论 1

<html>
<head>
<link rel="stylesheet" type="text/css" href="./ExtJS4/resources/css/ext-all.css" />
<script type="text/javascript" src="./ExtJS4/ext-all.js"></script>
<script type="text/javascript">
    Ext.onReady(function() {
        var btn = new Ext.Button({
            text : "Change",
            handler : function() {
                    var items=Ext.getCmp('central').items;
                    Ext.getCmp('central').remove(items.keys[0]);
                    Ext.getCmp('central').add(panel2);
            }
        });

        var panel2 = new Ext.Panel({
            itemId : 'panel2',
            border : false,
            title : 'panel2',
            frame : true
        });

        var panel1 = new Ext.Panel({
            itemId : 'panel1',
            border : false,
            title : 'panel1',
            frame : true
        });

        var viewport = new Ext.Viewport({
            border : false,
            layout : 'border',
            items : [ {
                split : true,
                region : 'north',
                frame : true,
                height : 60,
                items : [ btn ]
            }, {
                split : true,
                border : false,
                region : 'west',
                frame : true,
                width : 240,
                collapsible : true,
                html : 'part2'
            }, {
                id : 'central',
                border : false,
                layout : 'fit',
                region : 'center',
                items : [ panel1 ]
            } ]
        });
    });
</script>
</head>
<body>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜柠檬 2017-08-24 19:04:09

1、你新建好panel2,第一次添加就添加进去了。
2、在你第二次添加的时候,先将panel2，remove掉了所以你每次添加的时候新建个panel2

Ext.onReady(function() {
var btn = new Ext.Button({
text : "Change",
handler : function() {
var items=Ext.getCmp('central').items;
Ext.getCmp('central').remove(items.keys[0]);
Ext.getCmp('central').add(new Ext.Panel({
//itemId : 'panel2',
border : false,
title : 'panel2',
frame : true
})
);
}
});

// var panel2 = new Ext.Panel({
// itemId : 'panel2',
// border : false,
// title : 'panel2',
// frame : true
// });

回复收藏 0

~没有更多了~