PDA

View Full Version : The curious case of the disappearing button



alphadogg
26 Nov 2010, 11:37 AM
If I add a height to this FormPanel, the button disappears. Otherwise, it is visible. The button is there in HTML in both cases. Why?



var formLogin = new Ext.FormPanel({
labelWidth: 75,
url: '/User/Login',
standardSubmit: true,
frame: true,
bodyStyle: 'padding:5px',
layout: 'form',
height: 125,
border: false,
defaults:
{
msgTarget: 'side',
validationEvent: false
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Password',
id: 'password',
inputType: 'password',
allowBlank: false,
blankText: 'You must enter your password.',
vtype: 'password', // defined at end of this file
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
var form = field.ownerCt.getForm();
form.submit();
}
}
}
}
],
buttonAlign: 'center',
buttons: [
{
text: 'Login',
handler: function() {
formLogin.getForm().submit();
}
}
]
});
The FormPanel is nested in another panel:



var tableLayout = new Ext.Panel({
layout: 'table',
title: 'Verify Site Key / Enter Password',
headerCfg: {
cls: 'cpop-user-login-headerCenter'
},
border: false,
layoutConfig: {
columns: 2,
tableAttrs: { style: { 'margin-right': 'auto', 'margin-left': 'auto', 'margin-top':'10px' } }
},
items: [
siteKey,
formLogin,
forgotBox
]
});

Condor
27 Nov 2010, 7:13 AM
It's probably because of the unusual styling you use for your table.

I would recommend dropping table layout and use a hbox/vbox combination instead.

alphadogg
27 Nov 2010, 10:06 AM
Actually, I tried it first that way, but had issues there too. The following results in nothing appearing. If I move the { html: 'sitekey' } item to the altLayout Panel, the item gets displayed.



var leftSide = new Ext.Panel({
layout: 'vbox',
border: false,
items: [
{ html: 'sitekey' }
//,{ html: 'sitecaption' }
]
});

var altLayout = new Ext.Panel({
layout: 'hbox',
//align: 'top',
//pack: 'center',
title: 'Verify Site Key / Enter Password',
headerCfg: {
cls: 'cpop-user-login-headerCenter'
},
border: false,
items: [
leftSide
]
});


Of course, I should mention that altLayout (or the original table layout) is also nested in a larger border layout.



CPOPExt.UIObjects.Viewport = function() {
return ({
layout: "border",
items: [
{
region: "north",
id: "ViewportHeaderContainer",
bodyCssClass: "headerPanel",
height: 80,
layout: "border",
border: false,
items: [
{
region: "north",
id: "ViewportLogoArea",
bodyCssClass: "headerPanel",
height: 50,
border: false,
html: "<a href='/' title='Click here to return to the Home page'><img src='/Images/logo_ow.png' /></a>"
},
{
region: "center",
id: "ViewportToolbarArea",
bodyCssClass: "headerPanel",
xtype: "toolbar",
border: false,
items: [
{ xtype: "tbtext", id: "welcomeName", text: userWelcome },
'->',
{ xtype: "tbspacer" },
{ xtype: "button", text: "Help", iconCls: "icon-master-help" },
{ xtype: "tbspacer" },
{
xtype: (isUserDataEmpty()) ? "tbspacer" : "button",
text: (isUserDataEmpty()) ? "" : "Sign Out",
iconCls: (isUserDataEmpty()) ? "" : "icon-master-signout",
handler: logOut
}
]
}
]
},
{
region: "west",
id: "ViewportNavContainer",
bodyCssClass: "accPanel",
layout: "accordion",
width: 200,
border: false,
hidden: (isUserDataEmpty()) ? true : false,
layoutConfig: {
fill: false
}
},
{
region: "center",
id: "ViewportBodyContainer",
bodyCssClass: "bodyPanel",
layout: "fit",
border: false
},
{
region: "south",
id: "ViewportFooterContainer",
bodyCssClass: "footerPanel",
html: "<div id='masterFooter'>xxxxxxx, LLC &copy; 2010</div>",
height: 25
}
]
});
};

Condor
27 Nov 2010, 12:03 PM
align an pack are layout config options (then need to be specified in layoutConfig).

alphadogg
27 Nov 2010, 12:08 PM
Thanks, that helps, but the leftSide still won't show:



var leftSide = new Ext.Panel({
layout: 'vbox',
border: false,
items: [
{ html: 'leftSide' }
]
});

var altLayout = new Ext.Panel({
layout: 'hbox',
layoutConfig: {
align: 'top',
pack: 'center'
},
title: 'Verify Site Key / Enter Password',
headerCfg: {
cls: 'cpop-user-login-headerCenter'
},
border: false,
items: [
{ html: 'altLayout' }
, leftSide
]
});

alphadogg
27 Nov 2010, 6:19 PM
I see nothing on the page when using this slimmed-down test code. No errors according to Firebug. Also, when I change the two sub-panels from 'vbox' to 'fit', I see the first item in the items array. So, there's something I am doing wrong nesting vboxes in an hbox.



var leftSide = new Ext.Panel({
layout: 'vbox',
layoutConfig: {
align: 'center',
pack: 'center'
},
border: false,
items: [
{ html: 'sitekey' }
, { html: 'sitecaption' }
]
});

var rightSide = new Ext.Panel({
layout: 'vbox',
layoutConfig: {
align: 'center',
pack: 'center'
},
border: false,
items: [
{ html: 'leftSide' }
, { html: 'forgot' }
]
});

var altLayout = new Ext.Panel({
layout: 'hbox',
layoutConfig: {
align: 'top',
pack: 'center'
},
title: 'Verify Site Key / Enter Password',
headerCfg: {
cls: 'cpop-user-login-headerCenter'
},
border: false,
items: [
leftSide
, rightSide
]
});

Condor
28 Nov 2010, 1:58 AM
hbox items need a width or 'flex' and vbox items a height or 'flex'.

alphadogg
28 Nov 2010, 9:34 PM
Thanks for your continued help, Condor. Much of this doesn't seem to be easy to glean from the API docs.

Anyways, this final layout below seems to work for me. The only residual problem is that the error warnings, with msgTarget: 'side', are not visible (just a couple of pixels off the left edge of the exclamation icon is visible.)



var formLogin = new Ext.form.FormPanel({
standardSubmit: true,
bodyStyle: 'padding:5px',
border: false,
width: 274,
height: 155,
defaultType: 'textfield',
defaults: {
width: 180,
msgTarget: 'side',
validationEvent: false
},
hideLabels: false,
labelAlign: 'left',
labelWidth: 70,
labelPad: 5,
layoutConfig: {
labelSeparator: ':'
},
items: [
{
fieldLabel: 'User',
name: 'userName',
id: 'userName',
readOnly: true,
value: CPOPExt.Data.UserData.UserName
},
{
fieldLabel: 'Password',
id: 'password',
inputType: 'password',
allowBlank: false,
blankText: 'You must enter your password.',
vtype: 'password', // defined at end of this file
listeners: {
specialkey: function(field, e) {
if (e.getKey() == e.ENTER) {
var form = field.ownerCt.getForm();
form.submit();
}
}
}
}
],
buttonAlign: 'center',
buttons: [
{
text: 'Login',
handler: function() { formLogin.getForm().submit(); }
}
]
});

var siteCaption = new Ext.BoxComponent({
xtype: 'box',
width: 125,
height: 25,
cls: 'cpop-user-login-caption',
autoEl: {
tag: 'div',
html: 'caption'
}
});

var siteKey = new Ext.BoxComponent({
xtype: 'box',
width: 125,
height: 125,
autoEl: {
tag: 'img',
src: '/Image/SiteKey?userName=' + CPOPExt.Data.UserData.UserName
}
});

var forgotBox = new Ext.BoxComponent({
xtype: 'box',
width: 275,
cls: 'cpop-user-login-forgot',
ctCls: 'cpop-user-login-forgotbox',
autoEl: {
tag: 'a',
href: '/User/AskQuestion',
html: 'Forgot Password?'
}
});

var leftSide = new Ext.Panel({
layout: 'vbox',
width: 125,
height: 200,
layoutConfig: {
align: 'center',
pack: 'start'
},
border: false,
items: [
siteKey,
siteCaption
]
});

var rightSide = new Ext.Panel({
layout: 'vbox',
width: 275,
height: 200,
layoutConfig: {
align: 'center',
pack: 'start'
},
border: false,
items: [
formLogin,
forgotBox
]
});

var altLayout = new Ext.Panel({
layout: 'hbox',
width: 400,
layoutConfig: {
align: 'stretch',
pack: 'center'
},
title: 'Verify Site Key / Enter Password',
bodyStyle: 'padding:20px;',
headerCfg: {
cls: 'cpop-user-login-headerCenter'
},
border: false,
items: [
leftSide,
rightSide
]
});

Condor
28 Nov 2010, 11:12 PM
You'll have to make the form wider. You currently have:
274 (width) - 5 (padding) - 70 (labelWidth) - 5 (labelPad) - 180 (width) - 5 (padding) = 9px for the error icon.

alphadogg
30 Nov 2010, 6:08 AM
Even with a heavy reduction is the numbers, I don't see the icon. The textboxes seem to be left-aligned with no room left for the error icon. I'm guessing there some issue maybe further up the chain resulting in no space left over (after all the calculations are done)?

Here's the most up-to-date test code:


var formLogin = new Ext.form.FormPanel({
standardSubmit: true,
bodyStyle: 'padding:5px',
border: false,
width: 274,
height: 155,
defaultType: 'textfield',
defaults: {
width: 100,
msgTarget: 'side',
validationEvent: false
},
hideLabels: false,
labelAlign: 'left',
labelWidth: 20,
labelPad: 5,
layoutConfig: {
labelSeparator: ':'
},
items: [
{
fieldLabel: 'User',
name: 'userName',
id: 'userName',
readOnly: true,
value: CPOPExt.Data.UserData.UserName
},
{
fieldLabel: 'Password',
id: 'password',
inputType: 'password',
allowBlank: false,
blankText: 'You must enter your password.',
vtype: 'password', // defined at end of this file
listeners: {
specialkey: function(field, e) {
if (e.getKey() == e.ENTER) {
var form = field.ownerCt.getForm();
form.submit();
}
}
}
}
],
buttonAlign: 'center',
buttons: [
{
text: 'Login',
handler: function() { formLogin.getForm().submit(); }
}
]
});

var siteCaption = new Ext.BoxComponent({
xtype: 'box',
width: 125,
height: 25,
cls: 'cpop-user-login-caption',
autoEl: {
tag: 'div',
html: 'caption'
}
});

var siteKey = new Ext.BoxComponent({
xtype: 'box',
width: 125,
height: 125,
autoEl: {
tag: 'img',
src: '/Image/SiteKey?userName=' + CPOPExt.Data.UserData.UserName
}
});

var forgotBox = new Ext.BoxComponent({
xtype: 'box',
width: 275,
cls: 'cpop-user-login-forgot',
ctCls: 'cpop-user-login-forgotbox',
autoEl: {
tag: 'a',
href: '/User/AskQuestion',
html: 'Forgot Password?'
}
});

var leftSide = new Ext.Panel({
layout: 'vbox',
width: 125,
height: 200,
layoutConfig: {
align: 'center',
pack: 'start'
},
border: false,
items: [
siteKey,
siteCaption
]
});

var rightSide = new Ext.Panel({
layout: 'vbox',
width: 275,
height: 200,
layoutConfig: {
align: 'center',
pack: 'start'
},
border: false,
items: [
formLogin,
forgotBox
]
});

var altLayout = new Ext.Panel({
layout: 'hbox',
width: 400,
layoutConfig: {
align: 'stretch',
pack: 'center'
},
title: 'Verify Site Key / Enter Password',
bodyStyle: 'padding:20px;',
headerCfg: {
cls: 'cpop-user-login-headerCenter'
},
border: false,
items: [
leftSide,
rightSide
]
});

CPOPExt.BuildPageUI = function () {
cntHandle = Ext.getCmp('ViewportBodyContainer');
cntHandle.removeAll();
cntHandle.add(altLayout);
cntHandle.doLayout();
Ext.QuickTips.init();
return;
};

Ext.apply(Ext.form.VTypes, {

passwordText: 'Passwords must be between 8 and 16 characters, containing three out of the four categories of characters: upper case letters, lower case letters, numbers and special characters.',

password: function(value, field)
{
var len = value.length;
var isMoreThanMin = (len >= 8);
var isLessThanMax = (len <= 16);
var meetsRules = /^(?:(?=^[^\s]{8,16}$)((?=.*?\d)(?=.*?[A-Z])(?=.*?[a-z])|(?=.*?\d)(?=.*?[^\w\d\s])(?=.*?[a-z])|(?=.*?[^\w\d\s])(?=.*?[A-Z])(?=.*?[a-z])|(?=.*?\d)(?=.*?[A-Z])(?=.*?[^\w\d\s]))^.*)$/.test(value);

return (isMoreThanMin && isLessThanMax && meetsRules);
},

});