PDA

View Full Version : CardLayout Second Card Not rendering right.



avdhulst
8 Sep 2010, 3:44 AM
Hello all,

I have a problem with the card layout. The problem is this:
I created a FormPanel, with layout:card, and three card. All of the three cards are filled with a panel that contains two columns.

When opening the card in FF, I see all the cards being displayed while loading. After they are finished loading all the cards will disappear expect for the first one. The result is fine, but the other cards showing beneath the first one is not good.

So, I added layoutConfig: defferedRender: false;. Problem solved in FF. But now another problem apears in IE. The first card is always rendered correct, but the second card is alway too small (like it has no height or something). This keeps occuring no matter what i try. (Tried switching the panels, tried autoHeight, tried rebuilding the panel from scratch. Nothing works.) Does anyboy have some suggestions? If you don't understand what I mean, see the pictures (Panel1.jpg is correct, Panel2.jpg is wrong) or feel free to ask.

Regards Arjan
2227722278

Condor
8 Sep 2010, 3:46 AM
Also add layoutOnCardChange:true.

avdhulst
8 Sep 2010, 3:48 AM
Hi Condor, thanks for the reply. That doesn't work unfortunately...

Condor
8 Sep 2010, 4:00 AM
Did you try:

layout: 'card',
layoutConfig: {
deferredRender: false,
layoutOnCardChange: true
},
defaults: {
hideMode: 'offsets'
}

avdhulst
8 Sep 2010, 4:12 AM
Yep, still no joy...

Animal
8 Sep 2010, 4:21 AM
I think you're just doing it wrong. Overnesting, or rendering or something. We need to see formatted code.

