1. #1
    Ext User
    Join Date
    Jul 2009
    Posts
    75
    Vote Rating
    1
    douggiefox is on a distinguished road

      0  

    Default Viewport and replacing center region with new form

    Viewport and replacing center region with new form


    Hi

    I'm having problems replacing regions in a viewport. What I'd like to happen is for the central region to get replaced with a different form depending on what's clicked in the west region.

    I'm using Viewport with a border layout. Here's my basic definition:

    Code:
    <html>
    <head>
        <title>Getting started sample</title>
        <link rel="stylesheet" type="text/css"
                href="lib/extjs/resources/css/ext-all.css"/>
        <script src="lib/extjs/adapter/ext/ext-base.js"></script>
        <script src="lib/extjs/ext-all-debug.js"></script>
        <script>
             Ext.onReady(function(){
    
                var viewport = new Ext.Viewport({
                layout : 'border',
                defaults : { // 1
                frame : true,
                split : true
                },
                items : [
                {
                    title : 'North Panel', // 2
                    region : 'north',
                    height : 100,
                    minHeight : 100,
                    maxHeight : 150,
                    collapsible : true
                },
                {
                    title : 'South Panel', // 3
                    region : 'south',
                    height : 75,
                    split : false,
                    margins : {
                    top : 5
                    }
                },
                {
                    title : 'East Panel', // 4
                    region : 'east',
                    width : 100,
                    minWidth : 75,
                    maxWidth : 150,
                    collapsible : true
                },
                {
                    title : 'West Panel', // 5
                    region : 'west',
                    collapsible : true,
                    collapseMode : 'mini',
                    contentEl: 'west'
                },
                {
                    xtype : 'container',
                    region : 'center',
                    layout : 'fit',
                    id : 'centerRegion',
                    autoEl : {},
                    items : {
                    title : 'Center Region',
                    id : 'centerPanel',
                    html : 'I am disposable',
                    frame : true
                    }
                }
                ]
            });
        });
        </script>
    </head>
    <body>
        <div id="west" class="x-hide-display">
          <a href="formreplace.html">New form</a>
        </div>    
    </body>
    </html>
    formreplace.html is defined as this:

    Code:
    <html>
    <head>
        <title>Getting started sample</title>
        <link rel="stylesheet" type="text/css"
                href="lib/extjs/resources/css/ext-all.css"/>
        <script src="lib/extjs/adapter/ext/ext-base.js"></script>
        <script src="lib/extjs/ext-all-debug.js"></script>
        <script>
            Ext.onReady(function(){
                var centerPanel = Ext.getCmp('centerPanel');
                var centerRegion = Ext.getCmp('centerRegion');
                centerRegion.remove(centerPanel, true);
                centerRegion.add({
                    xtype : 'form',
                    frame : true,
                    bodyStyle : 'padding: 5px',
                    defaultType : 'field',
                    title : 'Please enter some information',
                    defaults : {
                    anchor : '-10'
                    },
                    items : [
                    {
                      fieldLabel : 'First Name'
                    },
                    {
                      fieldLabel : 'Last Name'
                    },
                    {
                      xtype : 'textarea',
                      fieldLabel : 'Bio'
                    }
                    ]
                });
                centerRegion.doLayout();});
        </script>
    </head>
    <body>
    <!-- Nothing-->
    </body>
    </html>
    Any help's appreciated.

    Best DF

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    You cant add/remove items from a viewport easily. you'll need to work on a facade container.

    A visual demonstration of this can be found here: http://tdg-i.com/58/ext-js-screencas...add-and-remove

  3. #3
    Sencha User TopKatz's Avatar
    Join Date
    Mar 2007
    Posts
    337
    Vote Rating
    1
    TopKatz is on a distinguished road

      1  

    Default


    Also of note is that any borderlayout you can not add/remove a child region directly.

    That is to say you can not swap out the north region for another panel designated region north. There are a couple of workarounds for this.

    1. Use a child container in north that actualy holds the panel. This child can have its items manipulated.

    2. Use a cardlayout panel as the child:

    panel(layout:border) -> panel(region:north)->panel(layout:'card')->Panel1 || Panel2

Thread Participants: 2