ExtJS 将面板添加到面板

Posted 2023-02-23

【中文标题】ExtJS 将面板添加到面板

【英文标题】：ExtJS add panel to panel

【发布时间】：2012-01-08 00:14:23

【问题描述】：

我正在尝试将 2 个面板添加到已创建的面板（布局：拉伸，类型：hbox）。我在 firebug 中没有收到任何错误，但我的屏幕上似乎没有发生任何事情。

这是将 2 个面板添加到已定义面板的代码。

var variablesAttributesPanel = new Ext.Panel(
    id: 'variablesAttributesPanel',
    title: 'variablesAttributesPanel',
    autoScroll: true, 
    html: 'yeah1',
    layout: 
        align: 'stretch',
        type: 'vbox'
    ,
    flex: 1
);
var locationDatePanel = new Ext.Panel(
    id: 'locationDatePanel',
    autoScroll: true, 
    title: 'locationDatePanel',
    html: 'yeah2',
    layout: 
        align: 'stretch',
        type: 'vbox'
    ,
    flex: 1
);
Ext.getCmp('datasetInfoPanel').add(variablesAttributesPanel);
Ext.getCmp('datasetInfoPanel').add(locationDatePanel);
Ext.getCmp('datasetInfoPanel').update();
Ext.getCmp('datasetInfoPanel').doLayout();

关于我做错了什么有什么想法吗？

编辑

var datasetInfoPanel = new Ext.Panel(
    id: 'datasetInfoPanel',
    title: "Dataset Information", 
    region: "center", 
    autoScroll: true, 
    layout: 
        align: 'stretch',
        type: 'hbox'
    ,
); 

【问题讨论】：

你能显示你配置datasetInfoPanel的代码吗，问题似乎是你没有给出面板尺寸。

还有一件事。我不知道您使用的是哪个版本的 extjs，但更新方法不是用于刷新视图，而是用于为面板提供新的 html 或数据内容。查看文档，所以基本上你用一个空的 html 重写面板视图。

当然是在 Ext.onready() 中执行此操作？

@nscrob 我创建了一个显示 datasetInfoPanel 配置的编辑。我也使用了更新，只是在添加面板之前从面板中清除当前的 html。

我的担心仍然是更新是在添加了两个面板之后，因此在添加了两个面板之后清除了 html。删除 update() ，如果您仍然看不到 2 个面板，请检查页面的来源，看看它们是否在没有尺寸的情况下呈现。

【参考方案1】：

试试看：

datasetInfoPanel.add(variablesAttributesPanel);
datasetInfoPanel.add(locationDatePanel);

从 variablesAttributesPanel 和 locationDatePanel 中删除布局配置。