title: Update Extjs autoEl :'button' text and css dynamically
body: <p>I am new to ExtJS, want to change the text of a button dynamically:
  My requirement is to give preview of button. To provide a preview I have created a component as follows:</p>
  
  <pre><code>{
    xtype: 'container',
    width: '100%',
    padding: '20 0 20 0',
    itemId: 'preview-container',
    items: [
         {
            xtype: 'component',
            itemId: 'preview',
            autoEl    :'button'
         }
    ]
  }
  </code></pre>
  
  <p>And my update preview method is as follows, I want update the text of the button from this function:
      I have tried like as follows, but not working..</p>
  
  <pre><code>updatePreview: function () {
      var previewEl = this.down('#preview').getEl(),
          formValues = this.getForm().getValues(),
          newStyles = {};
      if (previewEl) {
          previewEl.text = formValues.name;
          previewEl.applyStyles(newStyles);
      }
  }
  </code></pre>
  
  <p><strong>UPDATE: Included all my code sample</strong></p>
  
  <pre><code>    Ext.widget({
          xtype   : 'mz-form-widget',
          itemId: 'specialButtonRuleForm',
          defaults: {
              xtype: 'textfield',
              editable: false,
              listeners: {
                  change: function (cmp) {
                      // alert(1);
                     cmp.up('#specialButtonRuleForm').updatePreview();
                  }
              }
          },
          items: [
              {
                  xtype: 'textfield',
                  name: 'name',
                  fieldLabel: 'Button label',
                  allowBlank: false
              },
              {
                  xtype: 'container',
                  width: '100%',
                  padding: '20 0 20 0',
                  itemId: 'preview-container',
                      items: [
                          {
                              xtype: 'component',
                              itemId: 'preview',
                              autoEl    :'button'
                          }
                      ]
              }
          ],
  
          listeners: {
              afterrender: function (cmp) {
                  // alert(2);
                  cmp.updatePreview();
              }
          },
  
          updatePreview: function () {
              // alert(3);
              var previewEl = this.down('[itemId=preview]'),
                  formValues = this.getForm().getValues(),
                  newStyles = {};
  
              if (previewEl) {
                  previewEl.setText(formValues.name);
                  previewEl.applyStyles(newStyles);
              }
          }
  
      });
  </code></pre>