avdhulst
8 Sep 2010, 4:23 AM
var ext_1c = new Ext.form.FormPanel({
_arguments: [],
id: "ProspectNewCardPanel",
url: "arm\/form\/prospectnew?step=save&type=",
renderTo: "prospectForm",
layout: "card",
layoutConfig: {
deferredRender: true,
layoutOnCardChange: true
},
width: 780,
activeItem: 0,
bodyStyle: "padding:15px",
defaults: {
border: false,
width: 780,
bodyBorder: false,
hideMode: "offsets"
},
bbar: ["->",
{
id: "move-prev",
text: "« Previous",
handler: cardNav.createDelegate(this, [-1]),
disabled: true
},
{
id: "move-next",
text: "Next »",
handler: cardNav.createDelegate(this, [1])
},
{
id: "submit",
disabled: true,
text: "Submit",
handler: function () {
var form = Ext.getCmp('ProspectNewCardPanel').getForm();
form.submit({
success: function (form, action) {
Ext.getCmp('popup').close();
Adw.update('content', 'arm/details?id=' + action.result.id + '&type=prospect');
// Adw.aceSync('', 'prospect');
}
});
}
}],
items: [{
id: "card-0",
items: [{
layout: "column",
items: [{
layout: "form",
columnWidth: 0.5,
id: "p1_column1",
items: [{
xtype: "hidden",
id: "CustomerStart",
name: "CustomerStart",
value: ""
},
{
xtype: "hidden",
id: "CompanyType",
name: "CompanyType",
value: ""
},
{
xtype: "hidden",
id: "ACECustomerCode",
name: "ACECustomerCode",
value: ""
},
{
xtype: "hidden",
id: "IsHQ",
name: "IsHQ",
value: ""
},
{
xtype: "hidden",
id: "HeadquarterID",
name: "HeadquarterID",
value: ""
},
{
xtype: "hidden",
id: "RelationID",
name: "RelationID",
value: ""
},
{
xtype: "textfield",
id: "CompanyName",
fieldLabel: "CompanyName",
name: "CompanyName",
msgTarget: "side",
allowBlank: false,
value: ""
},
{
xtype: "textfield",
id: "ShortName",
fieldLabel: "Short Name",
name: "ShortName",
value: ""
},
{
xtype: "textfield",
id: "Department",
fieldLabel: "Department",
name: "Department",
value: ""
},
{
xtype: "textfield",
id: "Phone",
fieldLabel: "Phone",
msgTarget: "side",
name: "Phone",
allowBlank: false,
value: "",
validator: function (value) {
if (value == '') return 'This field is required.';
if (!value.match(/^\d+$/)) return 'Only digits and no spaces allowed';
if (value.length < 10) return 'Needs to be at least 10 digits'
return true;
}
},
{
xtype: "textfield",
id: "Fax",
fieldLabel: "Fax",
name: "Fax"
},
{
xtype: "textfield",
id: "Website",
fieldLabel: "Website",
name: "Website",
value: ""
},
{
xtype: "combo",
width: 150,
id: "brancheCombo",
emptyText: "Please Select",
fieldLabel: "Branche",
msgTarget: "side",
store: ext_5,
displayField: "Description",
valueField: "ParameterID",
hiddenName: "hiddenBranche",
typeAhead: true,
mode: "local",
allowBlank: false,
triggerAction: "all",
selectOnFocus: true,
hiddenValue: "",
value: ""
},
{
xtype: "combo",
width: 150,
id: "businessCombo",
emptyText: "Please Select",
msgTarget: "side",
fieldLabel: "Business Type",
store: ext_6,
allowBlank: false,
displayField: "Description",
valueField: "ParameterID",
hiddenName: "hiddenBusiness",
typeAhead: true,
mode: "local",
triggerAction: "all",
selectOnFocus: true,
hiddenValue: "",
value: ""
},
{
xtype: "combo",
width: 150,
id: "marketCombo",
fieldLabel: "Market Segment",
emptyText: "Please Select",
store: ext_7,
displayField: "Description",
valueField: "ParameterID",
hiddenName: "hiddenMarket",
typeAhead: true,
mode: "local",
triggerAction: "all",
selectOnFocus: true,
hiddenValue: "",
value: ""
},
{
xtype: "combo",
width: 150,
id: "employeecountCombo",
emptyText: "Please Select",
fieldLabel: "Employees",
store: ext_8,
displayField: "Description",
valueField: "ParameterID",
hiddenName: "hiddenEmployeeCount",
typeAhead: true,
mode: "local",
triggerAction: "all",
selectOnFocus: true,
hiddenValue: "",
value: ""
},
{
xtype: "datefield",
id: "RFPRequested",
fieldLabel: "RFP Requested",
name: "RFPRequested",
width: 100,
format: "Y-m-d"
},
{
xtype: "datefield",
id: "EndDateCurrentContract",
fieldLabel: "Current Contract End",
name: "EndDateCurrentContract",
width: 100,
format: "Y-m-d",
value: ""
},
{
xtype: "datefield",
id: "LastVisit",
fieldLabel: "Last Visit",
name: "LastVisit",
width: 100,
format: "Y-m-d",
value: ""
},
{
xtype: "datefield",
id: "LastContact",
fieldLabel: "Last Contact",
name: "LastContact",
width: 100,
format: "Y-m-d",
value: ""
}]
},
{
columnWidth: 0.5,
id: "p1_column2",
layout: "form",
items: [{
xtype: "combo",
width: 150,
id: "companyCombo",
fieldLabel: "Company",
emptyText: "Please Select",
store: ext_9,
displayField: "Description",
valueField: "Value",
hiddenName: "hidden_companyCombo",
typeAhead: true,
mode: "local",
triggerAction: "all",
selectOnFocus: true,
hiddenValue: ""
},
{
xtype: "combo",
width: 150,
id: "salesmanCombo",
emptyText: "Please Select",
fieldLabel: "Sales Manager",
store: ext_a,
displayField: "ListName",
valueField: "ARMID",
hiddenName: "hidden_salesmanCombo",
typeAhead: true,
mode: "local",
triggerAction: "all",
selectOnFocus: true,
hiddenValue: "",
value: ""
},
{
xtype: "combo",
width: 150,
id: "saleschanCombo",
emptyText: "Please Select",
fieldLabel: "Sales Channel",
store: ext_b,
displayField: "Description",
valueField: "ParameterID",
hiddenName: "hidden_saleschanCombo",
typeAhead: true,
mode: "local",
triggerAction: "all",
selectOnFocus: true,
hiddenValue: "",
value: ""
},
{
xtype: "combo",
id: "LanguageCombo",
fieldLabel: "Language",
name: "Language",
width: 150,
store: ext_c,
displayField: "Language",
valueField: "LanguageID",
hiddenName: "hidden_LanguageCombo",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText: "Select a Language...",
selectOnFocus: true,
allowBlank: false,
value: "Dutch",
hiddenValue: "NL",
msgTarget: "side"
},
{
xtype: "checkbox",
id: "TopProspect",
fieldLabel: "Top Prospect",
name: "TopProspect"
},
{
xtype: "combo",
width: 150,
id: "statusCombo",
fieldLabel: "Status",
store: ext_d,
displayField: "Description",
valueField: "ParameterID",
hiddenName: "hiddenProspectStatus",
typeAhead: true,
mode: "local",
triggerAction: "all",
selectOnFocus: true,
emptyText: "Please Select"
},
{
xtype: "combo",
width: 150,
id: "btsupplierCombo",
fieldLabel: "Supplier BT",
store: ext_e,
displayField: "Name",
valueField: "RelationID",
hiddenName: "hiddenBtSupplier",
typeAhead: true,
mode: "local",
triggerAction: "all",
selectOnFocus: true,
emptyText: "Please Select"
},
{
xtype: "combo",
width: 150,
id: "eesupplierCombo",
fieldLabel: " Supplier EE",
emptyText: "Please Select",
store: ext_f,
displayField: "Name",
valueField: "RelationID",
hiddenName: "hiddenEeSupplier",
typeAhead: true,
mode: "local",
triggerAction: "all",
selectOnFocus: true
},
{
xtype: "combo",
width: 150,
id: "turnoverEECombo",
fieldLabel: "Exp. Turn Over EE",
store: ext_10,
displayField: "Description",
valueField: "ParameterID",
hiddenName: "hiddenTurnoverEE",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText: "Please Select",
selectOnFocus: true,
hiddenValue: "",
value: ""
},
{
xtype: "combo",
width: 150,
id: "turnoverBTCombo",
fieldLabel: "Exp. Turn Over BT",
store: "turnoverStore",
displayField: "Description",
valueField: "ParameterID",
hiddenName: "hiddenTurnoverBT",
emptyText: "Please Select",
typeAhead: true,
mode: "local",
triggerAction: "all",
selectOnFocus: true,
hiddenValue: "",
value: ""
},
{
xtype: "checkbox",
id: "InternationalConsolidation",
fieldLabel: "International Cons",
name: "InternationalConsolidation"
},
{
xtype: "checkbox",
id: "InviteForEvents",
fieldLabel: "Invite For Events",
name: "InviteForEvents"
},
{
xtype: "checkbox",
id: "DMBlocked",
fieldLabel: "DM Blocked",
name: "DMBlocked",
checked: ""
},
{
xtype: "checkbox",
id: "EDMBlocked",
fieldLabel: "EDM Blocked",
name: "EDMBlocked",
checked: ""
}]
}]
},
{
xtype: "textarea",
id: "Remarks",
fieldLabel: "Remarks",
name: "Remarks",
width: "95%",
value: ""
}]
},
{
id: "card-1",
items: [{
id: "addressform",
hideBorders: false,
fieldLabel: "INVOICE ADDRESS",
layout: "form",
bodyStyle: "padding:5px 5px 0",
border: true,
frame: false,
bodyBorder: false,
items: [{
xtype: "combo",
id: "CountryID",
fieldLabel: "Country",
width: 150,
msgTarget: "side",
store: ext_11,
displayField: "Country",
valueField: "CountryID",
hiddenName: "hiddenCountryCombo",
typeAhead: true,
mode: "local",
triggerAction: "all",
allowBlank: false,
emptyText: "Select a Country...",
selectOnFocus: true,
hiddenValue: "",
value: "",
listeners: {
select: function (cmb, rec, ind) {
if (rec.get('CountryID') == 150) {
Ext.getCmp('Zipcode').show();
Ext.getCmp('ZipChars').show();
Ext.getCmp('OtherZipcode').hide();
Ext.getCmp('State').disable();
Ext.getCmp('OtherZipcode').allowBlank = true;
Ext.getCmp('nlzip').doLayout();
} else {
Ext.getCmp('Zipcode').hide();
Ext.getCmp('ZipChars').hide();
Ext.getCmp('Zipcode').allowBlank = true;
Ext.getCmp('ZipChars').allowBlank = true;
Ext.getCmp('OtherZipcode').show();
Ext.getCmp('State').enable();
//Ext.getCmp('State').allowBlank = false;
Ext.getCmp('nlzip').doLayout();
}
}
}
},
{
fieldLabel: "State",
hidden: false,
xtype: "textfield",
id: "State",
name: "State",
value: "",
allowBlank: true
},
{
id: "nlzip",
xtype: "compositefield",
allowBlank: false,
fieldLabel: "Zip Code",
msgTarget: "side",
width: 74,
layout: "hbox",
items: [{
xtype: "textfield",
hidden: false,
width: 69,
id: "OtherZipcode",
name: "OtherZipcode",
value: ""
},
{
hidden: true,
xtype: "textfield",
id: "Zipcode",
minLength: 4,
minLengthText: "Min 4 chars",
maxLength: 4,
maxLengthText: "Max 4 chars",
name: "Zipcode",
width: 40,
allowBlank: false,
msgTarget: "qtip",
value: ""
},
{
xtype: "textfield",
hidden: true,
id: "ZipChars",
name: "ZipChars",
minLength: 2,
minLengthText: "Min 2 chars",
maxLength: 2,
maxLengthText: "Max 2 chars",
width: 29,
value: "",
allowBlank: false,
msgTarget: "qtip"
}]
},
{
id: "HouseNumber",
allowBlank: true,
xtype: "panel",
layout: "hbox",
fieldLabel: "Number",
flex: 1,
border: false,
items: [{
xtype: "textfield",
id: "Number",
invalidClass: "invCmpField",
fieldLabel: "Number",
name: "Number",
width: 40,
allowBlank: true,
msgTarget: "side",
value: "",
listeners: {
blur: function () {
Ext.Ajax.request({
url: 'arm/data/zip',
success: function (result, request) {
var address = result.responseText.split(',');
Ext.getCmp('Street').setValue(address[0]);
Ext.getCmp('Town').setValue(address[1]);
},
params: {
zip: Ext.getCmp('Zipcode').getValue(),
zipChars: Ext.getCmp('ZipChars').getValue(),
houseNumber: Ext.getCmp('Number').getValue(),
houseNumberAdd: Ext.getCmp('NumberAddition').getValue()
}
});
}
}
},
{
xtype: "displayfield",
value: "Addition:",
style: "padding-left : 15px; padding-right : 5px;"
},
{
xtype: "textfield",
id: "NumberAddition",
name: "NumberAddition",
width: 29,
value: "",
listeners: {
blur: function () {
Ext.Ajax.request({
url: 'arm/data/zip',
success: function (result, request) {
var address = result.responseText.split(',');
Ext.getCmp('Street').setValue(address[0]);
Ext.getCmp('Town').setValue(address[1]);
},
params: {
zip: Ext.getCmp('Zipcode').getValue(),
zipChars: Ext.getCmp('ZipChars').getValue(),
houseNumber: Ext.getCmp('Number').getValue(),
houseNumberAdd: Ext.getCmp('NumberAddition').getValue()
}
});
}
}
}]
},
{
xtype: "textfield",
id: "Street",
fieldLabel: "Street",
name: "Street",
value: "",
allowBlank: false,
msgTarget: "side"
},
{
xtype: "textfield",
id: "Town",
fieldLabel: "City",
name: "Town",
value: "",
allowBlank: false,
msgTarget: "side"
},
{
xtype: "panel",
layout: "hbox",
bodyBorder: false,
items: [{
xtype: "checkbox",
id: "invoiceAsDelivery",
fieldLabel: " ",
bodyBorder: false,
hideLabel: false,
frame: false,
name: "invoiceAsDelivery",
handler: function (box, value) {
if (value === true) {
Ext.getCmp('deliveryPanel').hide();
} else {
Ext.getCmp('deliveryPanel').show();
}
}
},
{
html: "Use invoice address as delivery address?"
}]
}]
},
{
hideBorders: false,
id: "deliveryPanel",
name: "deliveryPanel",
fieldLabel: "VISITING \/ DELIVERY ADDRESS",
layout: "form",
border: true,
frame: false,
bodyStyle: "padding:5px 5px 0",
bodyBorder: false,
items: [{
xtype: "combo",
id: "DeliveryCountryID",
fieldLabel: "Country",
width: 150,
store: "countryStore",
displayField: "Country",
valueField: "CountryID",
hiddenName: "hiddenDeliveryCountry",
typeAhead: true,
mode: "local",
emptyText: "Select a Country...",
selectOnFocus: true,
hiddenValue: "",
value: "",
blankText: "Please select a Country",
msgTarget: "side",
listeners: {
select: function (cmb, rec, ind) {
if (rec.get('CountryID') == 150) {
Ext.getCmp('DeliveryZipcode').show();
Ext.getCmp('DeliveryZipChars').show();
Ext.getCmp('DeliveryOtherZipcode').hide();
Ext.getCmp('DeliveryState').disable();
Ext.getCmp('DeliveryState').allowBlank = true;
Ext.getCmp('DeliveryOtherZipcode').allowBlank = true;
Ext.getCmp('DeliveryNlzip').doLayout();
} else {
Ext.getCmp('DeliveryZipcode').hide();
Ext.getCmp('DeliveryZipChars').hide();
Ext.getCmp('DeliveryZipcode').allowBlank = true;
Ext.getCmp('DeliveryZipChars').allowBlank = true;
Ext.getCmp('DeliveryOtherZipcode').show();
Ext.getCmp('DeliveryState').enable();
//Ext.getCmp('DeliveryState').allowBlank = false;
Ext.getCmp('DeliveryNlzip').doLayout();
}
}
}
},
{
fieldLabel: "State",
hidden: false,
xtype: "textfield",
id: "DeliveryState",
name: "DeliveryState",
value: ""
},
{
id: "DeliveryNlzip",
allowBlank: true,
xtype: "compositefield",
layout: "hbox",
fieldLabel: "Zip Code",
msgTarget: "side",
width: 74,
items: [{
xtype: "textfield",
hidden: false,
id: "DeliveryOtherZipcode",
name: "DeliveryOtherZipcode",
value: ""
},
{
hidden: true,
xtype: "textfield",
id: "DeliveryZipcode",
fieldLabel: "Zipcode",
minLength: 4,
minLengthText: "Min 4 chars",
maxLength: 4,
maxLengthText: "Max 4 chars",
name: "DeliveryZipcode",
width: 40,
value: "",
msgTarget: "qtip"
},
{
hidden: true,
xtype: "textfield",
id: "DeliveryZipChars",
name: "ZipChars",
minLength: 2,
minLengthText: "Min 2 chars",
maxLength: 2,
maxLengthText: "Max 2 chars",
width: 29,
value: "",
msgTarget: "qtip"
}]
},
{
id: "DeliveryHouseNumber",
allowBlank: true,
xtype: "compositefield",
fieldLabel: "Number",
msgTarget: "side",
items: [{
xtype: "textfield",
id: "DeliveryNumber",
fieldLabel: "Number",
name: "DeliveryNumber",
width: 40,
value: "",
listeners: {
blur: function () {
Ext.Ajax.request({
url: 'arm/data/zip',
success: function (result, request) {
var address = result.responseText.split(',');
Ext.getCmp('DeliveryStreet').setValue(address[0]);
Ext.getCmp('DeliveryTown').setValue(address[1]);
},
params: {
zip: Ext.getCmp('DeliveryZipcode').getValue(),
zipChars: Ext.getCmp('DeliveryZipChars').getValue(),
houseNumber: Ext.getCmp('DeliveryNumber').getValue(),
houseNumberAdd: Ext.getCmp('DeliveryNumberAddition').getValue()
}
});
}
}
},
{
xtype: "displayfield",
value: "Addition:",
style: "padding-left : 15px; padding-right : 5px;"
},
{
xtype: "textfield",
id: "DeliveryNumberAddition",
name: "DeliveryNumberAddition",
width: 29,
value: "",
listeners: {
blur: function () {
Ext.Ajax.request({
url: 'arm/data/zip',
success: function (result, request) {
var address = result.responseText.split(',');
Ext.getCmp('DeliveryStreet').setValue(address[0]);
Ext.getCmp('DeliveryTown').setValue(address[1]);
},
params: {
zip: Ext.getCmp('Zipcode').getValue(),
zipChars: Ext.getCmp('ZipChars').getValue(),
houseNumber: Ext.getCmp('Number').getValue(),
houseNumberAdd: Ext.getCmp('NumberAddition').getValue()
}
});
}
}
}]
},
{
xtype: "textfield",
id: "DeliveryStreet",
fieldLabel: "Street",
value: "",
name: "DeliveryStreet"
},
{
xtype: "textfield",
id: "DeliveryTown",
fieldLabel: "City",
value: "",
name: "DeliveryTown"
}]
}]
},
{
id: "card-2",
items: [{
xtype: "panel",
layout: "column",
hideBorders: true,
border: false,
frame: false,
bodyBorder: false,
items: [{
layout: "form",
id: "p4_column1",
columnWidth: 0.5,
items: [{
xtype: "fieldset",
id: "FirstName",
fieldLabel: "First Name",
name: "FirstName",
msgTarget: "side",
listeners: {
change: function (firstName, newValue, oldValue) {
firstName.setValue(newValue.substring(0, 1).toUpperCase() + newValue.substr(1));

var initials = Ext.getCmp('Initials')
if (initials.getValue() == '') {
initials.setValue(newValue.substring(0, 1).toUpperCase() + '.');
}
}
}
},
{
xtype: "textfield",
id: "Initials",
fieldLabel: "Initials",
name: "Initials",
msgTarget: "side"
},
{
xtype: "textfield",
id: "Prefix",
fieldLabel: "Prefix",
name: "Prefix"
},
{
xtype: "textfield",
id: "LastName",
fieldLabel: "LastName",
name: "LastName",
msgTarget: "side",
listeners: {
change: function (thisField, newValue, oldValue) {
thisField.setValue(newValue.substring(0, 1).toUpperCase() + newValue.substr(1));
}
}
}]
},
{
columnWidth: 0.5,
id: "p4_column2",
layout: "form",
items: [{
xtype: "fieldset",
fieldLabel: "Gender",
id: "GenderFieldSet",
allowBlank: true,
defaultType: "radio",
items: {
xtype: "radiogroup",
hideLabel: true,
items: [{
boxLabel: "Male",
name: "Gender",
inputValue: 1,
width: 100
},
{
boxLabel: "Female",
name: "Gender",
inputValue: 0,
width: 100
}]
}
},
{
xtype: "textfield",
id: "Phone2",
fieldLabel: "Phone",
name: "Phone2",
msgTarget: "side",
value: "",
validator: function (value) {
if (value) {
if (!value.match(/^\d+$/)) return 'Only digits and no spaces allowed';
if (value.length < 10) return 'Needs to be at least 10 digits'
return true;
} else {
return true;
}

}
},
{
xtype: "textfield",
id: "Fax2",
fieldLabel: "Fax",
name: "Fax2"
},
{
xtype: "textfield",
id: "Email",
fieldLabel: "E-mail",
name: "Email",
msgTarget: "side",
vtype: "email"
}]
}]
}]
}]
});

