1. Edit plain text with a text box
The following is an edit control that works on a span label, and you can double-click the label to edit the label's text class capacity.
| The code is as follows |
Copy Code |
| [HTML]
<div class= "Content" >
<span id= "Span1" > Please double-click me to modify text </span>
</div> [Js]
Edit plain text with a text box
var editor1 = new Ext.editor ({
Shadow:false,
Completeonenter:true,//Auto finish when press ENTER
Cancelonesc:true,//press ESC to exit edit automatically
Updateel:true,//updated when changes are available
Ignorenochange:true,//ignoring the situation without change
Listeners: {
Complete:function (editor, value, OldValue) {
Ext.Msg.alert (' text changed ', "from" "+ OldValue +" "to" "+ Value +" "");
}
},
Field: {
Allowblank:false,
Xtype: ' TextField ',
width:150,
Selectonfocus:true
}
}); Ext.get ("Span1"). On (' DblClick ', function (event, span1_dom) {
Editor1.startedit (Span1_dom);
}); |
The effect picture is as follows
The effect is as follows:
When in edit state:
