NS_ERROR_ILLEGAL_VALUE on directsubmit on extend based formpanel

[ollieno]

Dear Specialists out there,

Why is it that the first code will not work and the second does? When I hit the post button I get a ugly exception. cause of error. Looks like the form isn't posting using directsubmit but the normal submit without a url. Why ? api methods are lost ?


Nice (correct ?) way but not working and giving this error

uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: http://host/site/admin/ext/adapter/ext/ext-base.js :: i :: line 7" data: no]

Line 0



Ext.ns('Admin');
Admin.LoginPanel = Ext.extend(Ext.FormPanel, {
labelAlign : 'right',
frame : true,
width : 350,
border :false,

initComponent : function() {

Ext.Direct.addProvider(Admin.Remoting.REMOTING_API);

Ext.apply(this, {
api : {
submit: Admin.Remoting.Base.login
},
paramsAsHash: false,
items : [ {
xtype : 'textfield',
name : 'username',
allowBlank : false,
fieldLabel : 'Username',
anchor : '100%',
value : Ext.state.Manager.get('username')
}, {
xtype : 'textfield',
name : 'password',
allowBlank : false,
fieldLabel : 'Password',
inputType : 'password',
anchor : '100%',
value : Ext.state.Manager.get('password')
}, {
xtype : 'checkbox',
name : 'remember',
labelSeparator : '',
inputValue : 'on',
boxLabel : 'Remember me.',
value : Ext.state.Manager.get('remember')
} ],
buttons : [ {
text : 'Aanmelden',
id : 'submitbutton',
handler: function(){
this.getForm().submit();
}.createDelegate(this)
}]
});

Admin.LoginPanel.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('admin.loginpanel', Admin.LoginPanel);


less nice but working code



Ext.ns('Admin');
Admin.LoginPanel = Ext.extend(Ext.Panel, {
labelAlign : 'right',
frame : true,
width : 350,
border :false,

initComponent : function() {

Ext.Direct.addProvider(Admin.Remoting.REMOTING_API);

var form = new Ext.FormPanel({
api : {
submit: Admin.Remoting.Base.login
},
paramsAsHash: false,
items : [ {
xtype : 'textfield',
name : 'username',
allowBlank : false,
fieldLabel : 'Username',
anchor : '100%',
value : Ext.state.Manager.get('username')
}, {
xtype : 'textfield',
name : 'password',
allowBlank : false,
fieldLabel : 'Password',
inputType : 'password',
anchor : '100%',
value : Ext.state.Manager.get('password')
}, {
xtype : 'checkbox',
name : 'remember',
labelSeparator : '',
inputValue : 'on',
boxLabel : 'Remember me.',
value : Ext.state.Manager.get('remember')
} ],
buttons : [ {
text : 'Aanmelden',
id : 'submitbutton',
handler: function(){
form.getForm().submit();
}.createDelegate(this)
}]
});

Admin.LoginPanel.superclass.initComponent.apply(this, arguments);

this.add(form);
}
});
Ext.reg('admin.loginpanel', Admin.LoginPanel);


In the second code, am I doing something wrong or is this a bug or isn't it ment to work that way. I prefer the second code because I need a to extend a formpanel and not a panel with a form.

I´m using version 3.0.0

I´m really curious and hoping I'm doing something wrong here :D

Kind regards
Ollie

[ollieno]

Ext.apply(this, {
api : {
submit: Admin.Remoting.Base.login
}
});


is not working! When I store the config object in a var like



var config = {
api : {
Admin.Remoting.Base.login
}
}


and use



Ext.apply(this, Ext.apply(this.initialConfig, config));


it works!

[tudisco]

I had the same problem.. your solution worked for me. Why is this happening?

[Condor]

FormPanel creates an internal BasicForm using the initialConfig as configuration object.

You should do this for all extended classes, because there are several more components that use the initialConfig to see how the component was originally configured.