Clever Geek Handbook

Extjs update autoEl: 'button' text and css dynamically

I'm new to ExtJS, want to change the text of a button dynamically: My requirement is to give a preview of the button. To provide a preview, I created a component like this:

{
  xtype: 'container',
  width: '100%',
  padding: '20 0 20 0',
  itemId: 'preview-container',
  items: [
       {
          xtype: 'component',
          itemId: 'preview',
          autoEl    :'button'
       }
  ]
}

And my preview method looks like this: I want to update the button text from this function: I tried as below but didn't work.

updatePreview: function () {
    var previewEl = this.down('#preview').getEl(),
        formValues = this.getForm().getValues(),
        newStyles = {};
    if (previewEl) {
        previewEl.text = formValues.name;
        previewEl.applyStyles(newStyles);
    }
}

UPDATE: All my sample code included

    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);
            }
        }

    });
+3


source to share


2 answers


Since you are using a component, you don't have the usual button methods.



You will need to do previewEl.getEl().dom.value = 'New Text';

+4


source


Assuming your button selector is not the same as your text setting method.

You need to grab your button with itemId

var previewEl = this.down('[itemId=preview]');


and set the text correctly

previewEl.setText(formValues.name);

There may be other errors in your code, but these are the ones I can notice just by looking. You should also spend more time on documentation. http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.button.Button

0


source






More articles:


All Articles