我是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);
}
}
});
答案 0 :(得分:4)
因为您正在使用某个组件,所以您没有通常的按钮方法。
您需要执行previewEl.getEl().dom.value = 'New Text';
答案 1 :(得分:0)
猜测,按钮的选择器和设置文本的方法一样错误。
您需要通过itemId
获取按钮var previewEl = this.down('[itemId=preview]');
并正确设置文字
previewEl.setText(formValues.name);
您的代码中可能还有其他错误,但这些错误只是通过查看才能看到。你也应该花更多的时间在文档中。 http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.button.Button