Question

我是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

等等...... navtree正确显示。

中心区域设置为：

{
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文件。

任何指向正确方向的人都会受到赞赏。（示例代码更好）

Answer 1

在此方面取得进展，但遇到了新问题。

我已将中心区域更改为：

{
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是一个表单。

在页面加载时，navtree正确显示，然后单击adduser 节点将表单加载到中心请求中。但是，单击adduser 节点第二次使表单消失。任何原因它不会重新加载本身？

Answer 2

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

Answer 3

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

在创建对象之前进行简单检查以确定该对象是否存在可以解决您的问题。

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

3 个答案: