PDA

View Full Version : how to append element in the ext js generated code?



erosszz
21 Dec 2009, 9:01 PM
i use the below code:


{
xtype: 'checkbox',
id: 'checkboxId',
boxLabel: 'Tooltip display',
handler: function(obj, checkedFlag) {
Ext.Msg.alert('Tooltip display', checkedFlag);
}
}


below is the generated html:


....
<tr class="x-toolbar-left-row">
<td id="ext-gen26" class="x-toolbar-cell">
....button
</td>
<td id="ext-gen28" class="x-toolbar-cell">
<div id="ext-gen29" class="x-form-check-wrap">
<input class=" x-form-checkbox x-form-field" autocomplete="off" id="checkboxId" name="checkboxId" type="checkbox">
<label id="ext-gen30" for="checkboxId" class="x-form-cb-label">Tooltip display
</label>
</div>
</td>
</tr>
....


would like to append another element next to checkbox at runtime..
and i think, it is recommended to append also with


.....
<td id="ext-gen28" class="x-toolbar-cell">
</td>
<td id="appendedId1" class="x-toolbar-cell">
<div id="appendedId2" class="x-form-check-wrap">
<input class=" x-form-checkbox x-form-field" autocomplete="off" id="appendedId3" name="appendedId3" type="checkbox">
</div>
</td>
.....


is there a best way to append an element with the generated html?

e.g.
1) get and create new copy of 'checkboxId' element
3) change the <td> <div> element id to 'appendedId1' 'appendedId2'
4) replace the <div> innerHTML to replace with new element
5) finally, append the created <td><div><new element> next to 'ext-gen28'