Loading a view into an existing panel by replacing an existing one

[kringla]

Hi,
First off, let me say I'm a newcomer to Ext, so I'm still struggling to get my head around how things relate to one and other.

What I want to do is to load a new view into the center region of a border layout, by clicking on a tree item (Like evil frames layouts in the old days).
I've got the tree click event part working and all that is left it to change the center region. I know that it can be done with the card xtype, but I'm rebuilding an application with around 40 views (non ext, with forms, heavy tables and graphs), and I imagine that trying to do it with card, would make the load time unbearable.

I've gotten to the stage where I can remove the contents of the center region, but I can't find a way to load a new view into it.

The following is what I currently have running in the itemclick event function in the tree controller:

var mainViewport = Ext.getCmp('mainPort');
mainViewport.layout.regions.center.ownerCt.remove('mainDiv');

mainDiv = Ext.create('Ext.panel.Panel', {
id: 'mainDiv',
xtype: 'rekvilistfull',
region: 'center'
});
mainViewport.add(mainDiv);
mainViewport.doLayout();


As you probably can tell, the id of the viewport is mainPort and the id of the center region is mainDiv. I'm sure there are better ways to load the mainDiv object, but this is the first way I found that worked. The xtype rekvilsitfull is a view that is defined in the controller, and it works if I hardcode it into the viewport.

This code loads without any errors, but it only removes the contents of the region.

So, am I way off, or close to the solution?
Or should I give up, and use card, and hope that it does some kind of dynamic background loading/off-loading that doesn't bring the browser to a halt after the user has opened allot of views?

Oh, and I have tried to find the solution in the forums and on the net, but the closest I've found to what I want is card xtype. So if there is a post about this, then I must be searching with the wrong terms.

[scottmartin]

Have a look at the KitchenSink example. Each selection displays in the center region. In particular, look at app/controller/Main.js :: setActiveExample

Is this close to what you are looking for?

Scott.

[kringla]

Yes, that is exactly what I'm looking for. The problem, it doesn't work.

To test this I have 2 views that are basically copies of each other, with different names (rekviList and rekviListFull), aliases and names.
Both work fine when hardcoded into the viewport. I also have two items in the tree, which load each of the views.

First I tried to only use the setActiveExample, and that kinda works on the first click, but it doesn't seem to replace the panel completely, it just makes a new panel within mainDiv panel. And the grid I'm loading does not want to stretch to the whole panel. The Second click looks like it it overwrites the new panel that is created, but now it is all aligned left and the grid headline is gone. On the third click (on the same "link" as the first click) it loads a blank panel, and on the fourth, i get a "Unable to get value of the property 'style': object is null or undefined" error.

It just seems like it's nesting a new panel into the old for every load, and after a few loads, It just can't take it any more.

[kringla]

I got it working, but the style error i caused by the dockedItems. On the first load, it works as it should, but when it is loaded in grid another view, or if I change to a grid view w/o the dockedItems and back to the original, the "Unable to get value of the property 'style': object is null or undefined" error pops up in the console.
Is it the code, or is it a bug?

The dockedItems code I use on the grid:

dockedItems: [{
xtype: 'pagingtoolbar',
store: "RekviStore",
dock: 'bottom',
displayInfo: true
}]

[scottmartin]

It is most likely that you are destroying something on close the first time and trying to access it again the second time. We would need to see a small working test case.

Scott.

[kringla]

Firebug kicks out this error: TypeError: me.dom is undefined
me.dom.style.height = me.addUnits(height);

Sorry for the late reply, but I got kinda frustrated on friday.
I'm trying to build a new application based on the KitchenSink example, and if that doesn't work, I'll find a way to get an example of the app on an external server.

Kim Andre

[kringla]

Well that didn't work either so heres an example:
http://www.wuerth.no/ext/
"My applications" has the docked item, and "Process application" doesn't.


If you click on "My", it will load the view the first time, but if you then click "Process" and then back to "My", I get an error.

Kim Andre

[kringla]

Does anyone have a clue why I get this behavior?

[kringla]

This solved the docked items problem: http://www.sencha.com/forum/showthread.php?146607-gridPanel-destruction-corruption-problem