View Full Version : Redraw entire app/ or panel

30 Nov 2010, 2:08 AM
Would it be possible to have a function to redraw all the component on a panel (or the entire app). I am asking, because I am looking at the best way to accomadate orientationchange. In my app I define widths, heights, visibilities,... based on the orientation (see code). But so far, I haven't found a way to get layout changes without having to program them all (.setWidth, .setHeight, .setVisible,...).

width: Ext.orientation == 'landscape' ? 200:50

30 Nov 2010, 2:50 AM
That's the whole point of the layout system. When you change the dimensions on one container, it will cascade down.

3 Dec 2010, 9:05 PM
Evant, then there's something I'm missing completely, because I can't put the layout system to cascade nowhere.
Have an app with Ext.Setup. There's a main panel and four docked panels, all styled and with images. The main panel has layout vbox, the subpanels have layout hbox and one of them has a card layout.

I turn my iphone and everything turn to chaos. Is there a consistent example of a orientationchange event going smoothly? Because each of the topics on this forum in this subject present a distinct solution, and it seems no one works in the end.

How can I change the background image of a toolbar upon orientationchange?
How can I rescale the screen properly? I tried ommiting the height/width in my panels to no avail.
Is there a consistent example anywhere to look?
I purchased a commercial license for Sencha but, frankly, these so many open issues are starting to lessen my enthusiasm.

Any ideas?

4 Dec 2010, 1:29 AM
It sounds to me as if you are overcomplicating it yourself and causing your own problems.

The concept is exceedingly simple.

A Container contains Components.

The Container must be configured with a layout which arranges these components according to your design.

If you do not decide how this layout is to be done, but just throw Components into the Container without thought, then you will end up in trouble.

So first, decide how you want the layout to behave.

When you have done this, everything Just Works.

4 Dec 2010, 4:57 AM
Hi Animal,

Of course I see your point, and you're completely right when you say one can easily overcomplicate oneself in using componentized behavior. However, if you double check my comments, you will see every component in the layout is a vbox layout, except for one, which needs to have card layout behavior (switching cards and setting an active item), which is unique to card layout.

So, the layout is vbox:

TOP-PANEL --- vbox
CONTENT PANEL ---- this one is card layout I might want to switch cards back and forth

Now, are you saying this is overcomplication for Sencha? I had to assume it's not, for faith on you guys and lack of more extensive docs and examples.
If that is so, what would be a suitable solution for this kind of behavior?
I don't see in the docs the one single component to solve this. So I have to arrange a bunch.

Or is it the case to use only card layout?

I am asking because there are few references.

What I want is exactly the Just Works thing, no doubt!!

Thanks for any support and for your remarks man,


4 Dec 2010, 5:59 AM
But I assume you've configured the vbox layout with stretch:true, so you only need to set a height on the top, indicator and status panel and no width at all.

So which width are you trying to change here?

4 Dec 2010, 6:56 AM
Hi Condor,

Thanks for joining.

Yes, that's true. I've initially set the height (both in init config and then with setHeight in a orientationchange, and no width. However, the width doesn't change. When I go from portrait (w=320) into landscape (w=480), the indicator panel (which is text) and content panel (the card layout) both stretch. The title panel and the status (both with background images) just don't. Then I tried the same proc for width as I've done for height, to no avail.

The image is set in the TOP-PANEL as background. The image in the STATUS-PANEL is set as content update with the update() method (because the status changes). Both panels have also styleHtmlContents set to true.

I'm a pure Sencha user, didn't use ExtJS before (really considering to, though). I saw in many discussions and a screencast about layouts the use of config option FLEX. As precaution (after watching the screencast, if memory serves me), I've set FLEX to 1 in all the panels, but found no reference about it in the Sencha API docs.


4 Dec 2010, 2:06 PM
This is for an iPad I assume. A 4 box vbox wouldn't really work on a phone.

4 Dec 2010, 2:08 PM
From the fine VboxLayout API docs: "This layout optionally divides available vertical space between child items containing a numeric flex configuration. The flex option is a ratio that distributes height after any items with explicit heights have been accounted for."

4 Dec 2010, 4:37 PM
No, it was meant for an iPhone. So, the layout engine has problems with orientation events on a multiple vbox conf?
Because other than that it seems to be working fine.

Hum, so FLEX and HEIGHT are kind of conflicting options aren't they? One pulls for a proportionality and the other for literal values.

Well, anyway, it'll force me into some rethinking.

Thanks for the pointers, Animal.

4 Dec 2010, 11:48 PM
Yes, flex and height request different things.

Height sets the absolute height, flex requests that the owning layout manager allocates a proportion of the dimension it is managing (Hbox, or Vbox)

Then the layout option align tells the layout manager how to arrange the opposite dimension. So usually "stretch" is the best so that vertically layed out boxes all take up full width.

Having said this, I think that you might need to rethink your mobile app's design from a mobile user's perspective.

A desktop web app might benefit from a complex layout structure arranged down the page which offers different functionality in each Panel.

But a phone app won't be easy to use like this. Phone apps have simple, large grained options which are generally navigated to using a card layout: The ubiquitous sliding transition.

It is of course possible to use a complex layout to chop up a phones screen as small as you want. I just think that your users won't like it.

5 Dec 2010, 12:39 AM
Hum! Got it, quite interesting. For one thing I was using both in all the panels. Corrected now.

Well, I've been writing mobile apps for screens much smaller than iPhone's 320x480 px for a while now, and given the quality of the graphics, it seems like a playground to me! :-)

Of course there's a limit to what kind of complexity you squeeze into a 128x160 pix screen, no doubt on that. I tend to agree with you on the simplicity of things, but sometimes all you want from a status panel is that it shows a status, like a green circle with a 'ok'. It won't require much updating from the phone, and it is a shockingly powerful information conveyor.

In my case the action takes place in a contents panel. The contents panel has to do true magic. The other panels serve as intelligent decorators, more than any else. They're the beauty assistant besides the magician: her work is... to be seen.

The rethinking I mentioned was perfecting the relationship of the panels with the main container more than killing this or that one. Then playing more with XTemplates. It just occurred me XTemplates can give some good help on this. What do you think?


5 Dec 2010, 1:49 AM
XTemplates are a very powerful way of creating decorated data.

They can produce complex, repeated DOM structures which contain complex, repeating data items.

For example the List class produces the entire list structure using a simple template who's internal structure specifies a loop over an Array of data, and repeats a single nested Template for each item.

To get the hang of XTemplates, run ExtJS 3.3.3 up in desktop Firefox, and play with the class on the Firebug console. It's very powerful.