ExtJS – changing title for form fields dynamically – failed :( or “How can I prepare build from official ExtJS sorces

Couple of days ago I’ve tried to change title for form field for the form dynamically. And have faced problems. It looks like label element doesn’t contain ID-property. I’ve found standard template for all form-fields in ExtJS forms. So standart template is looking like:


<div class=”x-form-item {5}”>  <label for=”{0}” style=”{2}“>{1}{4}</label>
  <div class=”x-form-element” id=”x-form-el-{0}”
       style=”{3}“>
  </div>
</div>
<div class=”x-form-clear-left”>
</div>

But it’s easy to fix this issue. For example – you can travel via DOM to the label element and change innerHTML property of the element. But for was more interesting to understand how can I do build from the sources of ExtJS. And I’ve found that there is very interesting standard for build systems for such projects which is used (I guess so) by the ExtJS developers. So the name of the build – system is JSBuilder and it can be found here –http://code.google.com/p/js-builder/ It’s built using .net. It’s easy to use this system – you should open description file for the project (*.jsb). You can find build file for the ExtJS by the path: %ExtDirectory%/source/ext.jsb. After file was opened you should select modules you want to build and specify output directories.

Let’s back to our issue with label. For me I’ve changed standard template in %ExtDirectory%/source/widgets/form/Layout.js in function OnRender
in Ext.form.Layout class. So new template for me now looks like :


<div class=”x-form-item {5}”>
  <label id=”x-form-label-{0}” for=”{0}” style=”{2}“>
   {1}{4}</label>
  <div class=”x-form-element” id=”x-form-el-{0}” style=”{3}“>
  </div>
</div>
<div class=”x-form-clear-left”>
</div>

Here you can notice that I’ve add id property for the label. So now I can change innerHTML property of the label when it’s needed. Parameter #0 from the stack is ID for the rendered object. So after updates in source code I can easily update fieldLabel text:

Ext.get(‘x-form-label-‘ + currentField.id).innerHTML = “new title”;

Good luck 😉

Advertisements

No comments yet

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: