PDA

View Full Version : Error Msg doesnt Display in right Place :-(



DeDarling
6 Jan 2011, 7:53 AM
Hi there,

i have some Textfields with min-max length etc...

Now i will show the Error Msg under the textbox ...

But when i try it with msgTarget: 'under' the Error Msg is an normal windows popup ... without msgTarget: 'under' it works as popup ...
what do i wrong ?


Ext.onReady(function(){
Ext.QuickTips.init();

// Create a variable to hold our EXT Form Panel.

// Assign various config options as seen.
var login = new Ext.FormPanel({
url:'testemich',

defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.

items:[{
name:'loginname',
allowBlank: false,
minLength: 6,
maxLength: 30,
minLengthText: 'Login Name muss mindestens 6 Zeichen beinhalten.',
maxLengthText: 'Login Name darf nicht lšnger als 30 Zeichen sein.',
msgTarget : 'under',
renderTo:'field1',
width: 200
},{
name:'email1',
allowBlank:false,
renderTo:'field3',
width: 200
},{
name:'email2',
allowBlank:false,
renderTo:'field4',
width: 200

},{
name:'password',
inputType:'password',
allowBlank:false,
renderTo: 'field2',
width: 200
}],

// All the magic happens after the user clicks the button
buttons:[{

text:'Register',
formBind: true,
renderTo: 'submitBtn',
// Function that fires when user clicks the button
handler:function(){
login.getForm().submit({

method:'POST',

// Functions that fire (success or failure) when the server responds.
// The server would actually respond with valid JSON,
// something like: response.write "{ success: true}" or

// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
// depending on the logic contained within your server script.
// If a success occurs, the user is notified with an alert messagebox,

// and when they click "OK", they are redirected to whatever page
// you define as redirect.

success:function(){
Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){

if (btn == 'ok'){
window.location = 'main.action';
}
});

},

// Failure function, see comment above re: success and failure.
// You can see here, if login fails, it throws a messagebox
// at the user telling him / her as much.

failure:function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);

Ext.Msg.alert('Login Failed!', obj.errors.reason);
}else{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);

}
login.getForm().reset();
}

});
}
}]
});

});

HTML Code


<label id="field1-label" class="qo-abs-position" accesskey="f" for="field1"><span class="key">L</span>ogin Name</label>
<div class="qo-abs-position" type="text" name="field1" id="field1"></div>

<label id="field3-label" class="qo-abs-position" accesskey="e" for="field3"><span class="key">E</span>mail Address</label>
<div class="qo-abs-position" type="text" name="field3" id="field3"></div>

<label id="field2-label" class="qo-abs-position" accesskey="l" for="field2"><span class="key">P</span>assword</label>
<div class="qo-abs-position" type="text" name="field2" id="field2"></div>

<label id="field4-label" class="qo-abs-position" accesskey="v" for="field4"><span class="key">V</span>erify Email</label>
<div class="qo-abs-position" type="text" name="field4" id="field4"></div>

<div id="submitBtn" class="qo-submit qo-abs-position" type="image" src="resources/images/s.gif"></div>

DeDarling
6 Jan 2011, 10:54 PM
No one an answer ? :-(

vishalnnsingh
7 Jan 2011, 12:04 AM
Why are you rendering all your items (textfields) individually, instead just render your formpanel.
I hope it will solve your problem

DeDarling
7 Jan 2011, 1:29 AM
Hi,

because didnt want the formpanel design from extjs ...

i would choose the Position for the textfields by myself ...

Condor
7 Jan 2011, 1:45 AM
The error message can only display correctly if the container is position:'relative', which a FormLayout would add automatically.

ps. There is really no need to render to existing markup. You can specify 'x' and 'y' for every field if you want a different layout!