PDA

View Full Version : How to dynamically change content of center region without overnested



Ex_Soft
2 Mar 2012, 1:57 AM
I want to dynamically change the contents of center region


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


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

Ex_Soft
2 Mar 2012, 2:48 AM
I'm trying


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


<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?