Grid combobox and textfield editor - change emptyText dynamically and clear field - extjs

Question

In the following example with cellediting I want to dynamically change the emptyfield textfield editor and clear the field.
However, if I select the first item in the combobox I get the textfield reference, but only once. If after I selecting another item in the combobox I can no longer get the textfield reference or change the emptyText.
Also I can not clear the textfield value when selecting one combobox item.
FIDDLE: https://fiddle.sencha.com/#view/editor&fiddle/2g3d
Ext.create('Ext.data.Store', {
storeId: 'mystore',
fields:[ 'type', 'description'],
});
var combostore = Ext.create('Ext.data.Store', {
fields:[ 'name'],
data:[
{'name' : 'Phone'},
{'name' : 'Mobile'},
{'name' : 'Email'}
]
});
Ext.create('Ext.data.Model', {
fields:[
{name:'type', type:'string'},
{name:'description', type:'string'}
]
});
Ext.create('Ext.form.Panel', {
title: 'Order Info',
width: 400,
bodyPadding: 10,
defaults: {
anchor: '100%',
padding: 5
},
items: [{
xtype: 'gridpanel',
selModel: 'rowmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
pluginId: 'celleditingId'
},
header:{
titlePosition: 0,
items:[{
xtype:'button',
text: 'Add row',
handler: function(btn){
var record = Ext.create('Ext.data.Model', {});
var grid = btn.up('grid'),
rowediting = grid.getPlugin('celleditingId');
grid.store.insert(0,{});
rowediting.startEdit(0, 0);
}
}]
},
title: 'Contact',
store: Ext.data.StoreManager.lookup('mystore'),
columns: [{
text: 'Type',
dataIndex: 'type',
editor:{
xtype: 'combobox',
name: 'type',
valueField: 'name',
displayField: 'name',
store: combostore,
queryMode: 'local',
markDirty:false,
listeners: {
select: function (combo, record, eOpts){
var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].editor,
grid = combo.up('grid');
if (combo.value === 'Phone') {
Ext.apply(columnTextfieldEditor, {
emptyText: 'First text',
submitEmptyText: false
});
var row = grid.getSelectionModel().getSelection()[0];
grid.getPlugin('celleditingId').startEditByPosition({
row: grid.store.indexOf(row),
column: 1
});
// columnTextfieldEditor.setValue('');
}else {
var row = grid.getSelectionModel().getSelection()[0];
grid.getPlugin('celleditingId').startEditByPosition({
row: grid.store.indexOf(row),
column: 1
});
Ext.apply(columnTextfieldEditor, {
emptyText: 'Second text',
submitEmptyText: false
});
}
console.log(combo.value);
console.log(columnTextfieldEditor);
}
}
},
flex: 0.7
},{
text: 'Description',
dataIndex: 'description',
itemId: 'textfieldEd',
editor:{
xtype: 'textfield',
name: 'description'
},
flex: 1
}],
listeners:{
afterrender: function(grid){
var record = Ext.create('Ext.data.Model', {});
rowediting = grid.getPlugin('celleditingId');
grid.store.insert(0,{});
rowediting.startEdit(0, 0);
}
},
height: 200
}],
renderTo: Ext.getBody(),
});

Answer 1

Just change this:
var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].editor
To This:
var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].getEditor()
And Change the order of the second "apply":
Ext.apply(columnTextfieldEditor, {
emptyText: 'Second text',
submitEmptyText: false
});
grid.getPlugin('celleditingId').startEditByPosition({
row: grid.store.indexOf(row),
column: 1
});