Results 1 to 3 of 3

Thread: Customize button text in a treePanel

  1. #1
    Sencha User
    Join Date
    Jun 2017
    Posts
    7

    Default Customize button text in a treePanel

    Hi,

    Here's a part of my code
    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.

  2. #2
    Ext Support Team
    Join Date
    Nov 2017
    Posts
    46
    Answers
    2

    Default

    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.

  3. #3
    Sencha - Support Team
    Join Date
    Mar 2015
    Location
    Chicago
    Posts
    239
    Answers
    40

    Default

    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:
    Code:
    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
    Guilherme Lopes
    Sencha Support

Similar Threads

  1. How to customize the style of qtip on the TreeNodes in a TreePanel
    By sweetstian in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 10 Dec 2013, 6:35 AM
  2. Pie Chart - how to customize legend text
    By khairold in forum Ext 3.x: Help & Discussion
    Replies: 10
    Last Post: 2 Dec 2012, 10:20 PM
  3. How to customize the text in legend of bar chart
    By leon_tang in forum Ext: Discussion
    Replies: 2
    Last Post: 14 Dec 2011, 8:01 AM
  4. Replies: 1
    Last Post: 9 Apr 2011, 12:57 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •