PDA

View Full Version : Component life cycle/layout question



re_buchanan
11 Aug 2010, 5:39 AM
I am implementing a very complex panel layout, complex enough that using "nested" Ext layouts to get the required appearance results in very poor performance (by nested I mean 'table' layouts containing more 'column' or 'table' layouts). I've been able to improve the performance considerably by defining the structure in 'boiler-plate' html on the panel and then adding my components into the html via the components' "applyTo" config option.

Because I'm not adding my components via the "items" config option, I assume that the panel's layout manager will know nothing about them and I will need to manually destroy the components when my panel is destroyed.

Is this a correct assumption?

Any suggestions for a better approach to implementing a very complex layout? (I had considered building a one-off layout manager for this panel, but I'm not sure where to start with that and it seems like massive overkill. I also contemplated using some sort of template, but figured the hacking need to put components into it would be worse than the original problem)

Thanks

Animal
11 Aug 2010, 6:34 AM
I suspect you are overnesting.

Just how complex is it?

re_buchanan
11 Aug 2010, 6:50 AM
the bit with the red box around it is what I'm working on right now

Animal
11 Aug 2010, 7:12 AM
You clicked on that?

Maybe I'm just getting old, but it's just a little blur.

re_buchanan
11 Aug 2010, 8:44 AM
I'm bumping up against the limits imposed by the forum on image dimensions - I didn't expect you to really be able to read, just get an idea of the complexity of the screen

here's another attempt:

Animal
11 Aug 2010, 9:21 AM
That looks like a very simple little layout.

This is a little more complex.

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/cargoDetails.jpg

Then there's

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/complex-form.jpg

((((photobucket.com)))

re_buchanan
11 Aug 2010, 9:32 AM
That looks like a very simple little layout.

Nice bit of condescension, Animal. You are well and truly a credit to the community. Now if you don't have something useful to contribute, please f*ck off.

Animal
11 Aug 2010, 9:45 AM
That's fine. If you don't want any help, that's just great. I actually have lots of other stuff to do. have fun.

re_buchanan
11 Aug 2010, 10:06 AM
I would have very much appreciated help, but you didn't seem to be offering help just the condescension you always provide in nearly every post I've ever seen from you (and by the way just because your layout has bunch of stuff in it doesn't mean it's complex and yours seems to be composed of nothing more than a very large collection of very standard ExtJS components.)

Also, just what is a member of the "Community Support Team"? Are you an actual paid employee of Sencha? Or is it just an "honor" bestowed on those who post a whole bunch?

arthurakay
11 Aug 2010, 11:02 AM
Any suggestions for a better approach to implementing a very complex layout?

In situations like this, I would usually recommend that you build a series of ExtJS extensions - classes inheriting from Panel, Container, etc. You would be nesting containers, but if done appropriately the performance shouldn't be noticeably affected. Using xtypes should help as well.

If you would rather avoid nesting as much as possible, another approach might be to build some sort of XTemplate in the parent container and render the children widgets as needed. I believe you would have to manually manage the destruction of the children items when the parent container is destroyed, but it is an option. I personally don't like this approach - but it sounds like you're basically doing the same thing.

Animal does have a point in saying that you layout doesn't appear to be *that* complicated - and if your application was experiencing poor JS performance then I would also imagine you were either over-nesting components or writing terribly inefficient code.

re_buchanan
11 Aug 2010, 12:21 PM
I believe you would have to manually manage the destruction of the children items when the parent container is destroyed ...

Thank you Art. That is the type of reply for which I was hoping.


I would usually recommend that you build a series of ExtJS extensions

That is the basic approach that we are taking with our application. The bit of the layout I was asking about is itself such an extension of the Panel component. And it contains some extensions (the calendar and the rating/info widget to the right of the top leftmost textfield in the body). I wouldn't imagine that there was any benefit in doing extensions any deeper than that as the rest is just containers to layout standard Ext components.


Animal does have a point in saying that you layout doesn't appear to be *that* complicated

I don't suppose it is, but given that there's rarely a layout discussion on this forum that doesn't result in the accusation of "over-nesting", I might have over stated it's complexity (from the discussions here it seems anything more complicated than what is provide for by the standard layouts is "too" complicated.) And it is complicated enough that it will require some nesting of containers. If I were to use HTML tables to lay it out it would look something like this (actually a bit more complicated than the image as there are some things not represented there):


<table>
<tr>
<td>
<table>
<tr>
<td>quantity</td> <!-- the content of this <td/> needs layout as well -->
<td>rating widget</td> <!-- the content of this <td/> needs layout as well -->
<td>product info</td> <!-- the content of this <td/> needs layout as well -->
<td>cost info</td> <!-- the content of this <td/> needs layout as well -->
</tr>
</table>
</td>
<td rowspan="2">
calendar
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>source problem indicator</td>
<td>sourced to</td>
<td>due date problem indicator</td>
<td>due date</td> <!-- the content of this <td/> needs layout as well -->
<td>shipping problem indicator</td>
<td>shipping</td> <!-- the content of this <td/> needs layout as well -->
<td>fob</td> <!-- the content of this <td/> needs layout as well -->
</tr>
</table>
</td>
</tr>
</table>


if your application was experiencing poor JS performance then I would also imagine you were either over-nesting components or writing terribly inefficient code

I suppose "poor performance" is a relative thing. With my original nested version of this panel, it was taking approx 1 sec to render each one. Not bad in and of itself, but there may be as many as 30 of the things on a particular page. My hacked together non-nested version is taking about .6 sec to render. Even with as few as 10 of them, we're talking 10 sec. vs 6 sec. and that's a pretty big difference, if you're concerned about usability.

Thanks again for a helpful reply (and any further comments/suggestions you might have.)