动态添加一个控件到viewport中去

最新推荐文章于 2025-05-15 16:33:39 发布

转载最新推荐文章于 2025-05-15 16:33:39 发布 · 424 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/timy/archive/2010/07/23/1783931.html

本文介绍如何使用 ExtJS 实现动态界面布局。通过创建容器并在运行时添加控件来更新界面，展示了如何利用 TreePanel 控件进行具体操作，并强调了调用 doLayout 方法的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

Ext.namespace('IAMadmin');

IAMadmin.MainApp = function() {

    // public space
    return {
        // public properties
        viewport: false,
        container_west: false,
        container_center: false,

        // public methods
        init: function() {

            this.container_west = new Ext.Panel({
                region: 'west',
                id: 'container_west',
                hideBorders: true
            });
            this.container_center = new Ext.Panel({
                region: 'center',
                id: 'container_center',
                hideBorders: true
            });

            this.viewport = new Ext.Viewport({
                layout: 'border',
                items: [{
                    region: 'north',
                    xtype: 'mainmenu'                // I created this one
                },
                this.container_west,
                this.container_center
                ]
            });
        }, // end of init

        onClick: function(obj,evt) {
            var treePanelBuilder    = new Ext.ux.TreePanelBuilder();
            var treePanel            = treePanelBuilder.buildTreePanel();

            this.container_west.setWidth(200);
            this.container_west.add(treePanel);

            this.viewport.doLayout();
        }
    };

}(); // end of application

基本的思路就是先生成一个容器，比如一个panel1，，在声明viewport的时候把这个容器加进去（items:panel1），然后把需要动态添加的控件添加到panel1

panel1.add(一个控件);

panel1.doLayout();

注意：容器添加后，需要调用doLayout方法，以便更新容器界面

转载于:https://www.cnblogs.com/timy/archive/2010/07/23/1783931.html