Basic Question on Ext.get()...

[jexxi]

Hi,
currently I use Ext 1.1 Beta2 and
a. create one pages with data fetch using Ajaxpro,
b. render the data into a html table using template.
Here are resulted table:


<TABLE border="1">
<TR><TD id="col00">1</TD><TD id="col01">2</TD></TR>
<TR><TD id="col10">3</TD><TD id="col11">4</TD></TR>
</TABLE>
I want to assign click event on each <TD> using the following code


for (var i=0; i<2; i++){
for (var j=0; j<2; j++) {
Ext.get(eval('col'+i+j)).on('click', function(){
alert('col'+i+j); //in here supposed to do particular things
});
}
}
Then I browse the page and click on all columns and the alert shows "col22".
I also try to change "Ext.get" with "new Ext.Element()" like the following


//Ext.get(eval('col'+i+j)).on('click', function(){
new Ext.Element(eval('col'+i+j),true).on('click', function(){
alert('col'+i+j);
});
Can anyone point me out, why the 'click' event pointed to the last assign event handler?

Thanks in advance,
Johan

[evant]

There is no need to use eval().

If you give each td a class, you could do this:



<TABLE border="1">
<TR><TD class="myClass" id="col00">1</TD><TD class="myClass" id="col01">2</TD></TR>
<TR><TD class="myClass" id="col10">3</TD><TD class="myClass" id="col11">4</TD></TR>
</TABLE>

Ext.select('td.myClass').on('click', function(e)
{
var td = Ext.get(e.getTarget());
alert('i am td ' + td.id);
}
);

[jexxi]

Thanks Evant, I'll give it a try.


There is no need to use eval().

If you give each td a class, you could do this:



<TABLE border="1">
<TR><TD class="myClass" id="col00">1</TD><TD class="myClass" id="col01">2</TD></TR>
<TR><TD class="myClass" id="col10">3</TD><TD class="myClass" id="col11">4</TD></TR>
</TABLE>

Ext.select('td.myClass').on('click', function(e)
{
var td = Ext.get(e.getTarget());
alert('i am td ' + td.id);
}
);