Extjs - 将数据加载到边框布局的中心区域答案

【问题标题】：Extjs - Loading data to center region in border layoutExtjs - 将数据加载到边框布局的中心区域
【发布时间】：2011-03-29 18:10:20
【问题描述】：

我是 ExtJS 的新手，正在尝试使用边框布局。我似乎找不到将 ext 组件加载到中心区域的方法。

一切都包含在视口中：

new Ext.Viewport({
    layout: 'border',
    items: [

我已经用树形面板设置了西部区域：

xtype: 'panel',
region: 'west',
width: 200,
items: [{
    xtype: 'treepanel',
    height: 500,
    border: false,
    autoScroll: true,
    width: 199,
    autoWidth: true,
    id: 'navtree',
    root: new Ext.tree.AsyncTreeNode({
        expanded: true,
        children: [{
            text: 'Users',
            expanded: false,
            children: [{
                id: 'adduser',
                text: 'Add User',
                leaf: true,
        },{
        id: 'deleteuser',
        text: 'Delete User',
        leaf: true

等等…… 导航树正确显示。

中心区域设置为：

{
xtype: 'panel',
region: 'center',
autoScroll: true,
contentEl: 'centercontents'
}

我最初像这样加载外部网页：

Ext.getCmp('navtree').on('click', function(node){
  if(node.id == 'adduser'){Ext.get("centercontents").load({ url: "/adduser" });}

“centercontents”是主 html 文件中的一个 div。

这也很好，但现在我想扩展它以便单击“adduser”节点，在中心区域显示一个表单直接...绕过加载任何类型的附加 html 文件。

任何指向正确方向的指针都将不胜感激。（示例代码更好）

【问题讨论】：

标签： java html extjs

【解决方案1】：

您可能正在创建该表单对象的新实例。当您在上面编码时发生这种情况时，将创建 addsimpleuser 对象的重复 DOM ID。这种碰撞很可能是导致表单消失的原因。

在创建之前简单检查一下该对象是否存在应该可以解决您的问题。

【讨论】：

【解决方案2】：

尝试删除此行：content.removeAll(true);

【讨论】：

【解决方案3】：

在这方面取得了进展，但有一个新问题。

我已将中心区域更改为：

{
xtype: 'panel',
region: 'center',
autoScroll: true,
id: 'centercontents'
}

并将点击更改为：

Ext.getCmp('navtree').on('click', function(node){
    if(node.id == 'adduser')
        {
        var content = Ext.getCmp('centercontents');
        content.removeAll(true);
        var container = content.add(simpleadduser);
        content.doLayout();
        container.show();
        }

simpleadduser 是一个表单。

在页面加载时，导航树正确显示，然后单击 adduser 节点将表单加载到中心reqion。但是，单击 adduser 节点第二次使表单消失。任何原因它不会重新加载自己？

【讨论】：