Change hyperlink text dynamically in Extjs

Question

Below is the code by which I am creating a link in my page using ExtJS:

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

Now what I want is when user select value from one combo box whatever combo box description is there that description should come in link text here is my code I am calling on select of combo box:

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

Problem is that it is changing the html value but new value not reflecting its showing the initial value only how to change link value. How can I change that?

Answer 1

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

Answer 2

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

Answer 3

Try

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