Messy Layouts

[dimitrij.zub]

Hi everyone.

I have kind of a complex layout which is randomly rendered as a mess. So the fields move, are too big and so on. And as well randomly the field looks just perfect!

Does anybody have any idea what the problem might be?

[Animal]

Sorry, my crystal ball is at home right now.

In the absence of that, and in the same vein as your posting, I'd say the answer is: You've done something wrong.

[dimitrij.zub]

OK so no obvious reason :)

Lets see:

I am adding a custom panel to a tab pane.

Upon this adding it gets layouted kinda messy.

I am attaching the files below which are doing the jobs.

See the messy1, messy2 and fine.jpgs

I have the feeling that i am doing something wrong in the design of how the components should work, as I am not a JavaScript extpert.

Some help on making the beheviour of ExtJS deterministic would be highly appriciated.

[Animal]

It looks OK at first glance.

One thing I noticed:



_tab_panel.insert(0, _panel).show();


You don't get to show the items in a multi-child Container. You ask the Container to show the one you want. Use setActiveItem. And configure your TabPanel with layoutOnTabChange:true

[dimitrij.zub]

Done that. Still the problem persists.

The funny thing is, that it DOES render the tab sometimes just perfect. But if I close it and open it again, is MIGHT be messed up.

As well I have a lot of strange behavior going on in my project like some elements are not shown if i remove some lines of text and so on.

But back to the basic problem and maybe some best practice. ...

I am building the portal in panel objects all should behave independent what shall I do to have the most independend structure with JS/ExtJS?

I have the feeling that it just sucks at a lot of spaces and depends on a lot of factors how the whole thing is behaving and its slipping out of controll some how :(

I did the blog 'Writing big application with Ext' and followed the guidlines but still i feel like im running into some mess the bigger the project will get :(

[Animal]

"Close it and open it."?

Does it get destroyed, and recreated?

It would be easier to see what was going on if you could post a link to a live page.

[dimitrij.zub]

I cant provide a live page now as I have no access to the router here :(

Close it means:

I close it on the panel (Click on the x)

Open it means: It gets recreated. (See Actions...)

Funny thing i just discovered:

If i add another panel with fields and then add the EditAccountPanel the chance to have a messed up layout is much higher. (See Actions -> password_panel)

[Animal]

You are hardcoding an ID into a class definition. Classes are reusable, but IDs must be unique:



Ext.rt.EditAccountPanel = Ext.extend(Ext.form.FormPanel, {
id: 'Ext.rt.EditAccountPanel', <-- bad

[dimitrij.zub]

I did this i.o. to find the class later in the management (s. Actions) -> tab.activate.

You have an idea of how to manage this otherwise?

[dimitrij.zub]

Tried removing ids from everywhere. Still random layout problems. :-?

[Animal]

I did this i.o. to find the class later in the management (s. Actions) -> tab.activate.

You have an idea of how to manage this otherwise?


?

[dimitrij.zub]

More information on the problem:

The messy layouts are normaly due to random fields of the form being set too big. Again completely random.

[dimitrij.zub]

?
I also need ids i.o. to make IE work at all :( If there are no ids in the forms or whatsoever IE completely ****s up everything in a layout.

Man this is starting to get damn annoying with ExtJS.

[Animal]

You must have some weird code to get all that.

IDs are generated uniquely for all Components. You don't have to specify one.

[dimitrij.zub]

Thats exactly what im thinking. There is a lot of onReady function ****.

I have added now Math.random explecitely to all components im am using and the problem is gone..

So that brings me to another problem:

How to 'merge' all the 6 files that i have in an intelligent way? I mean:

Menu.js -> Building the menu
Page.js -> Building the page etc..

All have an onready function. Might this be the mess?

[Animal]

It's not necessary. It's only needed in the main application. These files don't all just go off and do stuff do they? They contain classes which are used by the application, so surely there's nothing to put onReady around?

[dimitrij.zub]

Well..

The problem is that the menu is part of a template and therefor all the other files dont know about it.

So the menu definitly needs a onReady to render itself. For all the other pages ure right. I have the strong feeling that more then one onReady is really not good.

Can you help me understand how ExtJS is creating the view by pointing to some architecture description of the framework?

[Animal]

What the menu is static HTML?

[Animal]

There's no huge mystery. Ext just creates DIVs.

[dimitrij.zub]

Menu: attached.

[Animal]

DO NOT EVER RENDER!

Use a Viewport to encapsulate the whole document body in a Container, and from then on, just add Components to Containers

No wonder the layout gets messy if you render.