1. #1
    Sencha User
    Join Date
    Aug 2008
    Posts
    33
    Answers
    2
    Vote Rating
    0
    xunxin is on a distinguished road

      0  

    Question Unanswered: a picker with a tree panel

    Unanswered: a picker with a tree panel


    how can i make a piker with a tree panel.

    the requirement is to show a window which contain a TreePanel, when the button clicked in a TextField like ComboBox. The TextField is used to display a text/name, but the getValue return the value specified by valueField.

    thanks in advance.

  2. #2
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,711
    Answers
    33
    Vote Rating
    104
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    Not that hard but requires a bit of work. Start by looking at the Ext.Picker class, and also view the trigger field class for useful hints.

  3. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,489
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

  4. #4
    Sencha User
    Join Date
    Aug 2008
    Posts
    33
    Answers
    2
    Vote Rating
    0
    xunxin is on a distinguished road

      0  

    Default


    Thanks for such a quick reply man.


    I did it by refer to the ComboBox.js, but a problem confuse me, the display value of the field is changed to empty text when the field lost the focus.

    Code:
    Ext.define('My.form.field.RefField', {
    extend: 'Ext.form.field.Trigger',
    requires: ['Ext.util.KeyNav', 'Ext.data.StoreManager'],
    
    
    alias: 'widget.reffield',
    
    
    
    
    editable: true,
    triggerCls: Ext.baseCSSPrefix + 'form-search-trigger',
    hiddenDataCls: Ext.baseCSSPrefix + 'hide-display ' + Ext.baseCSSPrefix + 'form-data-hidden',
    //emptyText:'',
    
    
    displayField:'',
    valueField:'',
    refWidth:450,
    refHeight:400,
    
    
    contentPanel:Ext.create('Ext.panel.Panel'),
    /**
    * @override
    */
    fieldSubTpl: [
    '<div class="{hiddenDataCls}" role="presentation"></div>',
    '<input id="{id}" type="{type}" ',
    '<tpl if="size">size="{size}" </tpl>',
    '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
    'class="{fieldCls} {typeCls}" autocomplete="off" />',
    '<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">',
    '{triggerEl}',
    '<div class="{clearCls}" role="presentation"></div>',
    '</div>',
    {
    compiled: true,
    disableFormats: true
    }
    ],
    
    
    getSubTplData: function(){
    var me = this;
    Ext.applyIf(me.subTplData, {
    hiddenDataCls: me.hiddenDataCls
    });
    return me.callParent(arguments);
    },
    
    
    
    
    afterRender: function(){
    var me = this;
    me.callParent(arguments);
    me.setHiddenValue(me.value);
    },
    
    
    
    
    initComponent: function() {
    var me = this;
    Ext.applyIf(me.renderSelectors, {
    hiddenDataEl: '.' + me.hiddenDataCls.split(' ').join('.')
    });
    
    
    
    
    if (!me.displayTpl) {
    me.displayTpl = Ext.create('Ext.XTemplate',
    '<tpl for=".">' +
    '{[typeof values === "string" ? values : values["' + me.displayField + '"]]}' +
    '<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
    '</tpl>'
    );
    } else if (Ext.isString(me.displayTpl)) {
    me.displayTpl = Ext.create('Ext.XTemplate', me.displayTpl);
    }
    this.callParent();
    this.addEvents('expand','collapse');
    
    
    if(Ext.isString(me.store)){ 
    me.store = Ext.data.StoreManager.lookup(me.store);
    me.store.load();
    }
    
    
    },
    
    
    
    
    initEvents: function() {
    var me = this;
    me.callParent();
    
    
    
    
    // Add handlers for keys to expand/collapse the picker
    me.keyNav = Ext.create('Ext.util.KeyNav', me.inputEl, {
    down: function() {
    if (!me.isExpanded) {
    me.onTriggerClick();
    }
    },
    esc: me.collapse,
    scope: me,
    forceKeyDown: true
    });
    
    
    
    
    // Non-editable allows opening the picker by clicking the field
    if (!me.editable) {
    me.mon(me.inputEl, 'click', me.onTriggerClick, me);
    }
    
    
    
    
    // Disable native browser autocomplete
    if (Ext.isGecko) {
    me.inputEl.dom.setAttribute('autocomplete', 'off');
    }
    },
    
    
    
    
    /**
    * Expands this field's picker dropdown.
    */
    expand: function() {
    var me = this,
    bodyEl, picker, collapseIf;
    
    
    
    
    if (me.rendered && !me.isExpanded && !me.isDestroyed) {
    bodyEl = me.bodyEl;
    picker = me.getPicker();
    collapseIf = me.collapseIf;
    
    
    
    
    // show the picker and set isExpanded flag
    picker.show();
    me.isExpanded = true;
    bodyEl.addCls(me.openCls);
    
    
    
    
    //Ext.EventManager.onWindowResize(me.alignPicker, me);
    me.fireEvent('expand', me);
    me.onExpand();
    }
    },
    
    
    
    
    onExpand: Ext.emptyFn,
    
    
    
    
    /**
    * Collapses this field's picker dropdown.
    */
    collapse: function() {
    if (this.isExpanded && !this.isDestroyed) {
    var me = this,
    openCls = me.openCls,
    picker = me.picker,
    doc = Ext.getDoc(),
    collapseIf = me.collapseIf,
    aboveSfx = '-above';
    
    
    
    
    // hide the picker and set isExpanded flag
    picker.hide();
    me.isExpanded = false;
    
    
    
    
    // remove the openCls
    me.bodyEl.removeCls([openCls, openCls + aboveSfx]);
    picker.el.removeCls(picker.baseCls + aboveSfx);
    
    
    
    
    // remove event listeners
    doc.un('mousewheel', collapseIf, me);
    doc.un('mousedown', collapseIf, me);
    Ext.EventManager.removeResizeListener(me.alignPicker, me);
    me.fireEvent('collapse', me);
    me.onCollapse();
    }
    },
    
    
    
    
    onCollapse: Ext.emptyFn,
    
    
    
    
    /**
    * @private
    * Runs on mousewheel and mousedown of doc to check to see if we should collapse the picker
    */
    collapseIf: function(e) {
    var me = this;
    if (!me.isDestroyed && !e.within(me.bodyEl, false, true) && !e.within(me.picker.el, false, true)) {
    me.collapse();
    }
    },
    
    
    
    
    /**
    * Returns a reference to the picker component for this field, creating it if necessary by
    * calling {@link #createPicker}.
    * @return {Ext.Component} The picker component
    */
    getPicker: function() {
    var me = this;
    return me.picker || (me.picker = me.createPicker());
    },
    
    
    
    
    /**
    * @method
    * Creates and returns the component to be used as this field's picker. Must be implemented by subclasses of Picker.
    * The current field should also be passed as a configuration option to the picker component as the pickerField
    * property.
    */
    createPicker: function(){
    var me = this;
    var okBtn = new Ext.button.Button({text:'Ok'});
    var cancelBtn = new Ext.button.Button({text:'Cancel'});
    
    
    okBtn.addListener('click',function(){
    record = me.contentPanel.getSelectionModel().getLastSelected();
    me.onOkButtonClick(record);
    });
    cancelBtn.addListener('click',function(){
    me.refWindow.hide();
    });
    me.refWindow=Ext.create('Ext.window.Window', {
    title:me.refTitle,
    height: me.refHeight,
    width: me.refWidth,
    modal:true,
    layout: 'fit',
    closeAction:'hide',
    buttons:[okBtn,cancelBtn],
    items: me.contentPanel,
    
    
    getSelectionModel:function(){
    return me.contentPanel.getSelectionModel();
    }
    });
    return me.refWindow;
    },
    
    
    onOkButtonClick:function(record){
    var me = this;
    valueField = me.valueField;
    if (record) {
    me.displayTplData = [record.data];
    me.setRawValue(me.getDisplayValue());
    me.setValue(record.get(valueField));
    me.collapse();
    }
    },
    
    
    /**
    * Finds the record by searching for a specific field/value combination.
    * @param {String} field The name of the field to test.
    * @param {Object} value The value to match the field against.
    * @return {Ext.data.Model} The matched record or false.
    */
    findRecord: function(field, value) {
    var ds = this.store,
    idx;
    idx = ds.findExact(field, value);
    return idx !== -1 ? ds.getAt(idx) : false;
    },
    
    
    
    
    /**
    * Finds the record by searching values in the {@link #valueField}.
    * @param {Object} value The value to match the field against.
    * @return {Ext.data.Model} The matched record or false.
    */
    findRecordByValue: function(value) {
    return this.findRecord(this.valueField, value);
    },
    
    
    
    
    /**
    * Finds the record by searching values in the {@link #displayField}.
    * @param {Object} value The value to match the field against.
    * @return {Ext.data.Model} The matched record or false.
    */
    findRecordByDisplay: function(value) {
    return this.findRecord(this.displayField, value);
    },
    /**
    * Handles the trigger click; by default toggles between expanding and collapsing the picker component.
    * @protected
    */
    onTriggerClick: function() {
    var me = this;
    if (!me.readOnly && !me.disabled) {
    if (me.isExpanded) {
    me.collapse();
    } else {
    me.expand();
    }
    me.inputEl.focus();
    }
    },
    
    
    setValue: function(value, doSelect) {
    var me = this,
    record;
    me.value = value;
    
    
    
    
    if(value){
    record = me.findRecordByValue(value);
    if(record){
    me.setRawValue(record.get(me.displayField));
    }
    else{
    me.setRawValue('');
    }
    }
    me.checkChange();
    return me;
    },
    
    
    setHiddenValue: function(value){
    var me = this,
    name = me.hiddenName, 
    i,
    dom, childNodes, input, valueCount, childrenCount;
    
    
    if (!me.hiddenDataEl || !name) {
    return;
    }
    values = Ext.Array.from(values);
    dom = me.hiddenDataEl.dom;
    childNodes = dom.childNodes;
    input = childNodes[0];
    valueCount = values.length;
    childrenCount = childNodes.length;
    
    
    if (!input && valueCount > 0) {
    me.hiddenDataEl.update(Ext.DomHelper.markup({
    tag: 'input', 
    type: 'hidden', 
    name: name
    }));
    childrenCount = 1;
    input = dom.firstChild;
    }
    while (childrenCount > valueCount) {
    dom.removeChild(childNodes[0]);
    -- childrenCount;
    }
    while (childrenCount < valueCount) {
    dom.appendChild(input.cloneNode(true));
    ++ childrenCount;
    }
    for (i = 0; i < valueCount; i++) {
    childNodes[i].value = values[i];
    }
    
    
    
    
    },
    
    
    getDisplayValue: function() {
    return this.displayTpl.apply(this.displayTplData);
    },
    
    
    
    
    getValue: function() {
    var me = this,
    picker = me.picker,
    //rawValue = me.getRawValue(), //current value of text field
    value = me.value; //stored value from last selection or setValue() call
    
    
    
    
    if (value) {
    me.value = me.displayTplData = me.valueModels = null;
    if (picker&&picker.isHidden()) {
    picker.getSelectionModel().deselectAll();
    }
    }
    return value;
    },
    
    
    getSubmitValue: function() {
    return this.getValue();
    },
    
    
    /**
    * Clears any value currently set in the ComboBox.
    */
    clearValue: function() {
    this.setValue([]);
    },
    
    
    reset : function(){
    this.callParent();
    this.applyEmptyText();
    },
    
    
    applyEmptyText : function(){
    var me = this;
    me.value = null;
    if (me.rendered) {
    me.setRawValue('');
    }
    },
    
    
    
    
    mimicBlur: function(e) {
    var me = this,
    picker = me.picker;
    // ignore mousedown events within the picker element
    if (!picker || !e.within(picker.el, false, true)) {
    me.callParent(arguments);
    }
    },
    
    
    
    
    onDestroy : function(){
    var me = this,
    picker = me.picker;
    
    
    
    
    //Ext.EventManager.removeResizeListener(me.alignPicker, me);
    Ext.destroy(me.keyNav);
    if (picker) {
    delete picker.pickerField;
    picker.destroy();
    }
    me.callParent();
    }
    
    
    
    
    });

  5. #5
    Sencha User
    Join Date
    Aug 2008
    Posts
    33
    Answers
    2
    Vote Rating
    0
    xunxin is on a distinguished road

      0  

    Default


    I did it, but i have not any idea to deal with the unload record when i set value into the field.

    Now, i have to load all data into the store for it to avoid the error caused by store.findExact method.

    any advice is welcome.

Thread Participants: 2

Tags for this Thread