Extjs fieldLabel in Ext.tree.Panel

178 views Asked by At

I would like to have a "welcome text" before the directory tree in my Ext.tree.Panel, so something like that:

example

I wrote this code, but it doesn't work:

Ext.define('MyProject.view.permissions.Example', {
    extend: 'Ext.tree.Panel',

    requires: [
        'MyProject.view.permissions.ExampleController'
    ],

    controller: 'example',
    xtype: 'exampleWindow',
    store: 'examplePermissionTree',
    rootVisible: false,
    rowLines: false,
    //headerPosition: 'left',
    lines: false,
    autoLoad: false,
    autoExpand: false,

    items :[{
           xtype: 'displayfield',
           fieldLabel: 'welcome text',
           name: 'welcome',
     }],

    columns: {
        items: [ {
                    xtype: 'treecolumn',
                    dataIndex: 'text',
                    flex: 1
                }, {
                    xtype: 'booleancolumn',
                    flex: 0.3,
                    dataIndex: 'granted',
                    trueText: Strings.permissionGranted,
                    falseText: Strings.permissionNotGranted
                }, {
                    xtype: 'widgetcolumn',
                    flex: 0.2,
                    widget: {
                        xtype: 'button',
                        handler: 'onGroupClick',
                        text: Strings.permissionGrant

                    }
                }
            ]
        }
});

My problem is that the text doesn't appear. It appears only the directory tree. How Could I fix it? Should I use another approach?

1

There are 1 answers

1
AudioBubble On

1. Use Tools instead of items

Using tools instead of items can solve the problem. An array of Ext.panel.Tool configs/instances to be added to the header tool area. The code should be like

tools :[{
       xtype: 'displayfield',
       fieldLabel: 'welcome text',
       name: 'welcome',
      }],

2. Use label in lieu of displayfield

     tools :[{
            xtype: 'label',
            fieldLabel: 'welcome text',
            name: 'welcome',
           }],