[SOLVED] Problem with CardLayout and FormPanel

[void0]

Hi.

First of all I would like to thanks the ExtJS team for creating a framework that seem to be able to create wonderful webapplications!

Second... I have been trying to create stuff using ExtJS for a long time (when I have had freetime) but always end up giving up. To me it seems ExtJS components (FormPanel, Grid, etc) work very well on their own but together and nested it gets messed up and complicated. I am not complaining on the library itself (well maybe the documentation but I think that is a community effort aswell) because it might aswell be that I have missed something completly.
I had a vision that ExtJS 2.0 would be really easy, when it comes to setting up components, and when looking at some examples it really seems to be.
The idea to setup everything in a config object is so lovely but now it feels like small "hacks" outside the config object (nothing I really can explain it is just a feeling right now) have to be made to get the components to work together.

On to the current problem which is with a wizard for user registrations.
I guess I will write alittle about my problems/solutions/progress first and then ask my questions :)

First I had problems with the previous/next buttons in the bottombar (bbar) because inside the button handler I wanted to hide the previous button at times but I could find no (when looking in the docs and firebug) reference to those buttons.
The solutions, which I do not like since it is outside the config, was to create two standalone objects for the buttons which was added to the 'bbar' property.

After that comes the FormPanel that is supposed to go inside the first card which looked fine with one fieldset but with a second bigger one the height of the form exceeded the height of the wizard window but NO scrollbar appears (see image below). I tried to set the 'overflow: auto' at several places but without any luck so I finally just changed the window size for the time being.

So on to posting the form values to a remote PHP script where the biggest problem is posting the values recieving notification on success/failure.
I have looked at actioncomplete etc. but ... without luck. It is really confusing when such a "simple" thing can be so hard to figure out when it seems really easy when the form is just by itself with a "build-in" submit button.

Questions:

1. Are there any references inside the window object to the bbar items, so that I can get rid of the standalone objects for prev/next buttons?

2. How on earth do I get the scrollbar to appear when the cards content exceeds the windows height?

3. I would really need a code-example on how to solve my "problem" with posting the form when I press the next button but not change card if the form is invalid or returns with errors frmo the PHP script.

4. How can I get the registration window to look like the login portlet (see images below), when it comes to the titlebar, background and frame, but still act as a window?

Thanks in advance!!

Here is the current code for the user registration wizard.


[code]NG.UserRegistration = Ext.extend(Ext.app.Module, {
id: 'NG.UserRegistration',
count: 0,
init: function(){
this.launcher = {
text: 'Register',
iconCls:'icon-grid',
handler: this.createWindow,
scope: this
}
},
createWindow : function() {
var desktop = this.app.getDesktop();
form = new Ext.form.FormPanel({
style: 'padding: 5px;',
border: false,
frame: false,
items: [{
xtype: 'fieldset',
autoHeight: true,
title: 'Anv

[Condor]

1. Are there any references inside the window object to the bbar items, so that I can get rid of the standalone objects for prev/next buttons?

var firstButton = myWindow.getBottomToolbar().items.item(0);

2. How on earth do I get the scrollbar to appear when the cards content exceeds the windows height?

1. Add the form as a direct item of the window and not with an intermediate panel (if you don't want that you should at least add layout:'fit' to the panel).
2. Add autoScroll:true to the form (and also bodyStyle:'position:relative;' to work around a bug in IE).

3. I would really need a code-example on how to solve my "problem" with posting the form when I press the next button but not change card if the form is invalid or returns with errors frmo the PHP script.

form.getForm().submit({
  url: 'somepage.php',
  success: function() {
    // switch to next tab
  }
});

(your PHP scripts needs to return success and possible errors (see API docs for details)

4. How can I get the registration window to look like the login portlet (see images below), when it comes to the titlebar, background and frame, but still act as a window?

You'll have to play around a bit with the config setting of Ext.Window (e.g. plain:true).

[void0]

Thank you for the fast answer!

I have made changes to the code for the prev/next buttons and for the scrolling. However the scrolling still do not work and I guess I did not understand what you ment by adding the form as a direct item(?), because I just copied the code to the items property instead of using a standalone object but that did not help. Neither did using layout: 'fit' which I have tried myself before aswell without help.

Regarding the form submit/success/failure. I have looked at the documentation and tried different things but I cannot get it to work. That is why I would like a some-what working example.
As I understand it the 'success' callback is called even though the response have errors, which would mean I do not want to switch card (tab).
The PHP script is currently returning a hardcoded JSON response.

{"success":"false","errors":{"Username":"Invalid username."}}

I have looked at the Ajax XML form example aswell where a errorReader is used and I have played around with that aswell but I cannot seem to figure out how to get it working using this CardLayout thing :(

Here is the current code.
[code]
NG.UserRegistration = Ext.extend(Ext.app.Module, {
id: 'NG.UserRegistration',
count: 0,
init: function(){
this.launcher = {
text: 'Register',
iconCls:'icon-grid',
handler: this.createWindow,
scope: this
}
},
createWindow : function() {
var desktop = this.app.getDesktop();
var dialog = desktop.createWindow({
id: this.id + '-' + this.count++,
style: 'border: 0px; padding: 0px; margin-bottom: 0px;',
closable: true,
draggable: true,
collapsible: false,
resizable: false,
maximizable: false,
layout: 'card',
width: 400,
height: 300,
title: 'Registrering',
activeItem: 0,
bbar: [{
hidden: true,
text: 'F

[Condor]

I did not understand what you ment by adding the form as a direct item(?)

I mean you should replace:

items: [{
	id: '1',
	items: new Ext.form.FormPanel({...}),
	handler: function() {...}
},{
	id: '2',
	html: 'Done!'
}]

with:

items: [new Ext.form.FormPanel({
	id: '1',
	handler: function() {...},
	autoScroll: true,
	bodyStyle: 'position:relative;',
	...
}),{
	id: '2',
	html: 'Done!'
}]

Regarding the form submit/success/failure. I have looked at the documentation and tried different things but I cannot get it to work.

Have you checked with Firebug what is send and received by the submit?

ps. Does this.items.item(0).getForm() actually reference the form?

[void0]

Yes I have checked in Firebug. The JSON resposne I pasted was actually copied from Fiebugs console. The submit is not the problem really. It is getting the the notification on a successful submit and if not get and show the error messages that is my problem.
Right now it feels I am really out of ideas and that is why I think I need actual coding-help.

this.items.item(0).getForm() works fine.

[void0]

I have solved the success/failure problem.

Using the success/failure in the action works great altho I think it is alittle missleading by the documentation to mention it is only for HTTP success/failure and nothing about that JSON and Form is a speicla case(?).

The problem was actually the JSON response. In my PHP script I added the value $Response['success'] = 'false'; which then gets treated as a string and encapsulated with double-quotes (") so the 'false' value was sent back as a string value rather than a boolean.

So now success/failure works as it should! Yay!

Thanks again Condor for the previous help and again to the ExtJS team!
Great work!