PDA

View Full Version : How to submit cardlayout wizard?



saadkhan
25 Feb 2010, 12:18 PM
Hello,
I have a things nested like this:


Ext.Window > Ext.Panel (with layout: 'card') > Ext.form.FormPanel
> Ext.form.FormPanel
> Ext.form.FormPanel
> Ext.form.FormPanel
> Ext.form.FormPanel

Now I am trying to submit my form which is actually Ext.Panel, so, I found that I have 5 FormPanels inside it....Maybe that is why I am unable to do it.
So, please help me figure out how to have wizard while able to submit all the cards inside it as well.

I tried changing my form panels (Ext.form.FormPanel inside FormPanel) to Ext.Panel...but this makes my alignment and look of each card very bad.

25 Feb 2010, 12:44 PM
your setup is wrong.

It should be


Window (using the fit layout)
|_ form panel (using card)
|_ Panel (or container) using form layout
|_ Panel (or container) using form layout
|_ Panel (or container) using form layout
|_ Panel (or container) using form layout

saadkhan
25 Feb 2010, 1:01 PM
Thanks alot !!!!!!
Its working now....So, Should I use my FormPanel (using card) for submit? Will it submit values of all Panels or Containers inside FormPanel ?

25 Feb 2010, 1:03 PM
Yes, the form will serialize all input fields.

saadkhan
25 Feb 2010, 1:11 PM
Its giving me 'Object Expected'......? What should I do now?

25 Feb 2010, 1:12 PM
What's giving you Object Expected?!

saadkhan
25 Feb 2010, 1:18 PM
I dont exactly know what is giving it, but I checked it using internet explorer developers tool so the line i found is:

this.form.api.submit(this.form.el.dom,this.success,this)
from the ext-all.js file

25 Feb 2010, 1:21 PM
can't do too much to help with athat info.

why are you developing with internet exploder?

saadkhan
25 Feb 2010, 1:28 PM
I am not developing it with internet explorer.....I just traced this error from it.
Well, here is my code.....I am using ExtDirect for ASP.NET (one of the posted wrappers in this forum)




Ext.onReady(function() {

Ext.Direct.addProvider(AutotrackProvider);

var addCustomerWindow = new Ext.Window({
id: 'addCustomerWindow',
title: 'Add Customer',
width: 550,
minWidth: 550,
height: 385,
minHeight: 150,
maxHeight: 600,
autoScroll: true,
closeAction: 'hide',
layout: 'fit',
modal: true,
items:
[
new Ext.form.FormPanel({
id: 'addCustomerWindowCardLayout',
layout: 'card',
header: false,
baseCls: 'x-plain',
bodyStyle: 'padding:15px',
api:
{
submit: Autotrack.Remote.Save
},
items:
[
new Ext.Panel({
id: 'card-0',
header: false,
layout: 'form',
baseCls: 'x-plain',
defaultType: 'textfield',
items:
[
//....textfields
]
}),
new Ext.Panel({
id: 'card-1',
header: false,
layout: 'form',
baseCls: 'x-plain',
defaultType: 'textfield',
items:
[
//....textfields
]
})
],
activeItem: 0,
})
],
bbar: new Ext.ux.StatusBar(
{
items:
[
{
text: 'Back',
id: 'card-back',
handler: navHandler.createDelegate(this, [-1]),
disabled: true
},
{
text: 'Next',
id: 'card-next',
handler: navHandler.createDelegate(this, [1])
},
{
text: 'Finish',
disabled: true,
id: 'card-finish',
handler: function()
{alert(Ext.getCmp('addCustomerWindowCardLayout').getForm());
Ext.getCmp('addCustomerWindowCardLayout').getForm().submit({
success: function(basicForm, action){

}
});
}
}
]
})
});




});







namespace AutotrackServer.Remote
{
[DirectAction("Remote")]
public class RemoteHandler : DirectHandler
{
public override string ProviderName
{
get
{
return "AutotrackProvider";
}
}

public override string Namespace
{
get
{
return "Autotrack";
}
}

[DirectMethodForm]
public JObject addCustomer(HttpRequest request)
{
JObject data = new JObject(
new JProperty("firstName", this.ParseString(request["firstName"])),
new JProperty("lastName", this.ParseString(request["lastName"])),
new JProperty("email", this.ParseString(request["email"]))
);

return new JObject(
new JProperty("success", true),
new JProperty("data", data)
);
}
}
}

saadkhan
25 Feb 2010, 1:30 PM
I am not developing it with internet explorer.....I just traced this error from it.
Well, here is my code.....I am using ExtDirect for ASP.NET (one of the posted wrappers in this forum)




Ext.onReady(function() {

Ext.Direct.addProvider(AutotrackProvider);

var addCustomerWindow = new Ext.Window({
id: 'addCustomerWindow',
title: 'Add Customer',
width: 550,
minWidth: 550,
height: 385,
minHeight: 150,
maxHeight: 600,
autoScroll: true,
closeAction: 'hide',
layout: 'fit',
modal: true,
items:
[
new Ext.form.FormPanel({
id: 'addCustomerWindowCardLayout',
layout: 'card',
header: false,
baseCls: 'x-plain',
bodyStyle: 'padding:15px',
api:
{
submit: Autotrack.Remote.Save
},
items:
[
new Ext.Panel({
id: 'card-0',
header: false,
layout: 'form',
baseCls: 'x-plain',
defaultType: 'textfield',
items:
[
//....textfields
]
}),
new Ext.Panel({
id: 'card-1',
header: false,
layout: 'form',
baseCls: 'x-plain',
defaultType: 'textfield',
items:
[
//....textfields
]
})
],
activeItem: 0,
})
],
bbar: new Ext.ux.StatusBar(
{
items:
[
{
text: 'Back',
id: 'card-back',
handler: navHandler.createDelegate(this, [-1]),
disabled: true
},
{
text: 'Next',
id: 'card-next',
handler: navHandler.createDelegate(this, [1])
},
{
text: 'Finish',
disabled: true,
id: 'card-finish',
handler: function()
{alert(Ext.getCmp('addCustomerWindowCardLayout').getForm());
Ext.getCmp('addCustomerWindowCardLayout').getForm().submit({
success: function(basicForm, action){

}
});
}
}
]
})
});




});







namespace AutotrackServer.Remote
{
[DirectAction("Remote")]
public class RemoteHandler : DirectHandler
{
public override string ProviderName
{
get
{
return "AutotrackProvider";
}
}

public override string Namespace
{
get
{
return "Autotrack";
}
}

[DirectMethodForm]
public JObject addCustomer(HttpRequest request)
{
JObject data = new JObject(
new JProperty("firstName", this.ParseString(request["firstName"])),
new JProperty("lastName", this.ParseString(request["lastName"])),
new JProperty("email", this.ParseString(request["email"]))
);

return new JObject(
new JProperty("success", true),
new JProperty("data", data)
);
}
}
}

saadkhan
25 Feb 2010, 1:46 PM
What should I do now?????????

25 Feb 2010, 1:48 PM
i would say stop developing with alerts and learn how to use firebug.

saadkhan
25 Feb 2010, 1:53 PM
i would say stop developing with alerts and learn how to use firebug.


:)
I am not making ideas using alerts :)
I have already replied with my code that I am trying with but its on a wait to get approved. Anyway, please let me know about it. Here is the code again:



