PDA

View Full Version : FormPanel having TabPanel, deferredRender weird behavior



tapani108
19 Jan 2009, 4:12 AM
Hello,

I am attempting to have a FormPanel as one item inside a TabPanel. This formpanel in turn should have another TabPanel, which has 3 or more tabs. So the form fields would be divided into 3 tabs. The form would still have one submit button (and validation) for the whole form. See attached screenshot of what it looks like at the moment.

The idea is to have forms made entirely out of ExtJS components: fieldsets for dividing the fields within the FormPanel tab panels

This seems to works strangely at the moment:

only the tab inside the form which I set as activeItem renders the components inside the tab correctly. The other tabs don't seem to render. I tried deferredRender="true" for the TabPanel which is inside the form, but that does not seem to help the non-active panels. See the screenshot
elementEditor.form.reset() works (at least for the fields that are shown), but elementEditor.form.submit() causes this error: "elementEditor.form.submit()" is not a function. Strange, because reset does work. Indeed, setting a breakpoint and looking at elementEditor.form, it does not seem to contain the submit() function at all.
Here's the code after the usual CSS and JS includes:

[CODE]
<script>
Ext.QuickTips.init();



Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
</script>



<div class="x-hide-display" id="northPanelEl">
<table>
<tr>
<td><h1 style="margin: 0; padding: 0 15px 0 0">Visit&reg;Soft</h1></td>
<td valign="middle" style="font-size: 11px">Logged in as Service Demo&nbsp;<a href="logout.jsp">Log out</a></td>
</tr>
</table>
</div>
<div class="x-hide-display" id="westPanelEl"></div>
<div class="x-hide-display" id="centerPanelEl">
<div class="x-hide-display" id="welcomeTabEl">
<h1>Welcome to the VisitSoft administration interface.</h1>
<p>You can do different things here.</p>
<p><b>If you want, you can close this tab by clicking the tab's X in the top right corner.</b></p>
</div>
<div class="x-hide-display" id="logEditGeneralInfoEl">
</div>
<div class="x-hide-display" id="logEditConnectionsEl">
</div>
<div class="x-hide-display" id="logEditMiscellaneousEl">
<h1>Misc</h1>
</div>
<div class="x-hide-display" id="rawDataEditorEl"></div>
<div class="x-hide-display" id="downloadQueueEl">
<h1>jotain teksti

Animal
19 Jan 2009, 4:29 AM
Two Ext.onReady calls? Why?

Why are you using contentEl?

tapani108
19 Jan 2009, 4:37 AM
Two Ext.onReady calls? Why?

Well, I forgot to mention that I have taken an oath to try using the ExtTLD taglib for creating this app. Albeit being a nice taglib, it has a few quirks like those onReady calls, and their user forum on code.google.com sucks. Nevertheless, the code it basically generates is ExtJs. I don't really know whether there is a better JSP taglib available. In case there is, please point me in the direction of one, or tell me to create my own taglib, which is of course an investment in itself.


Why are you using contentEl?As for using contentEl, apart from being the ExtTLD-generated code I mentioned above, I thought that was the only way to create those layouts and tabs. Is there a smarter way of doing that? Then of course, I have some functionality for this app (see the download queue and raw data editor in the screenshot) that I load from external jsp files at the moment, because they use functionality of which a lot is custom-made previously and would take a while to port to ExtJs.

tapani108
19 Jan 2009, 4:51 AM
Animal,

Forgive me for my ignorance, as I obviously have not done my homework on rendering content to Panels (http://extjs.com/learn/Ext_FAQ_layout#What_is_difference_between_contentEl.2C_applyTo_and_renderTo.3F). I will attempt to use layoutOnTabChange : true as well as check which way would be the best way to go about creating the forms.

/T

Animal
19 Jan 2009, 5:27 AM
You don't need any HTML content at all to use Ext. I don't know about ExtTld. I start with a completely empty <body>

tapani108
19 Jan 2009, 5:45 AM
You don't need any HTML content at all to use Ext. I start with a completely empty <body>

Yes, I have understood the three main principles of rendering content to Panels. You render directly to document.body I presume?


I don't know about ExtTld.

Well, you probably mean that you have not used ExtTLD, but you must have heard about it. Some guy decided to take Ext 2.0 and bake it into a taglib for ease of use (http://www.exttld.com/). The taglib covers most functionality, and the tags themselves are nicely documented. At least Eclipse treats them nicely, giving plenty of tag attribute suggestions and help docs on each tag.

However, the ExtTLD user forum (http://code.google.com/p/exttld/issues/list) (or whatever that list of messages represents) is not that active so it seems. So, each and every ExtTLD user is left mostly to their own ways and skills to solve any problems regarding that taglib. Mind you, it does work nicely out of the box, and even with preliminary taglib skills like mine it's rather easy to dig into the tags and make changes accordingly.

The previous problem solved btw. I did a classic mistake and didn't set layoutOnTabChange="true" to the TabPanels.

That leaves me with the form submit problem: that still does not work. I have the form, elementEditor.form.reset() works (aamof on all tabs inside the form all fields get reset), but elementEditor.form.submit() does not work, and returns "is not a function"? What can I possibly be missing there?

Thank you for your time and quick answers!

/T

Animal
19 Jan 2009, 6:18 AM
No. Never Render. Use a Viewport to encapsulate the document body, and from then on yuo simply add Components to Containers.

tapani108
19 Jan 2009, 6:26 AM
No. Never Render. Use a Viewport to encapsulate the document body, and from then on yuo simply add Components to Containers.

Right, I meant adding instead of rendering as you corrected. Are there issues with the rendering approach, or is it a question of personal preference?

/T

mjlecomte
19 Jan 2009, 6:34 AM
When you render you lose the benefit of containers knowing about their child items. When you add the items to a container, now Ext can manage resizing them, destroying them when the parent is destroyed, things like that.

tapani108
19 Jan 2009, 9:53 AM
When you add the items to a container, now Ext can manage resizing them, destroying them when the parent is destroyed, things like that.

Just to clear this up: by "container" you mean ViewPort (http://extjs.com/learn/Ext_2_Overview#Viewport) in most cases? I've done that. By "adding items" you mean first adding a layout (http://extjs.com/learn/Ext_2_Overview#Layout_Managers) according to need? I thought I've done that.

Can you please clarify how the approach you have described is different from the one in the code at the top of this post? We've just made the decision to rebuild a part of our app entirely in Ext (including form functionality), so I'm still scouting around for best practices on that.

mjlecomte
19 Jan 2009, 10:03 AM
I won't try to imply I know best practice. I follow a regiment similar to Animal though in that I like to have empty <body /> tags on my page.

So I'm not limiting myself to the only container being the viewport. When I said container, I meant any class descending from Container pretty much.

tapani108
19 Jan 2009, 10:27 AM
Ok. And when you were talking about rendering:


When you render you lose the benefit of containers knowing about their child items.

By rendering you meant creating a div with some content, and then assigning that as the contentEl of a component? I am still trying to figure out the benefits of these three approaches. (http://extjs.com/learn/Ext_FAQ_layout#What_is_difference_between_contentEl.2C_applyTo_and_renderTo.3F)