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

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.