ext js如何动态更改xtype_javascript-动态更新Extjs autoEl：’button’文本和CSS

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

}

}

});

解决方法:

因为使用的是组件,所以没有通常的按钮方法.

您将需要做PreviewEl.getEl().dom.value =’New Text’;

标签：extjs,json,javascript,extjs4-1

来源： https://codeday.me/bug/20191028/1955750.html