PDA

View Full Version : How to convert existing DOM to Ext.form.CheckboxGroup ???



Jerry.Wang
24 Sep 2008, 9:14 PM
Hi,

I am developing a javascript, which can enumerate the controls on the page ,can then convert them into Ext components.

First, I search the form tag in the page and then convert the form tag into Ext.form.BasicForm.


var forms = document.getElementsByTagName("form");
for (var i = 0; i < forms.length; i++)
{
var form = new Ext.form.BasicForm(forms[i]);
// ....
}


then, in each form tag, I enumerate the controls and convert into Ext components.
I succeed in converting the <input> to Ext.form.TextField by applyTo method.

But now I meet a problem, how to convert a CheckboxList into Ext.form.CheckboxGroup?

The HTML I generate for the CheckBoxGroup is:


<table cellpadding="0" cellspacing="0" border="0" ctrltype="checkboxgroup" id="Table1"
style="width: 200px">
<tr>
<td>
<input type="checkbox" id="txtSample40_0" name="txtSample40_0" disabled="true" checked="true"
value="22" title="22" />
</td>
<td>
<input type="checkbox" id="txtSample40_1" name="txtSample40_1" value="22" title="22" />
</td>
<td>
<input type="checkbox" id="txtSample40_2" name="txtSample40_2" value="22" title="22" />
</td>
<td>
<input type="checkbox" id="txtSample40_3" name="txtSample40_3" value="22" title="22" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="txtSample40_4" name="txtSample40_4" value="22" title="22" />
</td>
<td>
<input type="checkbox" id="txtSample40_5" name="txtSample40_5" value="22" title="22" />
</td>
<td>
</td>
<td>
</td>
</tr>
</table>


Is my html ok for a CheckboxGroup?
How can I convert it into a CheckboxGroup ctrl by applyTo method?

Can I convert it by applyToMarkup method? How to modify the generated HTML?
Thx

Condor
24 Sep 2008, 9:48 PM
Try:

Ext.select('table[ctrltype=checkboxgroup]').each(function(table) {
var columns = [];
table.select('tr:first td').each(function(td) {
columns.push(td.getWidth());
});
var items = [];
table.select('tr').each(function(tr) {
var row = [];
tr.select('input[type=checkbox]').each(function(input) {
row.push({
applyTo: input
});
});
items.push(row);
});
var cbg = new Ext.form.CheckboxGroup({
columns: columns,
items: items
});
cbg.render(table.dom.parentNode, table);
table.remove();
});

Warning: Completely untested code!