Extjs - Loading data to center region in border layout

Question

I'm new to ExtJS and trying to experiment with the border layout. I can't seem to find a way to load ext components to the center region.

Everything is contained in a viewport:

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

I've set the west region with a treepanel as such:

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

and so on..... The navtree displays properly.

The center region was setup as:

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

I initially loaded external web pages like so:

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

with "centercontents" being a div in the main html file.

That worked fine also, but now I would like to extend this so that on click of the "adduser" node, display a form to the center region directly ... bypassing loading any sort of additional html file.

Any pointers in the right direction would be appreciated. (Example code even better)

Answer 1

Making progress on this, but have a new problem.

I've changed the center region to:

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

And changed the click to:

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();
        }

where simpleadduser is a form.

On page load, the navtree displays properly, and clicking on the adduser node loads the form into the center reqion. However, clicking the adduser node a second time makes the form disappear. Any reason it would not reload itself?

Answer 2

You are likely creating a new instance of that form object. When that happens as you have coded it above, a duplicate DOM ID for the 'addsimpleuser' object is being created. This collision is likely what is causing the form to dissappear.

A simple check to see if that object exists before creating it should solve your problem.