Archive for the ‘ExtJS’ Category

CheckboxSelectionModel in ExtJS grid

I’ve tried to use CheckboxSelectionModel on grid, and there are no examples in documents for. It’s not clear in documentation. Ok, so you should create CheckboxSelectionModel object before it’s passing to grid as selModel, because you should specify it in columns config property. So there is example by the steps.

  1. Create CheckboxSelectionModel:
var sm = new Ext.grid.CheckboxSelectionModel();
  1. Include created object in columns list:
columns:[

sm,


{….. rest of your columns …..}

]

  1. Provide selectionModel object as current selection model for grid. You should provide selModel property in config options:
selMode: sm

Result:


Advertisements

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 😉