PDA

View Full Version : [EXT 3.0.0] ct.dom.insertBefore(this.el.dom, position) problem



squarefan
16 Jul 2009, 11:33 PM
Hiya,

I am currently evaluating moving our application over from 2.2.1 to 3.0.0. I ran into a problem at the login screen --> I am using the ext Desktop application

here is the shorted code:


Ext.SSL_SECURE_URL="resources/images/s.gif";
Ext.BLANK_IMAGE_URL="resources/images/s.gif";

Login = function(){

var win,
form,
submitUrl = '';

function onSubmit(){
this.showMask();

form.submit({
reset: true
});
}

return{
Init:function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var logoPanel = new Ext.Panel({
baseCls: 'x-plain',
id: 'login-logo',
region: 'center'
});

var formPanel = new Ext.form.FormPanel({
baseCls: 'x-plain',
monitorValid:true,
baseParams: {
module: 'login'
},
defaults: {
width: 200
},
defaultType: 'textfield', <-- ERROR appears to be connected to the type and the element initiated with it
frame: false,
height: 90,
id: 'login-form',
items: [{
//xtype: 'textfield',
fieldLabel: 'User ID',
vtype:'alphanum',
allowBlank: false,
name: 'user'
},{
//xtype: 'textfield',
fieldLabel: 'Password',
//vtype:'alphanum',
maskRe: /[;a-zA-Z0-9\s]/,
inputType: 'password',
allowBlank: false,
name: 'pass'
},{
xtype:'box',
autoEl: {cn: '<b><font color=#003399>Please enter your User ID and Password</font></b>'},
width: 330,
id: 'error_msg'
}],
labelWidth:115,
listeners: {
'actioncomplete': {
fn: this.onActionComplete,
scope: this
},
'actionfailed': {
fn: this.onActionFailed,
scope: this
}
},
region: 'south',
url: submitUrl
});

win = new Ext.Window({
buttons: [{
handler: onSubmit,
scope: Login,
type: 'submit',
text: 'Login',
formBind: true
}],
buttonAlign: 'right',
closable: false,
draggable: false,
height: 250,
id: 'login-win',
keys: {
key: [13], // enter key
fn: onSubmit,
scope:this
},
layout: 'border',
minHeight: 300,
minWidth: 430,
plain: false,
resizable: false,
items: [
logoPanel,
formPanel
],
title: 'WELCOME',
width: 430
});

form = formPanel.getForm();

formPanel.on('render', function(){
var f = form.findField('user');

if(f){
f.focus();
}
}, this, {delay: 200});

win.show();

},


hideMask : function(){
this.pMask.hide();
win.buttons[0].enable();
},

onActionComplete : function(f, a){
this.hideMask();
if(a && a.result){
win.destroy(true);

// get the path
var path = window.location.pathname,
path = path.substring(0, path.lastIndexOf('/') + 1);

// set the cookie
//set_cookie('sessionId', a.result.sessionId, '', path, '', '' );

// redirect the window
window.location = path;
//window.open(path, "Test", "status=no,toolbar=no,menubar=no,scrollbars=no,resizable=no,fullscreen=yes");
//window.location = "index.php";
}
},

onActionFailed : function(form,action){
this.hideMask();

// Decode Return Message from Weblayer (customized commands) and avoid error,

},

showMask : function(msg){
if(!this.pMask){
// using this.pMask, seems that using this.mask caused conflict
// when this dialog is modal (uses this.mask also)
this.pMask = new Ext.LoadMask(win.body, {
msg: 'Checking...'
});
}

if(msg){
this.pMask.msg = msg;
}
this.pMask.show();
win.buttons[0].disable();
}
};
}();
Ext.onReady(Login.Init, Login, true);


the error during login is as follows:
ct.dom.insertBefore(this.el.dom, position);

Help would be much appreciated. If necessary i could also grant access to a testsystem.

cheers,
Alex

squarefan
20 Jul 2009, 7:40 PM
nobody a clue?

cheers,
Alex

Condor
21 Jul 2009, 12:24 AM
You specify all kinds of ids. Are you sure these are unique (and you don't already have a DOM element with this id)?

ps. Fields won't be available in the render event of the form. You have to wait for the afterlayout event (with single:true, so it doesn't also get called when resized).

squarefan
21 Jul 2009, 12:39 AM
yup these are unique (id's) --> also the code works with EXT 2.x flawlessly.

will look into the render event.

cheers,
Alex

tad
12 Aug 2009, 1:19 PM
Without going into gory details, I'm running into the same problem and I'm sure that I'm editing an extant dom heirarchy. Here's the gist:



var ct = Ext.getCmp('pluginform-ct').body;
var pluginFormId = Ext.id();
ct.update(String.format('<div id="{0}"/>', pluginFormId));

var form = new Ext.FormPanel({
renderTo: pluginFormId
,id: pluginFormId
,items: [...]
});


I've been able to workaround the issue in 3.0 by foregoing renderTo: config in the FormPanel, and instead simply calling form.render(ctId, 0) for a valid FormPanel instance and rendered container (with id=ctId).

Otherwise, this bug does not occur for simple Panels and I have yet to test with other components.

Condor
17 Aug 2009, 2:42 AM
You are rendering a form inside a container? You should really switch to using Ext layouts!


var ct = Ext.getCmp('pluginform-ct');
var form = new Ext.FormPanel({
,id: pluginFormId
,items: [...]
});
ct.add(form);
ct.doLayout();