title: In Extjs get textfield value which is inside the custom fieldcontainer
body: <p>I am using extjs 4.1 and have created a custom fieldcontainer with xtype:ptextfield, it is created by extending a "FieldContainer" which has items img and textfield and what i want is to access the <strong>textfield value</strong> from <strong>ptextfield</strong> which is <strong>fieldcontainer</strong>.</p>
  
  <pre><code>Ext.onReady(function () {
  
      Ext.define('PTextField', {
          extend: 'Ext.form.FieldContainer',
          alias: 'widget.ptextfield',
          requires: ['Ext.form.TextField', 'Ext.Component'],
          alias: 'widget.ptextfield',
          height: 20,
          width: 170,
          fieldLabel: 'A',
          labelAlign: 'top',
          layout: {
              type: 'hbox'
          },
          BLANK_IMAGE_URL: '',
  
          initComponent: function () {
              var me = this;
              Ext.applyIf(me, {
                  items: [{
                      xtype: 'component',
                      height: 20,
                      width: 20,
                      autoEl: {
                          tag: 'img',
                          src: Ext.BLANK_IMAGE_URL
                      }
                  }, {
                      xtype: 'textfield',
                      itemId: 'textid',
                      width: 100
                  }]
              });
              this.callParent(arguments);
          }
      });
  
      Ext.create('Ext.window.Window', {
          title: 'Hello',
          height: 400,
          width: 400,
          //layout: 'fit',
          items: [{
              xtype: 'ptextfield',
              fieldLabel: 'First Name',
              id: 'pcontainer1',
              listeners: {
                  change: {
                      element: 'el', //bind to the underlying el property
                      fn: function () {
                          var me = this;
                          Ext.Ajax.request({
                              waitMsg: 'Saving changes...',
                              url: '/Home/SaveChanges',
                              jsonData: {
                                  id: this.id,
                                  value: this.down('#textid').getRawValue()
                              },
                              failure: function (response, options) {
                                  Ext.MessageBox.alert('Warning', 'Oops...');
                              },
                              success: function (response, options) {
                                  var text = response.responseText;
                                  // process server response here
                                  console.log('Changes saved successfully.');
                              }
                          });
                      }
                  }
              }
          }, {
              xtype: 'ptextfield',
              fieldLabel: 'Last Name',
              id: 'pcontainer2'
          }]
      }).show();
  });
  </code></pre>
  
  <p>In the below line i am getting "ptextfield" fieldcontainer in "this" and "this.id" is giving me "pcontainer1"
  but i am not able to figure out how to get the "value" of textfield which is sitting inside the "ptextfield" fieldcontainer.</p>
  
  <p>I am getting error at the below line:
  jsonData: { id: this.id, value: this.down('#textid').getRawValue() }</p>
  
  <p>Error is - this.down('#textid') is null (firebug)
  (chrome)
  Uncaught TypeError: Cannot call method 'getRawValue' of null 
  Ext.create.items.listeners.change.fn 
  (anonymous function) 
  Ext.apply.createListenerWrap.wrap</p>
  
  <p>where <code>"this.down(#textid').getRawValue()"</code> should give me <code>textfield value</code>, which i am not getting i am not able to traverse.</p>
  
  <p>Any help is appreciated.</p>