Results 1 to 4 of 4

Thread: Add more TreePanel configs to TreePicker

    You found a bug! We've classified it as EXTJS-16121 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    148

    Default Add more TreePanel configs to TreePicker

    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...

  2. #2
    Sencha Premium User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781

    Default

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

  3. #3
    Sencha User
    Join Date
    Feb 2014
    Posts
    8

    Default

    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.

  4. #4
    Sencha User razvanioan's Avatar
    Join Date
    Feb 2008
    Location
    Romania
    Posts
    135

    Default

    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:

    PHP Code:
    {
      
    xtype'treepicker',
      
    //...
      
    listeners: {
        
    // of course that this can be defined into ViewController ...
        
    beforerender: function(field){
          
    // override here TreePicker.onItemClick method
          
    field.onItemClick = function(viewrecordnoderowIndexe) {
            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

    PHP Code:
    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
                            
    shrinkWrapDock2,
                            
    storeme.store,
                            
    floatingtrue,
                            
    displayFieldme.displayField,
                            
    columnsme.columns,
                            
    minHeightme.minPickerHeight,
                            
    maxHeightme.maxPickerHeight,
                            
    manageHeightfalse,
                            
    shadowfalse,
                            
    focusablefalse,
                            
    listeners: {
                                    
    scopeme,
                                    
    itemclickme.onItemClick
                            
    },
                            
    viewConfig: {
                                    
    listeners: {
                                            
    scopeme,
                                            
    renderme.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({
                            
    scopeme,
                            
    highlightitemme.repaintPickerView,
                            
    unhighlightitemme.repaintPickerView,
                            
    afteritemexpandme.repaintPickerView,
                            
    afteritemcollapseme.repaintPickerView
                    
    });
            }
            return 
    picker;
        }
    }); 
    And then on the field:

    PHP Code:
    {
      
    xtype'treepicker',
      
    //...
      
    treeConfig: {
        
    rootVisiblefalse
        
    //, ANY other Ext.tree.Panel config options goes here ...
      
    }

    Last edited by razvanioan; 2 Dec 2015 at 11:28 AM. Reason: override to add treeConfig option
    ---
    Razvan Ioan ANASTASESCU
    Senior WEB Developer

Posting Permissions

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