<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-ux-DataView-LabelEditor'>/**
</span> * @class Ext.ux.DataView.LabelEditor
* @extends Ext.Editor
*/
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', {
allowBlank: false,
selectOnFocus:true
});
this.callParent([config]);
},
init: function(view) {
this.view = view;
this.mon(view, 'render', 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);
}
});
</pre>
</body>
</html>