1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    17
    Vote Rating
    0
    umenokin is an unknown quantity at this point

      -1  

    Default New TreeComboBox plugin

    New TreeComboBox plugin


    Code:
    Ext.define("Ext.ux.form.field.TreeComboBox", {    extend : "Ext.form.field.Picker",
        alias: 'widget.treecombobox',
    
    
        requires : [
            'Ext.data.TreeStore',
            'Ext.tree.Panel'
        ],
    
    
        mixins: {
            bindable: 'Ext.util.Bindable'
        },
    
    
        config: {
            store: null,
            displayField: 'text',
            useArrow: false
        },
    
    
        initComponent : function() {
            var self = this;
            Ext.apply(self, {
                fieldLabel : self.fieldLabel,
                labelWidth : self.labelWidth
            });
            self.addEvents('groupSelected');
            self.callParent();
    
    
            this.bindStore(this.getStore());
            this.getStore().load();
        },
    
    
        createPicker: function() {
            var me = this,
                picker,
                pickerCfg = Ext.apply({
                    xtype: 'treepanel',
                    displayField: this.getDisplayField(),
                    autoScroll : true,
                    floating : true,
                    focusOnToFront : false,
                    shadow : true,
                    ownerCt : this.ownerCt,
                    useArrows : this.getUseArrow(),
                    store : this.getStore(),
                    frame: true,
                    rootVisible : false,
    
    
                    listeners: {
                        'checkchange': function(node, checked) {
                            node.cascadeBy(function(n) {
                                n.set('checked', checked);
                            });
    
    
                            this.updateTextfield();
                        },
                        scope: this
                    }
                }, me.listConfig, me.defaultListConfig);
    
    
            picker = me.picker = Ext.widget(pickerCfg);
    
    
            picker.on('beforehide', this.updateTextfield, this);
    
    
            return picker;
        },
    
    
        updateTextfield: function() {
            var names = [];
            this.getStore().getRootNode().cascadeBy(function(node) {
                if(node.get('checked')){
                    names.push(node.get(this.getDisplayField()));
                }
            }, this);
    
    
            this.setValue(names.join(', '));
        },
    
    
        getStoreListeners: function() {
            return {
                load: this.onStoreLoad
            };
        },
    
    
        onStoreLoad: function() {
            this.updateTextfield();
        }
    });
    To use it for example:
    Code:
    {
          xtype: 'treecombobox',
          store: 'TempTreeStore',
          width: 350,
          displayField: 'value',
          fieldLabel: 'Tree combo'
    }

  2. #2
    Sencha User
    Join Date
    Aug 2010
    Posts
    17
    Vote Rating
    0
    umenokin is an unknown quantity at this point

      0  

    Default


    Moved bug info from other not related posts:

    Hi guys. Using examples above i made implementation that works and looks fine in 4.2.1.
    But then tree popup shown first time it throws an error[E] Layout run failed. After this it works fine. Just want to get rid of this error.

    Made changes similar to ComboBox sources. Still shows an error [E] Layout run failed error then you open tree but at list list height does not limited by fixed value

  3. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    17
    Vote Rating
    0
    umenokin is an unknown quantity at this point

      0  

    Default


    Updated plugin to monitor store state instead TreePanel's 'beforehide'

    Code:
    Ext.define("Ext.ux.form.field.TreeComboBox", {
        extend : "Ext.form.field.Picker",
        alias: 'widget.treecombobox',
    
    
        requires : [
            'Ext.data.TreeStore',
            'Ext.tree.Panel'
        ],
    
    
        mixins: {
            bindable: 'Ext.util.Bindable'
        },
    
    
        config: {
            store: null,
            displayField: 'text',
            useArrow: false
        },
    
    
        initComponent : function() {
            var self = this;
            Ext.apply(self, {
                fieldLabel : self.fieldLabel,
                labelWidth : self.labelWidth
            });
            self.addEvents('groupSelected');
            self.callParent();
    
    
            this.bindStore(this.getStore());
            this.getStore().load();
        },
    
    
        createPicker: function() {
            var me = this,
                picker,
                pickerCfg = Ext.apply({
                    xtype: 'treepanel',
                    displayField: this.getDisplayField(),
                    autoScroll : true,
                    floating : true,
                    focusOnToFront : false,
                    shadow : true,
                    ownerCt : this.ownerCt,
                    useArrows : this.getUseArrow(),
                    store : this.getStore(),
                    frame: true,
                    rootVisible : false,
    
    
                    listeners: {
                        'checkchange': function(node, checked) {
                            node.cascadeBy(function(n) {
                                n.set('checked', checked);
                            });
    
    
                            this.updateTextfield();
                        },
                        scope: this
                    }
                }, me.listConfig, me.defaultListConfig);
    
    
            picker = me.picker = Ext.widget(pickerCfg);
    
    
            return picker;
        },
    
    
        updateTextfield: function() {
            var names = [];
            this.getStore().getRootNode().cascadeBy(function(node) {
                if(node.get('checked')){
                    names.push(node.get(this.getDisplayField()));
                }
            }, this);
    
    
            this.setValue(names.join(', '));
        },
    
    
        getStoreListeners: function() {
            return {
                load: this.updateTextfield,
                update: this.updateTextfield
            };
        }
    });

  4. #4
    Sencha User
    Join Date
    Jun 2013
    Posts
    1
    Vote Rating
    0
    dyymary02 is on a distinguished road

      0  

    Default This code is not very clea

    This code is not very clea


    This code is not very clear, I am a novice, just contact this industry, I hope I can be a lot of learning.

  5. #5
    Sencha User
    Join Date
    May 2014
    Posts
    1
    Vote Rating
    0
    lupe is on a distinguished road

      0  

    Default TreeComboBox selection is not working

    TreeComboBox selection is not working


    TreeComboBox selection is not working while using this widget. Please send a solution to this issue.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    Copenhagen
    Posts
    32
    Vote Rating
    0
    Igor.Szyporyn is on a distinguished road

      0  

    Default


    Code:
    Ext.apply(self, {
        fieldLabel : self.fieldLabel,
        labelWidth : self.labelWidth
    });
    This will get you nowhere I think - it will do nothing - all you are saying is that A == A

    But if you go

    Code:
    initComponent: function () {
        var i_self = this,
            o_config = i_self.initialConfig;
    
        Ext.apply(i_self, {
            fieldLabel: o_config.fieldLabel || i_self.fieldLabel,
            labelWidth: o_config.labelWidth || i_self.labelWidth
        });
        .....
    },
    ...
    Then it would work - IMO that is - I may be wrong...