View Full Version : getEl().update('text') removes all formatting on DisplayField

27 Apr 2012, 2:27 PM
This seems like such a fundamental thing that I must be doing something wrong, however I've spent hours pouring through forums and examples and haven't seen a way to do fix this.

The issue is that I have a 'Ext.form.field.Display' that is displaying some text. I want to update that text.
I call:

var field = Ext.getCmp('label1'); // returns my widget defined below
field.getEl().update('some text'); // changes text on screen, loses formatting

The text DOES change, but everything inside of the innerHTML element in the dom is removed.. its set to exactly what i set in the update() call. In this case the original version that is rendered has padding, some style info, and a some <div> and <table> info in there that was stuck in by extjs. It looks correct when it is originally rendered. After the call the text inside the display field moves and doesn't look the same, so this is definitely killing all the formatting.

Starting innerHTML (from the dom)

"<tbody><tr id="label1-inputRow"><td id="label1-labelCell" style="" valign="top" halign="left" width="409"><label id="label1-labelEl" for="label1-inputEl" class="x-form-item-label x-form-item-label-left" style="width:402px;margin-right:7px;font-color: #00a200; font-size: 14px;">Test starting.. </label></td><td class="x-form-item-body " id="label1-bodyEl" role="presentation" colspan="2" style="width: 100%; "><div id="label1-inputEl" class="x-form-display-field" aria-invalid="false" data-errorqtip="" style="-webkit-user-select: text; "></div></td></tr></tbody>"

after calling update()

Test running for 1 second.

All I want to do is change the text. Not the formatting. Theoretically I could get the innerHTML, parse for the label, use a substring, edit just that, and then put it back together, but that can't possibly be the best practice here.

Can someone explain what I'm doing wrong here?

Definition of the widget that I'm changing the text in:

Ext.define('MyApp.view.MyDisplayField', {
extend: 'Ext.form.field.Display',
alias: 'widget.mydisplayfield',
height: 28,
padding: '2 0 0 0',
width: 561,
fieldLabel: 'Test starting..',
labelPad: 7,
labelSeparator: ' ',
labelStyle: 'font-color: #00a200; font-size: 14px;',
labelWidth: 402
}) ;

27 Apr 2012, 2:46 PM
I'm 2/2 today. Literally spend hours on a problem, then figure it out within 10 minutes of posting.

field.setFieldLabel('text') is the answer.

WebStorm 4, even with the ExtJs library plugged into it, doesn't find that method. No bueno.