PDA

View Full Version : Absolute Layout and invalid icon



couetbis
30 Apr 2010, 1:41 AM
Hi,
I have a form with absolute layout. In form, a field have allowblank to false. With this layout, no icon appear when field is in error.

I use Ext-Js Sample


Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

Ext.onReady(function() {
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
layout:'absolute',
url:'save-form.php',
defaultType: 'textfield',

items: [{
x: 0,
y: 5,
xtype:'label',
text: 'Send To:'
},{
x: 60,
y: 0,
name: 'to',
allowBlank: false,
anchor:'80%' // anchor width by percentage
},{
x: 0,
y: 35,
xtype:'label',
text: 'Subject:'
},{
x: 60,
y: 30,
name: 'subject',
anchor: '100%' // anchor width by percentage
},{
x:0,
y: 60,
xtype: 'textarea',
name: 'msg',
anchor: '100% 100%' // anchor width and height
}]
});

var window = new Ext.Window({
title: 'Resize Me',
width: 500,
height:300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: form,

buttons: [{
text: 'Send'
},{
text: 'Cancel'
}]
});

window.show();
});

The render is in attachment.
Is it the default behaviour ? If not, how to configure code to show error icon ?

LostSoul
30 Apr 2010, 1:14 PM
try this:

add Ext.form.Field.prototype.msgTarget = 'under'; under your Ext.QuickTips.init()

then in your textfield add invalidText:'this field value is invalid'

couetbis
1 Jun 2010, 12:54 AM
It's the same problem. There is no icon.
I just want to know if it's the default behaviour or if it's a bad use.

antonye
12 Jul 2010, 3:20 AM
I've just had a similar problem - I managed to figure out that it was the width of the outer DIV which was stopping the icon from being visible. You may want to debug using Firefox/Firebug (or similar) and look through the generated html to see if the icon is being drawn, but is hidden from view because of the size/layout.

HTH.

Condor
12 Jul 2010, 3:41 AM
That's why I recommend using anchor:'-25' on the fields to save room for the error icon.

But the OP is using anchor:'80%', which should have been enough in his case. He is however calling QuickTips.init outsize of Ext.onReady, which is wrong.

antonye
12 Jul 2010, 4:34 AM
He is however calling QuickTips.init outsize of Ext.onReady, which is wrong.

Well in my case I'm calling QuickTips.init as the first thing in Ext.onReady and still have the problem!

Condor
12 Jul 2010, 4:42 AM
Can you post a working testcase?

antonye
12 Jul 2010, 4:44 AM
Can you post a working testcase?

Possibly, but to be honest it's amongst a whole load of files and code that cutting it out to make a useful testcase will take too much time that I don't have right now! Maybe when this project finishes... too many other bugs to fix!

aliasneo
12 Jul 2010, 10:36 AM
I encountered the same issue ...it appears the quicktip shows only when the field's container layout is set to FORM. Anything else (absolute, column, etc.) the quicktip red icon does not show. Curiously the Ext.form.ComboBox works fine in all cases, but Ext.form.TextField does not.