PDA

View Full Version : Best Practices switching views MVC using border layout in center panel? Extjs4.2



delebash
26 Apr 2013, 4:02 AM
Using Extjs 4.2

The docs say the many developers use the center panel in border layout to change views or widgets but I am not sure of the best way to do this using MVC in a large application.

2 Goals

1) Changing from a grid view to a details view in the same center panel of the border layout. So a user clicks a row and the view changes to an edit form.

2)Changing the center panel widget when clicking on a menu item

I have read the docs/searched the forums and found little info on how to properly do this. One mentioned using a card layout but this seems like it would work well if you had just a few screens but not with many

The other was something like removeAll but it not a complete simple example.

Lastly the Kitchen Sink example looks promising but is it really best practices to have 1 large controller like that?

Any help especially a simple working example of using a border layout and switching Add/Detail views and on menu clicks in the center panel with MVC would be greatly appreciated.

Thanks, Dan

existdissolve
26 Apr 2013, 5:04 PM
Using Extjs 4.2

The docs say the many developers use the center panel in border layout to change views or widgets but I am not sure of the best way to do this using MVC in a large application.

2 Goals

1) Changing from a grid view to a details view in the same center panel of the border layout. So a user clicks a row and the view changes to an edit form.

2)Changing the center panel widget when clicking on a menu item

I have read the docs/searched the forums and found little info on how to properly do this. One mentioned using a card layout but this seems like it would work well if you had just a few screens but not with many

The other was something like removeAll but it not a complete simple example.

Lastly the Kitchen Sink example looks promising but is it really best practices to have 1 large controller like that?

Any help especially a simple working example of using a border layout and switching Add/Detail views and on menu clicks in the center panel with MVC would be greatly appreciated.

Thanks, Dan

I do this quite often. What I typically do is to destroy the content of the center panel, and then render the new view (typically another nested border layout, grid, etc.) to the center panel. I do this based on the URL hashbang, so I can re-render the same view if the page is reloaded, as well as support the back/forward button in the browser.

This approach keeps the app light as there is not a lot of unused views floating around.

For detail views, I typically open them in modals. However, you could render a card layout for each "section" of your app to the center panel, and handle it like that. That would prevent you from rendering a ton of views, but allow you to use the card layout.

RE: Kitchen Sink, I'd avoid one large controller. It makes sense for Kitchen Sink (maybe), but trying to manage that for a real app would be a nightmare.

Unfortunately, the only example I have is from an app at work, but I'm happy to help out if you can share some code of what you've tried so far.

Good luck!

delebash
27 Apr 2013, 4:14 AM
Thank you for the info, I like the idea of using a card layout list/edit view for each section that makes sense, and then just remove and add each view. The code I have so far is just my basic border layout and a test to make sure I can get data from my server. My next step is this one of component/navigation, managing the views.

So to go from say Projects grid to Project edit form I can use the card layout. But to change from Projects grid to Company grid ie the sections I can use code like this for a button click in my menu

Ext.suspendLayouts();
center.remove(0);
center.add({
xtype: 'newcmp'
});

Is this correct. I guess I am not sure exactly how to layout the views/controllers, I completed the sample MVC app in the doc, I understand this and it makes sense to me but if you have a small sample demonstrating what you are talking about that would be greatly appreciated.

Thanks, Dan

existdissolve
27 Apr 2013, 5:24 AM
Thank you for the info, I like the idea of using a card layout list/edit view for each section that makes sense, and then just remove and add each view. The code I have so far is just my basic border layout and a test to make sure I can get data from my server. My next step is this one of component/navigation, managing the views.

So to go from say Projects grid to Project edit form I can use the card layout. But to change from Projects grid to Company grid ie the sections I can use code like this for a button click in my menu

Ext.suspendLayouts();
center.remove(0);
center.add({
xtype: 'newcmp'
});

Is this correct. I guess I am not sure exactly how to layout the views/controllers, I completed the sample MVC app in the doc, I understand this and it makes sense to me but if you have a small sample demonstrating what you are talking about that would be greatly appreciated.

Thanks, Dan

Yeah, that's more or less what I do. Be sure that you have the correct autoDestroy config set so the content gets destroyed, and not just removed.

delebash
27 Apr 2013, 5:51 AM
I think I found what I was looking for Ext.ux.Router (https://github.com/brunotavares/Ext.ux.Router), this uses the border layout to switch main views into the center panel in addition to using routing with hashbang, very nice.

It seems to fit well with the MVC framework and looks easy to use, just now digging into it after running the example, but the example is exactly the type of navigation I was looking for. I might try to adjust it to use a card layout when switching views between userlist and useredit, if that seems like you would get better performance but from the demo it seems fast enough so maybe I'll just leave it the way it is just adding/removing all views .

@existdissolve
What do you think?