title: How to get Ext JS component from DOM element
body: <p>Trying to create an inline edit form.
  I have a form that looks like this:</p>
  
  <pre><code>var editPic = "&lt;img src='https://s3.amazonaws.com/bzimages/pencil.png' alt='edit' height='24' width='24' style='margin-left: 10px;'/&gt;";
  var submitPic = "&lt;img id='submitPic' src='https://s3.amazonaws.com/bzimages/submitPic.png' alt='edit' height='24' width='24'/&gt;";
  
  Ext.define('BM.view.test.Edit', {
  extend: 'Ext.form.Panel',
  alias: 'widget.test-edit',
  
  layout: 'anchor',
  title: 'Edit Test',
  defaultType: 'displayfield',
  
  items: [
      {name: 'id', hidden: true},
  
      {
          name: 'name',
          fieldLabel: 'Name',
          afterSubTpl: editPic,
          cls: 'editable'
      },
      {
          name: 'nameEdit',
          fieldLabel: 'Name',
          xtype: 'textfield',
          hidden: true,
          cls: 'editMode',
          allowBlank: false,
          afterSubTpl: submitPic
      }
  ]
  });
  </code></pre>
  
  <p>The controller looks like this (a lot of events):</p>
  
  <pre><code>init: function() {
      this.control({
          'test-edit &gt; displayfield': {
              afterrender: this.showEditable
          },
          'test-edit': {
              afterrender: this.formRendered
          },
          'test-edit &gt; field[cls=editMode]': {
              specialkey: this.editField,
              blur: this.outOfFocus
          }
      });
  },
  
  outOfFocus: function(field, event) {
      console.log('Lost focus');
      this.revertToDisplayField(field);
  },
  
  revertToDisplayField: function(field) {
      field.previousNode().show();
      field.hide();
  },
  
  formRendered: function(form) {
      Ext.get('submitPic').on('click', function (event, object) {
          var field = Ext.get(object).parent().parent().parent().parent();
          var cmp = Ext.ComponentQuery.query('test-edit &gt; field[cls=editMode]');
      });
  },
  
  editField: function(field, e) {
      var value = field.value;
      if (e.getKey() === e.ENTER) {
          if (!field.allowBlank &amp;&amp; Ext.isEmpty(value)){
              console.log('Not permitted!');
          } else {
              var record = Ext.ComponentQuery.query('test-edit')[0].getForm().getRecord();
              Ext.Ajax.request({
                  url: '../webapp/tests/update',
                  method:'Post',
                  params: {
                      id: record.getId(),
                      fieldName: field.name,
                      fieldValue: field.value
                  },
                  store: record.store,
                  success: function(response, t){
                      field.previousNode().setValue(value);
                      t.store.reload();
                      var text = response.responseText;
                      // process server response here
                      console.log('Update successful!');
                  }
              });
  
          }
          this.revertToDisplayField(field);
  
      } else if (e.getKey() === e.ESC) {
          console.log('gave up');
          this.revertToDisplayField(field);
      }
  },
  
  showEditable: function(df) {
      df.getEl().on("click", handleClick, this, df);
  
      function handleClick(e, t, df){
          e.preventDefault();
          var editable = df.nextNode();
          editable.setValue(df.getValue());
          editable.show();
          editable.focus();
          df.hide();
      }
  },
  </code></pre>
  
  <p>I'm using the 'afterSubTpl' config to add the edit icon, and the accept icon.
  I have listeners set up to listen on click events concerning them, but after they are clicked, I only have the element created by Ext.get('submitPic'). Now I want to have access to the the Ext field and form that surround it. The parent method only brings back other DOM elements. How do I connect between them? You can see what I tried in  formRendered.</p>
  
  <p>I hope someone can clarify this little bit for me.</p>