ExtJs - Cannot get predefined id value on click event

Question

When i click to the button, it fire to ajax call and send button's id with request. Everthing works except my predefined button id does not come with request. It comes with value 'ext6-gen'. Do anyone know what i suppose to do for getting my predefined id.

//i defined a container with a textfield and button
var c2 = Ext.extend(Ext.Container, {
   id : c2, initComponent : function() {
      this.items = [ {
         xtype : 'textfield', id : 'c3'}
      , {
         xtype : 'button', id : 'c4'} //it has id!!!
      ], c2.superclass.initComponent.call(this); }
   }
); 

Ext.onReady(function() {
   var HttpReq = function(e, t) {
      var elm = Ext.get(e.target); 
      Ext.Ajax.request( {
         loadMask : true, 
         url : 'Default.sample', 
         params : {id : elm.id}, 
         success : function(resp) {alert(resp.responseText); }
         }); 
      }; 
      Ext.get('c4').on('click', HttpReq); //i assign click event to button
}); 

Answer 1

i found something. ext button element wraps html input element with a table. That html element has different id than ext button element.

But still dont know how to get ext button element on event call.

Thank you.

Answer 2

Instead of

params : {id : elm.id}, 

try

params : {id : e.id}, 

Answer 3

it still gives dom element's id after use e.id . it will be better if i paste HTML code. This is Ext.Button generated HTML code;

<table cellspacing="0" class="x-btn   x-btn-noicon " id="c4">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr><td class="x-btn-tl"><i>&nbsp;</i></td>
    <td class="x-btn-tc"></td><td class="x-btn-tr"><i>&nbsp;</i></td>
</tr>
<tr><td class="x-btn-ml"><i>&nbsp;</i></td>
    <td class="x-btn-mc"><em unselectable="on" class="">
          <button type="button" id="ext-gen5" class=" x-btn-text">&nbsp;</button>  </em>   </td>
    <td class="x-btn-mr" id="ext-gen6"><i>&nbsp;</i></td>
</tr>
<tr>
    <td class="x-btn-bl"><i>&nbsp;</i></td>
    <td class="x-btn-bc"></td><td class="x-btn-br"><i>&nbsp;</i></td>
</tr>

i want to get id="c4" but it comes with id="ext-gen5"

Thank you

Answer 4

Finally i found!

i know it is silly, but it took a day to find it :(.

i just change e.id to this.id then it sends wrapper ext element's id.

Ext.onReady(function() {
   var HttpReq = function(e, t) {
      //var elm = Ext.get(e.getTarget());
      //var targetEl = Ext.fly(elm.id);
      //alert(this.id);
      //elm.highlight();
      Ext.Ajax.request( {
         loadMask : true, url : 'Default.sample', params : {
            id : this.id}
         , success : function(resp) {
            alert(resp.responseText); }
         }
      ); }; 

done.