1. #1
    Sencha User
    Join Date
    Jul 2011
    Location
    Korea
    Posts
    4
    Vote Rating
    0
    KangJuHo is on a distinguished road

      0  

    Default Resizable TreePicker

    Resizable TreePicker


    Base on 'Ext.form.field.Picker'

    Testing: ExtJS 4.1.0-rc3

    Thanks!

    ps: i can't english very well. Please understand that, even if the comment is invalid.

    PHP Code:
    /**
     * Combobox inside TreePanel
     * 
     * @author jhkang
     * @since 2012-03-27
     */
    Ext.define('Ext.ux.form.field.TreePicker', {
        
    extend'Ext.form.field.Picker',
        
    alias'widget.uxTreepicker',
        
        
    triggerClsExt.baseCSSPrefix 'form-arrow-trigger',
        
        
    config: {
            
    /**
             * @cfg {Ext.data.TreeStore} store
             * A tree store that the tree picker will be bound to
             */
            
    storenull,
            
            
    /**
             * @cfg {String} valueField
             * The field inside the model that will be used as the node's id.
             * Defaults to the default value of {@link Ext.tree.Panel}'s `valueField` configuration.
             */
            
    valueField'id',
            
            
    /**
             * @cfg {String} displayField
             * The field inside the model that will be used as the node's text.
             * Defaults to the default value of {@link Ext.tree.Panel}'s `displayField` configuration.
             */
            
    displayField'text',
            
            
    /**
             * @cfg {Array} columns
             * An optional array of columns for multi-column trees
             */
            
    columnsnull
        
    },
        
        
    /**
         * @cfg {String} emptyText
         * The default text to place into an empty field.
         */
        
    emptyText'Choose one...',
        
        
    /**
         * @cfg {Boolean} matchFieldWidth
         * Whether the picker dropdown's width should be explicitly set to match the width of the field. Defaults to false.
         */
        
    matchFieldWidthfalse,
        
        
    /**
         * @cfg {Boolean} selectOnlyLeafNode
         */
        
    selectOnlyLeafNodefalse,
        
        
    initComponent: function() {
            
    this.callParent(arguments);
            
            
    this.addEvents(
                
    /**
                 * @event select
                 * Fires when a tree node is selected
                 * @param {Ext.ux.TreePicker} picker        This tree picker
                 * @param {Ext.data.Model} record           The selected record
                 */
                
    'select'
            
    );
        },
        
        
    /**
         * Creates and returns the tree panel to be used as this field's picker.
         * @private
         */
        
    createPicker: function() {
            var 
    treePicker Ext.create('Ext.tree.Panel', {
                
    hiddentrue,
                
    floatingtrue,
                
    resizabletrue,
                
    resizeHandles's e se',
                
    autoScrolltrue,
                
    width500,
                
    minWidththis.bodyEl.getWidth(),
                
    height200,
                
    maxHeight300,
                
    shadowfalse,
                
    columnsthis.columns,
                
    rootVisiblethis.rootVisible,
                
    storethis.store,
                
    listeners: {
                    
    scopethis,
                    
    focusExt.bind(this.onFocusthis),
                    
    itemclickExt.bind(this.onItemClickthis)
                }
            });
            
            return 
    treePicker;
        },
        
        
    /**
         * @private
         */
        
    onFocus: function() {
            
    this.expand();
        },
        
        
    /**
         * Handles a click even on a tree node
         * @private
         * @param {Ext.tree.View} view
         * @param {Ext.data.Model} record
         * @param {HTMLElement} node
         * @param {Number} rowIndex
         * @param {Ext.EventObject} e
         */
        
    onItemClick: function(viewrecorditemindexeeOpts) {
            if (!
    this.selectOnlyLeafNode) {
                if (
    record.isLeaf()) {
                    
    this.selectNode(record);
                }
            } else {
                
    this.selectNode(record);
            }
        },
        
        
    /**
         * Changes the selection to a given record and closes the picker
         * @private
         * @param {Ext.data.Model} record
         */
        
    selectNode: function(record) {
            
    this.setFieldValue(record.raw[this.valueField], record.raw[this.displayField]);
            
    this.fireEvent('select'thisrecord.get(this.valueField));
            
    this.collapse();
        },
        
        
    /**
         * @private
         * @param {String} id
         * @param {String} text
         */
        
    setFieldValue: function(idtext) {
            
    this.setValue(id);
            
    this.setRawValue(text);
        },
        
        
    /**
         * Sets the specified value into the field
         * @param {Mixed} value
         */
        
    setValue: function(value) {
            var 
    me this,
                
    inputEl me.inputEl;
            
            if (
    inputEl && me.emptyText && !Ext.isEmpty(value)) {
                
    inputEl.removeCls(me.emptyCls);
            }
            
            
    me.value value;
            
    me.applyEmptyText();
        },
        
        
    setRawValue: function(value) {
            
    this.inputEl.dom.value value == null '' value;
        },
        
        
    /**
         * Returns the current data value of the field (the idProperty of the record)
         * @return {Mixed} value
         */
        
    getValue: function() {
            return 
    this.value;
        }
        
    }); 
    How to use
    PHP Code:
    Ext.define('App.example.TreeCombo', {
        
    extend'Ext.panel.Panel',
        
    alias'widget.treecombo',
        
        
    initComponent: function() {
            var 
    me this;
            
            
    Ext.apply(me, {
                
    itemIdme.itemId,
                
    title'Tree Combobox',
                
    region'center',
                
    bodyPadding5,
                
    items: [{
                    
    xtype'container',
                    
    layout'hbox',
                    
    items: [{
                        
    itemId'treecombo',
                        
    xtype'uxTreepicker',
                        
    displayField'text',
                        
    valueField'module',
                        
    rootVisiblefalse,
                        
    padding'0 5 0 0',
                        
    storeExt.data.StoreManager.lookup('exampleStore')
                    },{
                        
    xtype'button',
                        
    text'Test',
                        
    handler: function() {
                            
    console.log(me.down('#treecombo').getValue());
                        }
                    }]
                }]
            });
            
            
    me.callParent(arguments);
        }
        
    }); 
    Store
    PHP Code:
    var exampleStore Ext.create('Ext.data.TreeStore', {
        
    storeId'exampleStore',
        
    root: {
            
    expandedtrue,
            
    children: [{
                
    text'Editor',
                
    expandedtrue,
                
    children: [{
                    
    itemId'tinymceeditor',
                    
    text'TinyMCE Editor',
                    
    module'widget.tinymceeditor',
                    
    leaftrue
                
    }]
            }]
        }
    }); 
    Last edited by KangJuHo; 17 Apr 2012 at 4:34 PM. Reason: add store example

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Does this support multi values?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Location
    Korea
    Posts
    4
    Vote Rating
    0
    KangJuHo is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Does this support multi values?
    Unfortunately, not support multi value

Thread Participants: 1