1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    440
    Answers
    4
    Vote Rating
    2
    Jangla is on a distinguished road

      0  

    Default Unanswered: Editor with combo not behaving as expected

    Unanswered: Editor with combo not behaving as expected


    I have a need to create a custom field that utilises the Editor field using a combo box to allow the user to update the value by picking from a list.

    The basic look is attached - this has already been achieved in v3 - but now we want to move it forward to v4. Only trouble is, it's not behaving as we would expect.

    Here's the code:

    Code:
    Ext.define( 'Ext.ngx.EditableLabelField', {
    	extend    : 'Ext.form.field.Base',
    	alias     : 'widget.editablelabel',
    	// defaults
    	autoWidth : true,
    	listClass : 'ngx-focus-select-list',
    	itemCls   : 'ngx-focus-select-list-item',
    	cls       : 'ngx-focus-select',
    	queryMode : 'local',
    
    
    	initComponent : function (){
    		var me = this;
    
    
    		me.addEvents( 'aftersetvalue', 'afterselect' )
    
    
    		me.displayField = 'actionName'
    		me.valueField = 'id'
    
    
    	},
    	onRender      : function (){
    		var me = this;
    		me.callParent( arguments )
    
    
    		// add the hidden field input for submission to the server
    		me.hiddenField = me.el.insertSibling( {tag : 'input', type : 'hidden', name : this.hiddenName, id : Ext.id()}, 'before', false );
    
    
    		var cfg = {
    			shadow          : false,
    			completeOnEnter : true,
    			cancelOnEsc     : true,
    			updateEl        : true,
    			ignoreNoChange  : true
    		}
    
    
    		me.actionEditor = Ext.create( 'Ext.Editor', Ext.apply( {
    			alignment : 'c-c',
    			width     : 200,
    			autoSize  : {
    				width : 'field'
    			},
    			autoEl    : {
    				tag : 'span'
    			},
    			listeners : {
    				beforecomplete : function ( ed, value ){
    					me.setRawValue( value )
    					me.updateHidden( value );
    					ed.setValue( ed.field.getRawValue() )
    					return true
    				}
    			},
    			field     : {
    				xtype          : 'ngxcombo',
    				pickerAlign    : 'l-l',
    				offsets        : [0, 0],
    				store          : me.fieldStore,
    				valueField     : me.valueField,
    				displayField   : me.displayField,
    				listClass      : 'ngx-focus-select-list',
    				itemCls        : 'ngx-focus-select-list-item',
    				fieldCls       : 'ngx-focus-select',
    				typeAhead      : false,
    				shadow         : false,
    				inputWidth     : 400,
    				autoWidth      : true,
    				editable       : false,
    				hideEl         : false,
    				forceSelection : true,
    				lazyInit       : false,
    				hideTrigger    : true,
    				hideParent     : true,
    				listeners      : {
    					focus  : function (){
    						this.doQuery( '', true );
    					},
    					select : function (){
    						me.actionEditor.completeEdit()
    						me.fireEvent( 'afterselect', me, me.actionEditor.field.store.findRecord( me.valueField, me.hiddenField.dom.value ) )
    					}
    				}
    
    
    
    
    			}
    		}, cfg ) );
    		
    		me.inputEl.on( 'click', function ( e, t ){
    			me.actionEditor.startEdit( t ); // The value of the field will be taken as the innerHTML of the element.
    		} )
    	},
    	setValue      : function ( value ){
    		var me = this;
    		var rec
    		if ( this.rendered ) {
    			rec = me.actionEditor.field.store.findRecord( me.valueField, value )
    			if ( rec ) {
    				me.setRawValue(rec.data[me.displayField])
    				me.updateHidden( rec.data[me.valueField] )
    				this.fireEvent( 'aftersetvalue', me, rec );
    			} else {
    				this.inputEl.dom.innerHTML = 'does something'
    			}
    		}
    	},
    	getValue      : function (){
    		this.callParent(arguments);
    		return this.hiddenField.dom.value
    	},
    	updateHidden  : function ( value ){
    		this.hiddenField.dom.value = Ext.value( value, '' );
    	}
    
    
    } )
    The net result of this is v3 is that the user can click the field and a combo box will appear over the original field to offer a choice. On selecting one, the combo disappears and leaved the previous field with the new value selected. The only difference is that in v3 we used a DisplayField. I've tried that already in v4 without success so tried going back up the class tree to Base. No joy there either. In v4 the user can make a choice but the end result is that the value displayed back to the user is the valueField of the combo, not the displayField...unless we use a DisplayField as the base to extend form in which case the field is empty after the user makes a choice.

    Anyone able to help?
    Attached Images