Customize button text in a treePanel

[Yoyo29]

Hi,

Here's a part of my code

Ext.apply(this, {
    items: [{
            xtype: 'treepanel',
            width: 600,
            height: 'auto',
            frame: true,
            title: 'Radio Access Network items',
            autoScroll: true,
            rootVisible: false,
            store: this.storeMaintenanceRan,
            selModel: 'rowmodel',


            columns: [{
                xtype: 'treecolumn',
                text: 'Name',
                flex: 2,
                sortable: false,
                dataIndex: 'name'
            }, {
                text: 'Type',
                flex: 1,
                dataIndex: 'type',
                sortable: false,
                renderer: this.dummyRenderer
            }, {
                text: 'Status',
                flex: 1,
                dataIndex: 'status',
                sortable: false
            }, {
                xtype: 'widgetcolumn',
                flex: 1,
                widget: {
                    xtype: 'button',
                    text: 'Action',
                    scope: this,
                    handler: 'onActionClick'
                },
            }],
            listeners: {
                select: function (record, index, eOpts) {
                    console.log("select");
                },
                itemexpand: function () {
                    console.log("expand");
                },
                itemcollapse: function () {
                    console.log("collapse");
                },
            }
        },


    ]
});

What I need to do is to be able to change the text if the widget button, according to my store.

How can I have access to the button context before rendering so that I can modify the text to display ?


Thanks in advance.

[aravindballa]

Hello,

You can bind a variable to the viewModel and use it in the text of widget button so that whenever variable changes, the text also changes.

[guilherme.lopes]

HI,

You should set your panel with rowViewModel: true (see: http://docs.sencha.com/extjs/6.5.2/c...g-rowViewModel). Two properties (record and recordIndex) will be created and you can access them via bind at row level.

Your code would look like this if you wanted to set your Button text to the value of status:

Ext.create('Ext.tree.Panel', {
    width: 600,
    height: 'auto',
    frame: true,
    title: 'Radio Access Network items',
    autoScroll: true,
    rootVisible: false,
    store: this.storeMaintenanceRan,
    selModel: 'rowmodel',
        rowViewModel: true,


    columns: [{
        xtype: 'treecolumn',
        text: 'Name',
        flex: 2,
        sortable: false,
        dataIndex: 'name'
    }, {
        text: 'Type',
        flex: 1,
        dataIndex: 'type',
        sortable: false,
        renderer: this.dummyRenderer
    }, {
        text: 'Status',
        flex: 1,
        dataIndex: 'status',
        sortable: false
    }, {
        xtype: 'widgetcolumn',
        flex: 1,
        widget: {
            xtype: 'button',
                          bind: '{record.status}',
            scope: this,
            handler: 'onActionClick'
        },
    }],
    listeners: {
        select: function (record, index, eOpts) {
            console.log("select");
        },
        itemexpand: function () {
            console.log("expand");
        },
        itemcollapse: function () {
            console.log("collapse");
        },
    }
});

Here is one example using fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29fr