动态更新 Extjs autoEl :'button' 文本和 css

Posted 2023-02-26

【中文标题】动态更新 Extjs autoEl :\'button\' 文本和 css

【英文标题】：Update Extjs autoEl :'button' text and css dynamically动态更新 Extjs autoEl :'button' 文本和 css

【发布时间】：2014-12-10 07:37:55

【问题描述】：

我是 ExtJS 的新手，想要动态更改按钮的文本： 我的要求是提供按钮的预览。为了提供预览，我创建了一个组件，如下所示：

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

而我的更新预览方法如下，我想通过这个函数更新按钮的文字： 我已经尝试如下，但没有工作..

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

更新：包括我所有的代码示例

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

    );

【参考方案1】：

因为您使用的是组件，所以您没有通常的按钮方法。

你需要做previewEl.getEl().dom.value = 'New Text';

【参考方案2】：

猜测一下，您的按钮选择器是错误的，您设置文本的方法也是如此。

您需要通过 itemId 获取您的按钮

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

并正确设置文本

previewEl.setText(formValues.name);

您的代码中可能还有其他错误，但这些是我可以通过查看发现的错误。你也应该花更多的时间在文档上。 http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.button.Button

【讨论】：

它似乎对我不起作用，我认为我的完整代码中可能存在一些问题。请查看问题中的更新部分。

组件没有setText 方法。

糟糕，假设您的组件实际上是一个按钮。