Results 1 to 2 of 2

Thread: How to dynamically change content of center region without overnested

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    249
    Answers
    2

    Default How to dynamically change content of center region without overnested

    I want to dynamically change the contents of center region
    Code:
    Ext.onReady(function() {
        Ext.create("Ext.container.Viewport", {
            layout: "border",
            items: [{
                region: "west",
                width: 100,
                items: [{
                    xtype: "button",
                    text: "Tree",
                    handler: function(btn, e) {
                        Ext.create("Ext.tree.Panel", {
                            ...
                            contentEl: ???
                            applyTo: ???
                            ...
                        });
                    }
                }, {
                    xtype: "button",
                    text: "Grid",
                    handler: function(btn, e) {
                        Ext.create("Ext.grid.Panel", {
                            ...
                            contentEl: ???
                            applyTo: ???
                            ...
                        });
                    }
                }]
            },{
                region: "center",
                html: "center"
            }]
        });
    });
    What should I set in config of components? Similarly as
    Code:
    Ext.onReady(function() {
        var
            UserInfo={
                Name: "Name",
                Login: "Login",
            },
            PanelCenter=new Ext.Panel({
                region: "center",
                html: "center"
            }),
            tpl=new Ext.XTemplate(
                "<span>{Name}</span>",
                "<span>{Login}</span>"
            ),
            viewport=new Ext.Viewport({
                layout: "border",
                border: false,
                renderTo: Ext.getBody(),
                items: [ PanelCenter ]
            });
    
            tpl.overwrite(PanelCenter.body, UserInfo);
    });

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Posts
    249
    Answers
    2

    Default

    I'm trying
    Code:
    Ext.onReady(function() {
        var
            vp = Ext.create("Ext.container.Viewport", {
                layout: "border",
                items: [{
                    region: "west",
                    width: 100,
                    items: [{
                        xtype: "button",
                        text: "Panel1",
                        handler: function(btn, e) {
                            replaceRegionCenter(btn.text);
                        }
                    }, {
                        xtype: "button",
                        text: "Panel2",
                        handler: function(btn, e) {
                            replaceRegionCenter(btn.text);
                        }
                    }, {
                        xtype: "button",
                        text: "Panel3",
                        handler: function(btn, e) {
                            replaceRegionCenter(btn.text);
                        }
                    }]
                },{
                    region: "center",
                    html: "center",
                    id: "regionCenter"
                }]
            }),
            replaceRegionCenter = function(text)
            {
                var
                    regionCenter = vp.layout.regions.center;
    
                regionCenter.removeAll();
                regionCenter.add(Ext.create("Ext.panel.Panel", {
                    html: text,
                    id: text
                }));
            };
    });
    But, as for me, overnested exists
    Code:
    <div id="regionCenter" class="x-panel x-box-item x-panel-default" role="presentation" style="margin: 0pt; width: 1820px; height: 559px; left: 100px; top: 0px;">
        <div id="regionCenter-body" class="x-panel-body  x-panel-body-default x-panel-body-default" style="width: 1820px; height: 559px; left: 0px; top: 0px;">
            <div id="Panel3" class="x-panel x-panel-default" role="presentation" style="height: 18px; width: 1818px;">
                <div class="x-panel-body  x-panel-body-default x-panel-body-default" id="Panel3-body" style="left: 0px; top: 0px;">Panel3</div>
            </div>
            center
            <div role="presentation" class="x-clear" id="ext-gen1025"></div>
        </div>
    </div>
    I decide what Panel3 should replace regionCenter-body. Or am I wrong?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •