PDA

View Full Version : Textfield (and others), remove extra markup



xjpmauricio
13 Sep 2013, 8:02 AM
Hi, is there a way to remove all the table markup from a textfield and just leave the label and input markup?


This is the html markup generated by a single field:


<table class="x-field x-form-item x-field-default" cellpadding="0" id="textfield-1009" style="table-layout: fixed;">
<tbody>
<tr id="textfield-1009-inputRow">
<td id="textfield-1009-labelCell" style="display:none;" valign="top" halign="left" width="105" class="x-field-label-cell"><label id="textfield-1009-labelEl" for="textfield-1009-inputEl" class="x-form-item-label x-unselectable x-form-item-label-left" style="width:100px;margin-right:5px;" unselectable="on"></label></td>
<td class="x-form-item-body " id="textfield-1009-bodyEl" colspan="3" role="presentation" style="width: 150px;"><input id="textfield-1009-inputEl" type="text" size="1" name="textfield-1009-inputEl" class="x-form-field x-form-text" autocomplete="off" aria-invalid="false" data-errorqtip="" style="width: 100%;"></td>
</tr>
</tbody>
</table>


Is there a way to keep just this section of the markup:
<label id="textfield-1009-labelEl" for="textfield-1009-inputEl" class="x-form-item-label x-unselectable x-form-item-label-left" style="width:100px;margin-right:5px;" unselectable="on"></label>
<input id="textfield-1009-inputEl" type="text" size="1" name="textfield-1009-inputEl" class="x-form-field x-form-text" autocomplete="off" aria-invalid="false" data-errorqtip="" style="width: 100%;">

A nice feature of extjs would be the possibility to write some of the controls using pure HTML. Something like:

<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">

...and then the CSS would do the rest...

ettavolt
15 Sep 2013, 10:48 PM
Use an 'auto' component layout and override renderTpl. However, beware, that your field must have a wrapping element, configured with autoEl.