PDA

View Full Version : Form fields not rendering properly, deferredRender is false



bbxx
29 Oct 2009, 9:16 PM
I have a tab panel which I needed to set deferredRender: false, because I have a form which needs to have access to fields within the TabPanel. Problem is that now the fields and a grid on the tabpanel are not rendering properly now:

http://teikena.com/temp/render_problem.png

In the above shot, the grid is supposed to fill the width, and autoexpand the system fields column. The drop down box is also not as wide as it should be when you click on it - it appears to be cut off.

Anyone know what I am doing wrong? The rendering was fine before I set it to not defer the rendering.

aw1zard2
29 Oct 2009, 9:49 PM
Try forceLayout: true, for the tabpanel.

http://www.extjs.com/deploy/ext-3.0.0/docs/?class=Ext.Container&member=forceLayout (http://www.extjs.com/forum/../deploy/ext-3.0.0/docs/?class=Ext.Container&member=forceLayout)
(http://www.extjs.com/forum/../deploy/dev/docs/source/?class=Container&member=forceLayout)

Animal
30 Oct 2009, 12:19 AM
child items of a TabPanel should be configured with hideMode: 'offsets'

Looks like you've overnested a bit there. In Panels too. I see some border cruft building up which is what you get if you don't think about things.

bbxx
30 Oct 2009, 8:19 AM
child items of a TabPanel should be configured with hideMode: 'offsets'

Looks like you've overnested a bit there. In Panels too. I see some border cruft building up which is what you get if you don't think about things.

No, it's just the frame:true. I like the effect on my panels. I set frame:false, and added a background color to match the blue, but there must be other things the frame option does. When I just did the background color, other things in my form did not look right in the subitems such as grids and trees.

Animal
30 Oct 2009, 8:45 AM
And your ComboBox's dropdown?

That's your main issue. Colours are surely the very last thing to think about and completely up to any CSS you may add in your stylesheet!

SimonSimCity
5 Jan 2010, 2:46 AM
I know - the last post is long ago - but I want to give an answer to Animal ...

Animal solves the DropDown-Problem

child items of a TabPanel should be configured with hideMode: 'offsets'

aw1zard2 solves another problem that comes up with Animals solution: With this you prevent a jump if you scroll down into the tabPannel and than click on an inactive tab.

Try forceLayout: true, for the tabpanel.

Thanks, Animal and aw1zard2

If anyone want's to know:
The combination was the solution for the problem in my case ...

Here an example for those who don't want to search as long as I did ;)


var tabs = new Ext.TabPanel({
/* ... here's your config ... */
forceLayout: true,
items: [{
title: 'Tab 1',
hideMode: 'offsets',
items: [{
/* ... your form-elements ... */
}]
},{
title: 'Tab 2',
hideMode: 'offsets',
items: [{
/* ... your form-elements ... */
}]
}]
});

This is an modified example I copied from the Ext3.1 API

SimonSimCity
8 Jan 2010, 12:10 AM
Hi, all

Another problem occured ...

Pleace view this example to understand my problem - I can't describe it ...
I've placed an image as attachment to this post for all who don't have the time to try the example ...
At my Screenshot there's an empty space of 123px between the tab-panel-navigation and the tab-panel-body

Example:

var test = new Ext.TabPanel({
autoHeight:true,

/**
* only fields of an active tab are submitted
* if the following line is not present
*/
deferredRender:false,
forceLayout: true,

activeTab: 1,
defaults: {
hideMode: 'offsets',
},
items:[{
title: '+',
disabled: true,
items: [
new Ext.form.FieldSet({
title: 'MySubForm',

items: [
new Ext.form.NumberField({ fieldLabel: 'Test1' }),
new Ext.form.NumberField({ fieldLabel: 'Test2' }),
new Ext.form.NumberField({ fieldLabel: 'Test3' })
]
})
]

}, {
title: '5502',
disabled: false,
items: [
new Ext.form.FieldSet({
title: 'MySubForm',

items: [
new Ext.grid.GridPanel({
title: "MyGrid",
store: ['asdf', 'asdf'],
columns: [
{ header: "Col A", dataIndex: "a" },
{ header: "Col B", dataIndex: "b" },
{ header: "Col C", dataIndex: "c" },
{ header: "Col D", dataIndex: "d" },
{ header: "Col E", dataIndex: "e" }
]
})
]
})
]
}]
});

Pleace don't say that I don't declare the grid-store correctly - I know ... I want to point out another mistake concerning the tabPanel.

In my case the first tab-element has the following CSS-Classes:
x-panel x-panel-noborder x-masked-relative x-masked x-hide-offsets
and this must not be!
pleace look at the css:

.x-masked-relative {
position: relative !important;
}

.x-hidden, .x-hide-offsets {
position:absolute !important;
left:-10000px;
top:-10000px;
visibility:hidden;
}

and as you see this element will get the following css out of this declaration:

{
position: relative;
left:-10000px;
top:-10000px;
visibility:hidden;
}

I hope you can understand my problem and can understand why the browser shows it like this ...

But I have to use the hideMode to fix this problem ... :((

EDIT:
Is this bug/feature xD still fixed in the Ext 3.0.1 ?
I'm still working with 3.0.0 because I don't want to switch - I haven't found the time to switch and test all functions I use ...