Condor
8 Sep 2010, 4:35 AM
1. Your example is missing layouts.
Example: card-0 should be layout:'anchor' and the container with column layout should be anchor:'100%'.

2. Your example is overnested.
Example: card-1 should BE the addressform and not contain it.

3. You are using panels as containers everywhere. If you don't need titles, bbars, tbars, borders etc. then a plain container is faster.

avdhulst
8 Sep 2010, 4:47 AM
Thanks again. I'll try to implement your suggestions.

avdhulst
8 Sep 2010, 4:55 AM
I've "simplified" the code (at least, I tried to), but it still doesn't work... Trimmed it down to 3 cards, with only a few form fields, but still, the second panel is not being "sized". Is there still something wrong with the code?


var ext_8 = new Ext.form.FormPanel({
_arguments: [],
id: "ProspectNewCardPanel",
url: "arm\/form\/prospectnew?step=save&type=",
renderTo: "prospectForm",
layout: "card",
layoutConfig: {
deferredRender: true,
layoutOnCardChange: true
},
width: 780,
activeItem: 0,
bodyStyle: "padding:15px",
defaults: {
border: false,
width: 780,
bodyBorder: false,
hideMode: "offsets"
},
bbar: ["->",
{
id: "move-prev",
text: "&laquo; Previous",
handler: cardNav.createDelegate(this, [-1]),
disabled: true
},
{
id: "move-next",
text: "Next &raquo;",
handler: cardNav.createDelegate(this, [1])
},
{
id: "submit",
disabled: true,
text: "Submit",
handler: function () {
var form = Ext.getCmp('ProspectNewCardPanel').getForm();
form.submit({
success: function (form, action) {
Ext.getCmp('popup').close();
Adw.update('content', 'arm/details?id=' + action.result.id + '&type=prospect');
// Adw.aceSync('', 'prospect');
}
});
}
}],
items: [{
id: "card-0",
items: [{
xtype: "hidden",
id: "CustomerStart",
name: "CustomerStart",
value: ""
},
{
xtype: "hidden",
id: "CompanyType",
name: "CompanyType",
value: ""
},
{
xtype: "hidden",
id: "ACECustomerCode",
name: "ACECustomerCode",
value: ""
},
{
xtype: "hidden",
id: "IsHQ",
name: "IsHQ",
value: ""
},
{
xtype: "hidden",
id: "HeadquarterID",
name: "HeadquarterID",
value: ""
},
{
xtype: "hidden",
id: "RelationID",
name: "RelationID",
value: ""
},
{
xtype: "textfield",
id: "CompanyName",
fieldLabel: "CompanyName",
name: "CompanyName",
msgTarget: "side",
allowBlank: false,
value: ""
},
{
xtype: "textfield",
id: "ShortName",
fieldLabel: "Short Name",
name: "ShortName",
value: ""
}]
},
{
id: "card-1",
items: [{
xtype: "combo",
id: "CountryID",
fieldLabel: "Country",
width: 150,
msgTarget: "side",
store: ext_4,
displayField: "Country",
valueField: "CountryID",
hiddenName: "hiddenCountryCombo",
typeAhead: true,
mode: "local",
triggerAction: "all",
allowBlank: false,
emptyText: "Select a Country...",
selectOnFocus: true,
hiddenValue: "",
value: "",
listeners: {
select: function (cmb, rec, ind) {
if (rec.get('CountryID') == 150) {
Ext.getCmp('Zipcode').show();
Ext.getCmp('ZipChars').show();
Ext.getCmp('OtherZipcode').hide();
Ext.getCmp('State').disable();
Ext.getCmp('OtherZipcode').allowBlank = true;
Ext.getCmp('nlzip').doLayout();
} else {
Ext.getCmp('Zipcode').hide();
Ext.getCmp('ZipChars').hide();
Ext.getCmp('Zipcode').allowBlank = true;
Ext.getCmp('ZipChars').allowBlank = true;
Ext.getCmp('OtherZipcode').show();
Ext.getCmp('State').enable();
//Ext.getCmp('State').allowBlank = false;
Ext.getCmp('nlzip').doLayout();
}
}
}
},
{
fieldLabel: "State",
hidden: false,
xtype: "textfield",
id: "State",
name: "State",
value: "",
allowBlank: true
},
{
id: "nlzip",
xtype: "compositefield",
allowBlank: false,
fieldLabel: "Zip Code",
msgTarget: "side",
width: 74,
layout: "hbox",
items: [{
xtype: "textfield",
hidden: false,
width: 69,
id: "OtherZipcode",
name: "OtherZipcode",
value: ""
},
{
hidden: true,
xtype: "textfield",
id: "Zipcode",
minLength: 4,
minLengthText: "Min 4 chars",
maxLength: 4,
maxLengthText: "Max 4 chars",
name: "Zipcode",
width: 40,
allowBlank: false,
msgTarget: "qtip",
value: ""
},
{
xtype: "textfield",
hidden: true,
id: "ZipChars",
name: "ZipChars",
minLength: 2,
minLengthText: "Min 2 chars",
maxLength: 2,
maxLengthText: "Max 2 chars",
width: 29,
value: "",
allowBlank: false,
msgTarget: "qtip"
}]
}]
},
{
id: "card-2",
items: [{
xtype: "fieldset",
id: "FirstName",
fieldLabel: "First Name",
name: "FirstName",
msgTarget: "side",
listeners: {
change: function (firstName, newValue, oldValue) {
firstName.setValue(newValue.substring(0, 1).toUpperCase() + newValue.substr(1));

var initials = Ext.getCmp('Initials')
if (initials.getValue() == '') {
initials.setValue(newValue.substring(0, 1).toUpperCase() + '.');
}
}
}
},
{
xtype: "textfield",
id: "Initials",
fieldLabel: "Initials",
name: "Initials",
msgTarget: "side"
},
{
xtype: "textfield",
id: "Prefix",
fieldLabel: "Prefix",
name: "Prefix"
},
{
xtype: "textfield",
id: "LastName",
fieldLabel: "LastName",
name: "LastName",
msgTarget: "side",
listeners: {
change: function (thisField, newValue, oldValue) {
thisField.setValue(newValue.substring(0, 1).toUpperCase() + newValue.substr(1));
}
}
}]
}]
});

Animal
8 Sep 2010, 5:00 AM
You must height that container. card layout sizes children to fit within it.

Also, consider using Containers instead of Panels as cards if you don't want borders, toolbars, header or footer.

Condor
8 Sep 2010, 5:00 AM
1. Remove width:780 from defaults (card layout will take care of child sizing).
2. Shouldn't the cards be layout:'form'?
3. As Animal said: Either specify a height for tabpanel or make all containers autoHeight:true.

avdhulst
8 Sep 2010, 6:00 AM
I managed to make things work. Thanks to Condor and Animal :).