PDA

View Full Version : Forcing a FormPanel under a fixed div?



AnotherHowie
6 Aug 2009, 3:17 AM
I have a layout for a database page where I have a fixed div at the top of the screen, and then a scrollable bit below with a large margin-top, containing an ext FormPanel. It all renders OK, but when you scroll down the form, the controls and their labels go over the top of the fixed div, rather than below.

Ordinary HTML <input> tags go below the navigation panel, correctly.

I've tried setting the fixed divs z-index to high (30000, 60000), and no change.

Looking at one of the controls in firebug, I don't see any z-index set anywhere in the inheritance chain, though.

Help!

6 Aug 2009, 3:26 AM
You want help? code? publically available demo?

AnotherHowie
6 Aug 2009, 3:36 AM
Fair enough :-) I was hoping it might be a simple "you just need to X", but I'll trim down my page to a sample with the same problem.

6 Aug 2009, 3:37 AM
hard to tell dude. We know nothing of your code and implementation. :(

Animal
6 Aug 2009, 3:40 AM
Sounds like you just need a Viewport with layout: 'border' and a north and center region.

AnotherHowie
6 Aug 2009, 4:05 AM
Here we go... Here's a chopped-up example of my problem: http://wotsit.thingy.com/extjs-z-index-problem/

The labels, fieldset box and text fields go 'above' the red area, while the normal HTML field, text, and extjs buttons go underneath.

6 Aug 2009, 4:09 AM
just playing with firebug: http://tdg-i.com/img/screencasts/2009-08-06_0809.swf

Animal
6 Aug 2009, 4:12 AM
Use a Viewport.



Ext.onReady(function() {
var myForm;

new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
el: 'fixedpart', // use existing element
height: 198
}, myForm = new Ext.form.FormPanel({
region: 'center',
items: [
// your inputs
]
}]
});
});

AnotherHowie
6 Aug 2009, 4:18 AM
Huh. Thank you very much!

I don't fully understand why changing the inner divs isn't enough, but a fix is a fix.

Thanks once again - much appreciated.

Animal
6 Aug 2009, 4:24 AM
You're heading for horror if you try to create a RIA without using a Viewport.

6 Aug 2009, 4:25 AM
You're heading for horror if you try to create a full blown RIA with Ext JS without using a Viewport.

Fixed ;)

6 Aug 2009, 4:26 AM
Btw, for what it's worth, I agree with Nige on this. You will save yourself much headache if you do it with viewport. Think about it for a moment. the area with the HTML and javascript (below the north region) has to be much larger than it really need to be to compensate for that 'fixed' div above. :(

AnotherHowie
6 Aug 2009, 4:52 AM
Btw, for what it's worth, I agree with Nige on this. You will save yourself much headache if you do it with viewport. Think about it for a moment. the area with the HTML and javascript (below the north region) has to be much larger than it really need to be to compensate for that 'fixed' div above. :(

It's something I'm kind of torn on. I am in the process of refreshing a rather ancient app that predates me at my company, the present version of which is a mass of nested frames and static forms. I'm aiming to get the forms from a database-driven schema (which is working) and a cleaner layout (no really, you should see the existing one :-) ). At the moment, the result will still be a 'web 1.0' app - I'm just using Ext to render nicer forms and give me client-side validation before submitting to the existing update/insert handling code. I can see a future where I will use more of Ext though.

The actual layout, with the large top navigation does make sense in this particular case, as it retains the context that the current frames layout does in a more compact fashion. The 'per-customer nav' is essentially a tab bar with a tab per service. The one below that is a toolbar with actions for the instance/installation of the service currently showing (e.g. cancel, upgrade). It does all need to be there, really. When I had previously looked into using the border viewport I hadn't realised I could skip the extra decoration though, so I will give that a try now.

Thanks to you both for the guidance.