PDA

View Full Version : EditorGridPanel inside a Viewport



khbuex
28 Mar 2010, 3:47 AM
Hi,

I have a Viewport which contains a center region, it looks like this:


id: 'content-panel',
region:'center',
margins: '4 0 0 0'


And I have a standard EditorGridPanel.
Ti'll now I've rendered it inside a Ext.Window, so it wasn't a problem. But now I want it to be inside the center region.

I try something like that:


myEditorGrid.render('content-panel');


But it doesn't work. How do I do it?
Thanks!

Gjslick
28 Mar 2010, 9:44 AM
Try putting it in when you create the Viewport, as the center panel's item. Ex:

var myEditorGrid = new Ext.grid.EditorGridPanel( {
// configs
} );

var viewport = new Ext.Viewport( {
layout: 'border',

items: [
{
id: 'content-panel',
region: 'center',
margins: '4 0 0 0',

items: myEditorGrid
}
]
} );
Otherwise if you want to put it in at a later time, you want to 'add' the grid to the center panel, not just 'render' it in there.


Ext.getCmp( 'content-panel' ).add( myEditorGrid );
And if the Viewport is already rendered when you add the grid, you may need an extra call to doLayout() afterwards to have it sized correctly. Ex:

var contentPanel = Ext.getCmp( 'content-panel' );
contentPanel.add( myEditorGrid );
contentPanel.doLayout();
Lemme know if that helps.

-Greg

khbuex
28 Mar 2010, 10:27 AM
Nice! It worked!

Now, lets say I run this code


var contentPanel = Ext.getCmp( 'content-panel' );
contentPanel.add( myEditorGrid );
contentPanel.doLayout();

after I push the "A" button.

Now, I want to push the "B" button and "myEditorGrid2" will come up in that content-panel. Will the contentPanel.add will overrun the previous myEditorGrid? How do I reset the contentPanel?

Thanks again!

Gjslick
28 Mar 2010, 11:02 AM
Hey, glad that worked.

Ok, because panels support multiple child items, add() will actually add another component to what is in there already. What you should be able to do is run removeAll() on the container first (to remove the old grid), and then run add() to put the new one in.



var contentPanel = Ext.getCmp( 'content-panel' );
contentPanel.removeAll(); // remove any components that are in there right now
contentPanel.add( myEditorGrid );
contentPanel.doLayout();
There is a small caveat though. Are you creating a new editor grid each time the buttons are clicked, or are you re-using grids that are already created? If you are re-using grids that are already created, you have to tell removeAll() to not destroy the components that it removes, so that it doesn't destroy your re-usable grids. If it does, they won't be able to be added again.



var contentPanel = Ext.getCmp( 'content-panel' );
contentPanel.removeAll( /* autoDestroy */ false );
contentPanel.add( myEditorGrid );
contentPanel.doLayout();

However, if you are in fact using the same two grids and are just displaying the appropriate one when each button is clicked, then the easiest thing to do is use a CardLayout as your content panel. What you do is add both grids to the content panel, and then just tell the card layout to show the appropriate grid when the buttons are clicked. Here's an example:

var myEditorGrid1 = new Ext.grid.EditorGridPanel( {
// configs
} );

var myEditorGrid2 = new Ext.grid.EditorGridPanel( {
// configs
} );


var viewport = new Ext.Viewport( {
layout: 'border',

items: [
{
id: 'content-panel',
region: 'center',
margins: '4 0 0 0',

layout: 'card',
activeItem: 0,
items: [
myEditorGrid1,
myEditorGrid2
]
}
],

buttonAlign: 'center',
buttons: [
{
text: "Button A",
handler: function() {
Ext.getCmp( 'content-panel' ).getLayout().setActiveItem( 0 );
}
},{
text: "Button B",
handler: function() {
Ext.getCmp( 'content-panel' ).getLayout().setActiveItem( 1 );
}
}
]
} );
Try that, and let me know how it goes.

-Greg

khbuex
28 Mar 2010, 11:29 AM
For some reason using this


items: myEditorGrid


Doesn't work. It doesn't gives me an error, but I just dont see the editor grid on the screen.
The other method did work. Why?

Gjslick
28 Mar 2010, 11:40 AM
Oh, sorry, I forgot the layout config in the content panel for that one. Try this:


var myEditorGrid = new Ext.grid.EditorGridPanel( {
// configs
} );

var viewport = new Ext.Viewport( {
layout: 'border',

items: [
{
id: 'content-panel',
region: 'center',
margins: '4 0 0 0',

layout: 'fit',
items: myEditorGrid
}
]
} );
I think that should be it. It probably wasn't sizing the grid at all without that layout config. Otherwise, post what you have of your code and I'll take a look.

-Greg

khbuex
28 Mar 2010, 11:45 AM
Already try it - ain't working.

My EditorGrid uses a data store which loads it's data through JSON. I can see that when I load the page it goes to that URL, so it does load the editor grid, but I can't see it for some reason.

khbuex
28 Mar 2010, 11:50 AM
It works! The problem was that I ran the Viewport before I finished initializing the grid panel.

Gjslick
28 Mar 2010, 12:16 PM
Ah, yes, the grid panel must be created first. That's why I put it above the viewport creation.

Glad that you got it working tho!