Hello,
I want to add a Panel to a Viewport dynamically - not through the items-config of the constructor - but after creating of the viewport object. (as I ask the server through a XHR-request what type of panel I schould create)
Ext: Help [Archive] - Page 38 - Ext JS Forums::
How to change text in a Panel? IE6 Scrollbars, border layout. Tabbing issues Dynamically setting 2.0 - API Documentation Error. How can I render a
http://extjs.com/forum/archive/index.php/f-9-p-38.htmlHOME |
Ext: Premium Help [Archive] - Page 5 - Ext JS Forums::
[2.0] Adding a TreePanel to an existing Accordion Panel How to customize remote sorting? Dynamic tooltips on toolbar button
http://extjs.com/forum/archive/index.php/f-11-p-5.htmlHOME |
First try - add Panel to Viewport directly:
Doesn't work because I can't create the Viewport without a center region.
var MyViewport = new Ext.Viewport({
layout: 'border',
items:[{
region: 'north',
html: 'north'
}]
});
Ext.Ajax.request({
url: '....',
success: function(response) {
if (response.type == 'test') {
var panel = new Ext.Panel({
html: 'test',
region: 'center'
});
MyViewport.add(panel);
} else if (response.type == 'foo') {
//...
}
},
scope: this
});
Second try - Create an empty Component in center and render the new Panel into it:
Doesn't work either.
var MyComponent = new Ext.Component({
region: 'center'
});
Vps.currentViewport = new Ext.Viewport({
layout: 'border',
items:[{
region: 'north',
html: 'north'
}, MyComponent]
});
Ext.Ajax.request({
url: '....',
success: function(response) {
if (response.type == 'test') {
var panel = new Ext.Panel({
html: 'test'
});
panel.render(MyComponent);
} else if (response.type == 'foo') {
//...
}
}
};
Third try - Create an empty Panel in center and render the new Panel into it:
Doesn't work either.
var MyPanel = new Ext.Panel({
region: 'center'
});
Vps.currentViewport = new Ext.Viewport({
layout: 'border',
items:[{
region: 'north',
html: 'north'
}, MyPanel]
});
Ext.Ajax.request({
url: '....',
success: function(response) {
if (response.type == 'test') {
var panel = new Ext.Panel({
html: 'test'
});
panel.render(MyPanel);
MyPanel.add(panel);
} else if (response.type == 'foo') {
//...
}
}
};
Any suggetions how I could do that?
The BorderLayout is not supposed to render you new panels.
Look at Ext.Container.doLayout and Ext.layout.ContainerLayout.onLayout.
I'm interested in this too. I want to do the 2.0 equivalent of adding a NestedLayoutPanel to the viewport in the center region.
you could can do this by using a panel with a specific layout and having sub-items in it:
panel = new Ext.Panel({
layout: 'border',
items: [{
region: 'center',
html: 'center-content'
},{
region: 'west',
html: 'west-content
}]
}
);
the problem in my case is that i can't define this in the constructor - as i get the data asycnron.
niko
The BorderLayout is not supposed to render you new panels.
Look at Ext.Container.doLayout and Ext.layout.ContainerLayout.onLayout.
I call allready Ext.Container.doLayout - which calls Ext.layout.BorderLayout.onLayout. But does not call Ext.layout.ContainerLayout.onLayout - so how could i use it?
thanks for that tip...
but with BorderLayout it doesn't render the new items, on line 56 in BorderLayout.js you see this:
onLayout : function(ct, target){
var collapsed;
if(!this.rendered){
target.position();
target.addClass('x-border-layout-ct');
var items = ct.items.items;
collapsed = ;
for(var i = 0, len = items.length; i < len; i++) {
var c = items[i];
var pos = c.region;
if(c.collapsed){
collapsed.push(c);
}
c.collapsed = false;
if(!c.rendered){
c.cls = c.cls ? c.cls +' x-border-panel' : 'x-border-panel';
c.render(target, i);
}
this[pos] = pos != 'center' && c.split ?
new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);
this[pos].render(target, c);
}
this.rendered = true;
}
and rendered is allready true.
so a workaround for me is doing this:
Vps.currentViewport.layout.rendered = false;
Vps.currentViewport.doLayout();
(however the BorderLayout-Regions are re-created which isn't a good thing i guess)
I had the same issue and took a different approach to solve it, but I would rather be able to dynamically add a new border region as discussed in this thread instead. The previous post in this thread doesn't actually add a region after the border layout is rendered, it adds a panel to an existing region (as I understand it), so that doesn't help my case.
I created a Border Layout with each region defined with panels, then I added a grid panel to the panel. Initially, this caused an odd issue on split where it would actually duplicate the grid many times (could actually be a cool feature as each can show a different page filter, etc. hehe), but I was able to fix that by setting 'layout: fit' for the 'dummy' panel.
I needed to create the grid after the fact, because the column model is retrieved dynamically from the server. I could switch everything around, but the total solution does not work if I do that.
Here is an example of the final result. Again, not the best solution, but the end result is only an extra panel layer.
var p = new Ext.Panel({
id: rid, //rid specific to my code
listeners: ({
'afterlayout': SB.xxxxx //Function to initial colModel ajax call
}),
layout: 'border',
items: [
{
region: 'north',
xtype: 'panel',
layout: 'fit',
id: rid + '-north', //rid specific to my code
title: "Record(s) List",
collapsible: true,
collapsibleSplitTip: true,
height: 200,
split: true,
useSplitTips: true
},
{
region: 'center',
id: rid + '-center', //rid specific to my code
title: 'Record'
},{
region: 'south',
id: rid + '-south', //rid specific to my code
title: "Record's Grids",
collapsible: true,
collapsibleSplitTip: true,
height: 200,
split: true,
useSplitTips: true
}]
});
var gp = new Ext.grid.GridPanel({
id: moduleId + '-recordsList', //moduleId specific to my code, not relevant for this exampe
stripeRows: true,
enableHdMenu: false,
loadMask: true,
store: store,
cm: cm,
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
});
p.add(gp);
p.doLayout();
This is cut and pasted from my code, in between defining the borderlayout p and defining the grid panel gp, I am actually adding p to a card stack (which is in a different borderlayout, which is the viewport). And then I am making an ajax call to get the column model, then I am configuring the store and other steps specific to my application. My point is that while this sample code shows these actions right next to each other, it doesn't matter when gp is added to p.
Again, note that the north border layout panel has a layout of 'fit', without this you would at least need to set the height of the grid panel, but regardless you will end up with a bug if you use split to expand the panel to show more grid rows. So use 'fit'.
Hope this is a useful alternative for someone,
Jim
After you add your panel, just call Vps.currentViewport.doLayout();
Has anyone found an elegant solution to this problem yet?
MyPanel.add(panel);
alone doesn't work either
should this work?
var MyPanel = new Ext.Panel({
region: 'center'
});
Vps.currentViewport = new Ext.Viewport({
layout: 'border',
items:[{
region: 'north',
html: 'north'
}, MyPanel]
});
var panel = new Ext.Panel({
html: 'test'
});
MyPanel.add(panel);
//panel.render(MyPanel);
You should never call render() directly when adding to a container. It will do it for you.
Look at the code in red:
var MyComponent = new Ext.Component({
region: 'center'
});
Vps.currentViewport = new Ext.Viewport({
layout: 'border',
items:[{
region: 'north',
html: 'north'
}, MyComponent]
});
Ext.Ajax.request({
url: '....',
success: function(response) {
if (response.type == 'test') {
var panel = new Ext.Panel({
html: 'test'
});
// this is new
MyComponent.add(panel);
Vps.currentViewport.doLayout();
} else if (response.type == 'foo') {
//...
}
}
};
I'm interested in this too. I want to do the 2.0 equivalent of adding a NestedLayoutPanel to the viewport in the center region.
 I Am a Sinner – What About You?
 Global Sourcing and Supplier Online by Dylan
|
[2.0] How to render a Panel dynamically