Extjs - загрузка данных в центральную область в макете границы

Question

Я новичок в ExtJS и пытаюсь поэкспериментировать с макетом границы. Кажется, я не могу найти способ загрузить внешние компоненты в центральную область.

Все содержится в окне просмотра:

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" - это div в основном html-файле.

Это тоже хорошо работало, но теперь я хотел бы расширить это так, чтобы при щелчке узла «adduser» отобразить форму для центральной области напрямую ... в обход загрузки любого другого html-файла.

Будут приветствоваться любые указатели в правильном направлении. (Пример кода еще лучше)

Answer 1

Попробуйте удалить эту строку: content.removeAll(true);

Answer 2

Достигается прогресс в этом, но есть новая проблема.

Я изменил центральную область на:

{
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 3

Вероятно, вы создаете новый экземпляр этого объекта формы. Когда это происходит так, как вы это кодировали выше, создается дубликат DOM ID для объекта addsimpleuser. Это столкновение, вероятно, является причиной исчезновения формы.

Простая проверка, существует ли этот объект перед его созданием, должна решить вашу проблему.