PDA

View Full Version : Overlabel (emptyText replacement)



oxyum
15 Aug 2008, 2:47 AM
I've solution for emptyText submit problem. It uses only real HTML labels, so it never submitted to server.

Article about this solution (not my) (http://alistapart.com/articles/makingcompactformsmoreaccessible)


/**
* Oxyum.Ext Extensions
*
* @author Ivan Fedorov, aka Oxyum
* @version 0.1
*
*/
Ext.override(Ext.layout.FormLayout, {
setContainer : function(ct){
Ext.layout.FormLayout.superclass.setContainer.call(this, ct);

if(ct.labelAlign){
ct.addClass('x-form-label-'+ct.labelAlign);
}

if(ct.hideLabels){
this.labelStyle = "display:none";
this.elementStyle = "padding-left:0;";
this.labelAdjust = 0;
}else{
this.labelSeparator = ct.labelSeparator || this.labelSeparator;
ct.labelWidth = ct.labelWidth || 100;
if(typeof ct.labelWidth == 'number'){
var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);
this.labelAdjust = ct.labelWidth+pad;
this.labelStyle = "width:"+ct.labelWidth+"px;";
this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';
}
if(ct.labelAlign == 'top'){
this.labelStyle = "width:auto;";
this.labelAdjust = 0;
this.elementStyle = "padding-left:0;";
}
if(ct.labelAlign == 'over'){

for (i in ct.items.items) {
item = ct.items.items[i];
if (typeof item == 'object') {
item.on('focus', function(el) {
Ext.fly(Ext.DomQuery.selectNode('label[@for='+el.id+']')).setVisible(false);
}, this);
item.on('blur', function(el) {
if (el.getRawValue().length < 1) {
Ext.fly(Ext.DomQuery.selectNode('label[@for='+el.id+']')).setVisible(true);
}
}, this);
}
}
this.labelSeparator = '';
(typeof ct.labelPad == 'number' ? ct.labelPad : 5)
this.labelStyle = "width:auto; padding-left:"+(typeof ct.labelPad == 'number' ? ct.labelPad : 5)+"px;";
this.labelAdjust = 0;
this.elementStyle = "padding-left:0;";
}
}

if(!this.fieldTpl){
var t = new Ext.Template(
'<div class="x-form-item {5}" tabIndex="-1">',
'<label for="{0}" style="{2}" class="x-form-item-label">{1}{4}</label>',
'<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
'</div><div class="{6}"></div>',
'</div>'
);
t.disableFormats = true;
t.compile();
Ext.layout.FormLayout.prototype.fieldTpl = t;
}
}});

.x-form-label-over .x-form-item label {
position: absolute;
z-index: 1;
color: gray;
}


{
layout: 'form',
labelAlign: 'over',
items: [
{
xtype: 'textfield',
fieldLabel: 'Overlabel'
}
]

}

JoomlaMan
28 Jan 2009, 11:07 AM
How does this solve anything if I want to use a fieldLabel apart from the overlabel?

Example:

Color: [Select a color.../blue/red/yellow]

It appears your solution would forbid me from using a color tag, or taking a jackhammer to my form structure in order to accommodate both the overlabel and the desired fieldLabel?

oxyum
28 Jan 2009, 12:55 PM
How does this solve anything if I want to use a fieldLabel apart from the overlabel?

Example:

Color: [Select a color.../blue/red/yellow]

It appears your solution would forbid me from using a color tag, or taking a jackhammer to my form structure in order to accommodate both the overlabel and the desired fieldLabel?
I've never try this, so I'm think that your task have no solution with my implementation now... but maybe we can add one more label for the field?