在Extjs中动态更改超链接文本

Change hyperlink text dynamically in Extjs

本文关键字：超链接文本动态 Extjs 更新时间：2023-09-26

下面是我使用ExtJS:在页面中创建链接的代码

var linkTransValues = {
    xtype: 'box',
    id : 'testId',
    hidden : true,
    autoEl: {
        tag: 'a', 
        href: 'javascript:addCategoryValue()', 
        html: 'Add Transition Category'
    }
}

现在我想要的是，当用户从一个组合框中选择值时，无论组合框描述在哪里，该描述都应该出现在链接文本中。这是我在选择组合框时调用的代码：

transType.on('select', function(cbox, rec, index) {        
    Ext.getCmp("testId").transId = cbox.getValue();
    Ext.getCmp("testId").autoEl.html="dropdown description";
    Ext.getCmp("testId").show();
});

问题是，它正在更改html值，但新值并没有反映出它只显示初始值如何更改链接值。我该怎么改？

尝试

    var linkTransValues = {
             xtype: 'box',
             id : 'testId',
             hidden : true,
             autoEl: {tag: 'a', id: 'my-element', href: 'javascript:addCategoryValue()', html: 'Add Transition Category'}
            };
    Ext.get('my-element').update('new value');

    enter code here
View File :
Ext.define('ExtMVC.view.contact.ContactForm', {
    extend : 'Ext.form.Panel',
    alias : 'widget.contactform',
    name : 'contactform',
    frame : true,
    title : 'XML Form',
    items : [ {
        xtype : 'fieldset',
        title : 'Contact Information',
        defaultType : 'displayfield',
        defaults : {
            width : 280
        },
        items : [ {
            label : 'First',
            xtype : 'hyperLink',
            itemId : 'CData',
            id : 'CData',
            value : 'test'
        } ]
    } ]
});

Controller File :
Ext.define('ExtMVC.controller.Contacts', {
    extend : 'Ext.app.Controller',
    views : [ 'contact.ContactForm', 'contact.hyperLink' ],
    init : function() {
        this.control({
            '[itemId=CData]' : {
                afterrender : function(cmp) {
                    // debugger;
                    // cmp.down('[itemId=CData]').update('testst');
                    //Ext.get('CData-btnEl').update('new value');
                    //alert('rerer');
                    //$('#CData-btnEl').text('20/10/2013');
                    // console.log("tsrrtya::" +
                    // cmp.down('[itemId=CData]').update('New label'));
                },
                click : function(cmp) {
                    alert("test");
                    // debugger;
                    // cmp.down('[itemId=CData]').update('testst');
                    //Ext.get('CData-btnEl').update('new value');
                    //cmp.down('[itemId=CData]').setValue('NValue');
                    // console.log("tsrrtya::" +
                    // cmp.down('[itemId=CData]').update('New label'));
                }
            }
        });
    }
});

Dynamic HyperLink File
Ext.define('ExtMVC.view.contact.hyperLink', {
    extend : 'Ext.Component',
    alias : 'hyperLink',
    xtype : "hyperLink",
    itemId : "hyperLink",
    autoEl : 'a',
    renderTpl : '{label} <a href='"javascript:;'" id="{id}-btnEl">{value}</a>',
    config : {
        text : '',
        value : '',
        label : '',
        handler : function() {
        }
    },
    initComponent : function() {
        var me = this;
        me.callParent(arguments);
        this.renderData = {
            text : this.getText(),
            value : this.getValue(),
            label : this.getLabel()
        };
    },
    onRender : function(ct, position) {
        var me = this, btn;
        me.addChildEls('btnEl');
        me.callParent(arguments);
        btn = me.btnEl;
        me.on('afterrender', function () { });
        me.mon(btn, 'click', me.onClick, me);
    },
    onClick : function(e) {
        var me = this;
        if (me.preventDefault || (me.disabled && me.getHref()) && e) {
            e.preventDefault();
        }
        if (e.button !== 0) {
            return;
        }
        if (!me.disabled) {
            me.fireHandler(e);
        }
    },
    fireHandler : function(e) {
        var me = this, handler = me.handler;
        me.fireEvent('click', me, e);
        if (handler) {
            handler.call(me.scope || me, me, e);
        }
    }
});

 var linkTransValues = {
         xtype: 'box',
         id : 'testId',
         hidden : true,
         autoEl: {tag: 'a', id : 'testId',, href: 'javascript:addCategoryValue()', html: 'Add Transition Category'}
        };
Ext.get('testId').dom.href="your URL or function";