var addCustomerWindow = new Ext.Window({
id: 'addCustomerWindow',
title: 'Add Customer',
width: 550,
minWidth: 550,
height: 385,
minHeight: 150,
maxHeight: 600,
autoScroll: true,
closeAction: 'hide',
layout: 'fit',
modal: true,
items:
[
new Ext.form.FormPanel({
id: 'addCustomerWindowCardLayout',
layout: 'card',
header: false,
baseCls: 'x-plain',
bodyStyle: 'padding:15px',
api:
{
submit: Autotrack.Remote.Save
},
items:
[
new Ext.Panel({
id: 'card-0',
header: false,
layout: 'form',
baseCls: 'x-plain',
defaultType: 'textfield',
items:
[
{
fieldLabel: 'Name',
name: 'addCustomerWindowName',
anchor:'100%'
},
{
fieldLabel: 'Father Name',
name: 'addCustomerWindowFatherName',
anchor: '100%'
},
{
fieldLabel: 'Mother Maiden Name',
name: 'addCustomerWindowMotherMaidenName',
anchor: '100%'
},
{
fieldLabel: 'CNIC',
name: 'addCustomerWindowCNIC',
anchor: '100%'
},
{
fieldLabel: 'Address',
name: 'addCustomerWindowAddress',
anchor: '100%'
},
{
fieldLabel: 'Office Address',
name: 'addCustomerWindowOfficeAddress',
anchor: '100%'
},
{
fieldLabel: 'Webtrack Username',
name: 'addCustomerWindowWebtrackUsername',
anchor:'100%'
},
{
fieldLabel: 'Webtrack Password',
name: 'addCustomerWindowWebtrackPassword',
anchor:'100%'
}
]
}),
new Ext.Panel({
id: 'card-1',
header: false,
layout: 'form',
baseCls: 'x-plain',
defaultType: 'textfield',
items:
[
{
fieldLabel: 'Emergency Password',
name: 'addCustomerWindowEmergencyPassword',
anchor:'100%'
},
{
fieldLabel: 'Insurance Company',
name: 'addCustomerWindowInsuranceCompany',
anchor:'100%'
},
{
fieldLabel: 'Secondary User',
name: 'addCustomerWindowSecondaryUser',
anchor:'100%'
},
{
fieldLabel: 'Sales Person',
name: 'addCustomerWindowSalesPerson',
anchor:'100%'
},
{
fieldLabel: 'Installer Name',
name: 'addCustomerWindowInstallerName',
anchor:'100%'
},
new Ext.form.ComboBox({
fieldLabel: 'Group',
store : [ 'sad', 'sssssss' ],
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select Group...',
anchor: '100%'
}),
new Ext.form.ComboBox({
fieldLabel: 'Package',
store : [ 'sad', 'sssssss' ],
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select Package...',
anchor: '100%'
})
]
}),
new Ext.Panel({
id: 'card-2',
header: false,
layout: 'form',
baseCls: 'x-plain',
defaultType: 'numberfield',
items:
[
{
fieldLabel: 'Home Contact 1',
name: 'addCustomerWindowEmergencyPassword',
anchor:'100%'
},
{
fieldLabel: 'Home Contact 2',
name: 'addCustomerWindowInsuranceCompany',
anchor:'100%'
},
{
fieldLabel: 'Home Contact 3',
name: 'addCustomerWindowSecondaryUser',
anchor:'100%'
},
{
fieldLabel: 'Mobile Contact 1',
name: 'addCustomerWindowSalesPerson',
anchor:'100%'
},
{
fieldLabel: 'Mobile Contact 2',
name: 'addCustomerWindowInstallerName',
anchor:'100%'
},
{
fieldLabel: 'Mobile Contact 3',
name: 'addCustomerWindowEmergencyPassword',
anchor:'100%'
},
{
fieldLabel: 'Office Contact 1',
name: 'addCustomerWindowInsuranceCompany',
anchor:'100%'
},
{
fieldLabel: 'Office Contact 2',
name: 'addCustomerWindowInsuranceCompany',
anchor:'100%'
},
{
fieldLabel: 'Office Contact 3',
name: 'addCustomerWindowInsuranceCompany',
anchor:'100%'
}
]
})
],
activeItem: 0,
})
],
bbar: new Ext.ux.StatusBar(
{
items:
[
{
text: 'Back',
id: 'card-back',
handler: navHandler.createDelegate(this, [-1]),
disabled: true
},
{
text: 'Next',
id: 'card-next',
handler: navHandler.createDelegate(this, [1])
},
{
text: 'Finish',
disabled: true,
id: 'card-finish',
handler: function()
{alert(Ext.getCmp('addCustomerWindowCardLayout').getForm());
Ext.getCmp('addCustomerWindowCardLayout').getForm().submit({
success: function(basicForm, action){
};
}
});
}
}
]
})
});
{/CODE]




[CODE]
[DirectMethodForm]
public JObject addCustomer(HttpRequest request)
{
// testinggggg
JObject data = new JObject(
new JProperty("firstName", this.ParseString(request["firstName"])),
new JProperty("lastName", this.ParseString(request["lastName"])),
new JProperty("email", this.ParseString(request["email"]))
);

return new JObject(
new JProperty("success", true),
new JProperty("data", data)
);
}

saadkhan
25 Feb 2010, 1:57 PM
I am replying with my code so that you could see what I am doing wrong but its not appearing over here except for the plain text as this reply is like!
.....strange.........

mschwartz
25 Feb 2010, 2:14 PM
Form fields in cards not yet rendered aren't serialized and sent to the server upon submit.

ExtJS forms needs help, badly, for that kind of reason.

You can set deferredRender: false in your panel config (the one with the layout: 'card') and it will render the form fields in the hidden card, but if you have complex enough forms you can go get a cup of coffee while those hidden ones render.

Actuarybrad
25 Feb 2010, 3:22 PM
Form fields in cards not yet rendered aren't serialized and sent to the server upon submit.

ExtJS forms needs help, badly, for that kind of reason.

You can set deferredRender: false in your panel config (the one with the layout: 'card') and it will render the form fields in the hidden card, but if you have complex enough forms you can go get a cup of coffee while those hidden ones render.


So, true. Was this something that happened in Extjs 3.1 or 3.2?

My Extjs 3.0 site works fine on getting values from unrendered form fields in a card layout. Just updated to Extjs 3.2+ and everything is broken. The only way to get the field values is like you said, set deferredRender to false. But that breaks the format for grids and page layouts??? I have no idea why. Its going to be a long week fixing everything.

saadkhan
26 Feb 2010, 1:43 AM
thanks alot mschwartz!!!
It worked :)