Add more TreePanel configs to TreePicker

[kerbo]

I'm trying to extend Ext.ux.TreePicker and wanted the root hidden. There is no way to do this with the current TreePicker. The only fix is to implement your own CreatePicker method which almost eliminates the value of extending TreePicker.

I would suggest adding these TreePanel config settings to TreePicker:

rootVisible
useArrows
minPickerWidth
listeners - in this case, to be added to the existing set of listeners defined on TreePanel

in fact, any likely config on TreePanel should be added...

[lumberjack]

Thanks for the report! I have opened a bug in our bug tracker to request the additional functionality.

[Edvardoh]

Bump - I've come across this as well, it would be very valuable if the treepicker would accept all of the underlying treepanel's config options. Additionally, it would be great if the treepicker could employ a multi-select option.

[razvanioan]

It seems that the UX must be overridden in order to pass any TreePanel config options (Picker).

Some quick fixes can be applied w/o overrides if we have desired method on TreePanel, but unfortunately there is NO setter method defined for 'rootVisible' config option (I think that this wouldn't even work) but maybe show/hide (root) node methods.

For example the quick fix I needed was to allow selecting ONLY LEAF nodes, and I've done it like this:

{
  xtype: 'treepicker',
  //...
  listeners: {
    // of course that this can be defined into ViewController ...
    beforerender: function(field){
      // override here TreePicker.onItemClick method
      field.onItemClick = function(view, record, node, rowIndex, e) {
        if (record.data.leaf) {
          this.selectItem(record);
        }
      }
      
      // example on how to apply some methods on TreePanel inside picker ...
      field.getPicker().setBorder(1);
    }
  } 

Update:

Here's the quick override of the TreePicker in order to pass a treeConfig option

Ext.define('App.overrides.ux.TreePicker', {
  override: 'Ext.ux.TreePicker',
    
    treeConfig: {},
    
    createPicker: function() {
        var me = this,
                picker = new Ext.tree.Panel(
                    Ext.apply({ // here's the magic
                        shrinkWrapDock: 2,
                        store: me.store,
                        floating: true,
                        displayField: me.displayField,
                        columns: me.columns,
                        minHeight: me.minPickerHeight,
                        maxHeight: me.maxPickerHeight,
                        manageHeight: false,
                        shadow: false,
                        focusable: false,
                        listeners: {
                                scope: me,
                                itemclick: me.onItemClick
                        },
                        viewConfig: {
                                listeners: {
                                        scope: me,
                                        render: me.onViewRender
                                },
                                navigationModel: 'boundlist'
                        }
                    }, me.treeConfig) // ANY treeConfig option passed will override above default ones
                ),
                view = picker.getView();

        if (Ext.isIE9 && Ext.isStrict) {
                // In IE9 strict mode, the tree view grows by the height of the horizontal scroll bar when the items are highlighted or unhighlighted.
                // Also when items are collapsed or expanded the height of the view is off. Forcing a repaint fixes the problem.
                view.on({
                        scope: me,
                        highlightitem: me.repaintPickerView,
                        unhighlightitem: me.repaintPickerView,
                        afteritemexpand: me.repaintPickerView,
                        afteritemcollapse: me.repaintPickerView
                });
        }
        return picker;
    }
}); 

And then on the field:

{
  xtype: 'treepicker',
  //...
  treeConfig: {
    rootVisible: false
    //, ANY other Ext.tree.Panel config options goes here ...
  }
}