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,639
    Answers
    33
    Vote Rating
    103
    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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar