PDA

View Full Version : Editor with combo not behaving as expected



Jangla
15 Mar 2013, 4:32 PM
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:



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?