PDA

View Full Version : Field label 'bottom'?



arnoldvillasanta
25 Jan 2015, 9:03 PM
Hi,

Is it possible to put label at bottom of text field?
I'm required to have the UI look like a PDF/printed form where most of the field labels are centered below input fields.

A CSS style/class approach is good enough. I just want to get this over in a hurry.

Thanks in advance.

arnoldvillasanta
27 Jan 2015, 1:20 AM
Someone answered this question in SO:
http://stackoverflow.com/questions/28145088/extjs-text-field-label-at-bottom/28145759?iemail=1&noredirect=1#28145759

(http://stackoverflow.com/questions/28145088/extjs-text-field-label-at-bottom/28145759?iemail=1&noredirect=1#28145759The)The solution is to use the css below for the textfield:

.pdfField .x-form-item-label
{
display: table-footer-group;
text-align: center;
}

This works in Extjs 5.0.x but not in 4.2.x....
Any ideas?

Jad
27 Jan 2015, 2:40 AM
hi

in extjs 4 input's html use table not in ext 5

I think you have to override the labelableRenderTpl cfg like that



labelableRenderTpl: [


// body row. If a heighted Field (eg TextArea, HtmlEditor, this must greedily consume height.
'<tr role="presentation" id="{id}-inputRow" <tpl if="inFormLayout">id="{id}"</tpl> class="{inputRowCls}">',

// Label cell
'<tpl if="labelAlign==\'left\'">',
'<td role="presentation" id="{id}-labelCell" style="{labelCellStyle}" {labelCellAttrs}>',
'{beforeLabelTpl}',
'<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>',
// Required for Opera
' unselectable="on"',
'>',
'{beforeLabelTextTpl}',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'{afterLabelTextTpl}',
'</label>',
'{afterLabelTpl}',
'</td>',
'</tpl>',

// Body of the input. That will be an input element, or, from a TriggerField, a table containing an input cell and trigger cell(s)
'<td role="presentation" class="{baseBodyCls} {fieldBodyCls} {extraFieldBodyCls}" id="{id}-bodyEl" colspan="{bodyColspan}" role="presentation">',
'{beforeBodyEl}',

// Label just sits on top of the input field if labelAlign === 'top'
'<tpl if="labelAlign==\'top\'">',
'{beforeLabelTpl}',
'<div role="presentation" id="{id}-labelCell" style="{labelCellStyle}">',
'<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>',
// Required for Opera
' unselectable="on"',
'>',
'{beforeLabelTextTpl}',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'{afterLabelTextTpl}',
'</label>',
'</div>',
'{afterLabelTpl}',
'</tpl>',

'{beforeSubTpl}',
'{[values.$comp.getSubTplMarkup(values)]}',
'{afterSubTpl}',

'<tpl if="labelAlign==\'bottom\'">',
'{beforeLabelTpl}',
'<div role="presentation" id="{id}-labelCell" style="{labelCellStyle}">',
'<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>',
// Required for Opera
' unselectable="on"',
'>',
'{beforeLabelTextTpl}',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'{afterLabelTextTpl}',
'</label>',
'</div>',
'{afterLabelTpl}',
'</tpl>',
// Final TD. It's a side error element unless there's a floating external one
'<tpl if="msgTarget===\'side\'">',
'{afterBodyEl}',
'</td>',
'<td role="presentation" id="{id}-sideErrorCell" vAlign="{[values.labelAlign===\'top\' && !values.hideLabel ? \'bottom\' : \'middle\']}" style="{[values.autoFitErrors ? \'display:none\' : \'\']}" width="{errorIconWidth}">',
'<div role="presentation" id="{id}-errorEl" class="{errorMsgCls}" style="display:none"></div>',
'</td>',
'<tpl elseif="msgTarget==\'under\'">',
'<div role="presentation" id="{id}-errorEl" class="{errorMsgClass}" colspan="2" style="display:none"></div>',
'{afterBodyEl}',
'</td>',
'</tpl>',
'</tr>',
{
disableFormats: true
}
]