1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    443
    Answers
    4
    Vote Rating
    3
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi