static.extjs.ux.DataView.LabelEditor.js Maven / Gradle / Ivy
/**
*
*/
Ext.define('Ext.ux.DataView.LabelEditor', {
extend: 'Ext.Editor',
alignment: 'tl-tl',
completeOnEnter: true,
cancelOnEsc: true,
shim: false,
autoSize: {
width: 'boundEl',
height: 'field'
},
labelSelector: 'x-editable',
requires: [
'Ext.form.field.Text'
],
constructor: function(config) {
config.field = config.field || Ext.create('Ext.form.field.Text', {
allowOnlyWhitespace: false,
selectOnFocus:true
});
this.callParent([config]);
},
init: function(view) {
this.view = view;
this.mon(view, 'afterrender', this.bindEvents, this);
this.on('complete', this.onSave, this);
},
// initialize events
bindEvents: function() {
this.mon(this.view.getEl(), {
click: {
fn: this.onClick,
scope: this
}
});
},
// on mousedown show editor
onClick: function(e, target) {
var me = this,
item, record;
if (Ext.fly(target).hasCls(me.labelSelector) && !me.editing && !e.ctrlKey && !e.shiftKey) {
e.stopEvent();
item = me.view.findItemByChild(target);
record = me.view.store.getAt(me.view.indexOf(item));
me.startEdit(target, record.data[me.dataIndex]);
me.activeRecord = record;
} else if (me.editing) {
me.field.blur();
e.preventDefault();
}
},
// update record
onSave: function(ed, value) {
this.activeRecord.set(this.dataIndex, value);
}
});