N00b needs help with 'action.result.msg'

[BlueNC]

Ok,
This seems to be a trivial problem but I am brand new to EXTJS and I can't figure that out.
Instead of having the Server Response displayed in a Message Box like:
Ext.MessageBox.alert('Failure', action.result.msg); I would like to display the Message into a div underneath the form.
All I got so far is:

var msgField = Ext.get('frmMsgs');
msgField.innerHtml = action.result.msg;

I know I am making something wrong, I just do not know what, even firbug does not help much.

Thanks for your help in advance.

[Animal]

Where is that code? When you stop at that line in Firebug, what does "action" contain?

[BlueNC]

What I am trying to accomplish is a very simple login:

the HTML is:

...
<div id="center">
<div id="formContent">
<div class="x-box-tl">
<div class="x-box-tr">
<div class="x-box-tc"></div>
</div>
</div>
<div class="x-box-ml">
<div class="x-box-mr">
<div class="x-box-mc">
<h3 style="margin-bottom:5px;">Login</h3>
<div id="form-ct"></div>
<div id="frmMsgs"></div>
</div>
</div>
</div>
<div class="x-box-bl">
<div class="x-box-br">
<div class="x-box-bc"></div>
</div>
</div>
</div>
</div>
...

The JS Code is pretty much standard from the examples I found:
Ext.onReady(function(){

Ext.QuickTips.init();


// CREATE THE FORM AND RENDER IT INTO THE CENTER DIV
Ext.form.Field.prototype.msgTarget = 'side';


var LoginForm = new Ext.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
url:'/index.php'
});

DoLogin=function() {
if (LoginForm.isValid()) {
Ext.MessageBox.wait("Logging in...", 'Please wait');
LoginForm.submit({
success:function(form, action){
Ext.MessageBox.hide();
},
failure: function(form, action) {
var msgField = Ext.get('frmMsgs');
msgField.innerHtml = action.result.msg;
//Ext.msgField(action.result.msg);
Ext.MessageBox.hide();
//Ext.MessageBox.alert('Failure', action.result.msg);
}
});
};
};

LoginForm.add(
new Ext.form.TextField({
fieldLabel: 'Username',
name: 'Username',
width:175,
allowBlank:false
}),

new Ext.form.TextField({
inputType: 'password',
fieldLabel: 'Password',
name: 'Password',
width:175,
allowBlank:false
})
);

LoginForm.addButton('Login', DoLogin, this);

LoginForm.render('form-ct');

// create the layout
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 50,
titlebar: false
},
south: {
split:false,
initialSize: 30,
titlebar: false
},
center: {
titlebar: false,
autoScroll:false
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header'));
layout.add('south', new Ext.ContentPanel('footer'));
layout.add('center',new Ext.ContentPanel('center'));
layout.restoreState();
layout.endUpdate();

// safari and opera have iframe sizing issue, relayout fixes it
if(Ext.isSafari || Ext.isOpera){
layout.layout();
}

var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');
mask.setOpacity(.8);
mask.shift({
xy:loading.getXY(),
width:loading.getWidth(),
height:loading.getHeight(),
remove:true,
duration:1,
opacity:.3,
easing:'bounceOut',
callback : function(){
loading.fadeOut({duration:.2,remove:true});
}
});
})

As you can see I have commented the working lines out:

var msgField = Ext.get('frmMsgs'); // does not work
msgField.innerHtml = action.result.msg; //does not work
//Ext.msgField(action.result.msg); // does not work
Ext.MessageBox.hide();
//Ext.MessageBox.alert('Failure', action.result.msg); // works

If I run it with the Message Box, everything works fine, if I do the innerhtml, Firebug does not tell me where the error is, and the server response is as expected:

{success:false, msg:'User does not exist'}

So, I am a little stumped, hope that the info provided helps to narrow that down.

[Animal]

Set a break at this line:



var msgField = Ext.get('frmMsgs');


And see what's what.

[Animal]

msgField.innerHtml = action.result.msg;

msgField is an Ext.Element. That is a wrapper for DOM elements. It does not have an innerHtml property. (or, indeed an innerHTML property which is what the underlying DOM element has)

[BlueNC]

Animal: Thank you, I then went to the 'standard' getElementById and voila it works as desired. However allow me one more question, is there a more elegant way to do that, forgive my ignorance but I am still trying to learn EXTJS.

[Animal]

The documentation is very clear.

http://extjs.com/deploy/ext/docs/output/Ext.html#getDom

If you want to use the Ext Element wrapper class:

http://extjs.com/deploy/ext/docs/output/Ext.Element.html#dom

or

http://extjs.com/deploy/ext/docs/output/Ext.Element.html#update