解决Extjs中textarea不支持keyup事件的问题
生活随笔
收集整理的這篇文章主要介紹了
解决Extjs中textarea不支持keyup事件的问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近用到Ext.form.textarea, 在監聽事件中添加了keyup事件，并將enableKeyEvents屬性設為true，但并不執行該事件，不知道是什么原因？ Ext.form.textfield則沒有任何問題。
JScript code：
/*
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function() {
var form = new Ext.form.FormPanel({
baseCls: ‘x-plain’,
layout:’absolute’,
url:’save-form.php’,
defaultType: ‘textfield’,
items: [{
x: 0,
y: 5,
xtype:'label',
text: 'Send To:' },{
x: 60,
y: 0,
name: 'to',
anchor:'100%' // anchor width by percentage
},{
x: 0,
y: 35,
xtype:'label',
text: 'Subject:'
},{
x: 60,
y: 30,
enableKeyEvents: true,
name: 'subject',
anchor: '100%', // anchor width by percentage
listeners: {
keyup: function(src, evt){
alert(src.getValue()); }
}
},{
x:0,
y: 60,
xtype: 'textarea',
name: 'msg',
enableKeyEvents: true,
anchor: '100% 100%', // anchor width and height,
listeners: {
keyup: function(src, evt){
alert(src.getValue()); } } }] });
var window = new Ext.Window({
title: ‘Resize Me’,
width: 500,
height:300,
minWidth: 300,
minHeight: 200,
layout: ‘fit’,
plain:true,
bodyStyle:’padding:5px;’,
buttonAlign:’center’,
items: form, buttons: [{
text: 'Send' },{
text: 'Cancel' }] });
window.show(); });
Answer:textarea的構造函數是一個完整的可獨立的對象。代碼如下：
textarea.js
JScript code
Ext.onReady(function(){
var p = new Ext.Panel
title: ‘My Panel’,
collapsible:true,
renderTo: ‘tt’,
width:400,
height: 300,
items:[ {
x: 100,
y: 0,
xtype: 'textarea',
name: 'msg',
enableKeyEvents: true,
height:'100%',
width:'100%',
listeners: {
keyup: function(src, evt){
alert(src.getValue()); } } } ] }); });
textarea.html:
HTML code：
<html>
<head>
<title>Textarea</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="textarea.js"></script>
<link rel="stylesheet" type="text/css" href="forms.css"/>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css"/>
</head>
<body>
<div id="tt"></div>
</body>
</html>
此文轉載自Web開發之答疑解惑源www.znjcx.com，如需轉載，請注明原文出處：http://www.znjcx.com/html/y2012/891_solve-the-problem-of-extjs-textarea-keyup-event-is-not-supported-in.html，謝謝！
JScript code：
/*
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function() {
var form = new Ext.form.FormPanel({
baseCls: ‘x-plain’,
layout:’absolute’,
url:’save-form.php’,
defaultType: ‘textfield’,
items: [{
x: 0,
y: 5,
xtype:'label',
text: 'Send To:' },{
x: 60,
y: 0,
name: 'to',
anchor:'100%' // anchor width by percentage
},{
x: 0,
y: 35,
xtype:'label',
text: 'Subject:'
},{
x: 60,
y: 30,
enableKeyEvents: true,
name: 'subject',
anchor: '100%', // anchor width by percentage
listeners: {
keyup: function(src, evt){
alert(src.getValue()); }
}
},{
x:0,
y: 60,
xtype: 'textarea',
name: 'msg',
enableKeyEvents: true,
anchor: '100% 100%', // anchor width and height,
listeners: {
keyup: function(src, evt){
alert(src.getValue()); } } }] });
var window = new Ext.Window({
title: ‘Resize Me’,
width: 500,
height:300,
minWidth: 300,
minHeight: 200,
layout: ‘fit’,
plain:true,
bodyStyle:’padding:5px;’,
buttonAlign:’center’,
items: form, buttons: [{
text: 'Send' },{
text: 'Cancel' }] });
window.show(); });
Answer:textarea的構造函數是一個完整的可獨立的對象。代碼如下：
textarea.js
JScript code
Ext.onReady(function(){
var p = new Ext.Panel
title: ‘My Panel’,
collapsible:true,
renderTo: ‘tt’,
width:400,
height: 300,
items:[ {
x: 100,
y: 0,
xtype: 'textarea',
name: 'msg',
enableKeyEvents: true,
height:'100%',
width:'100%',
listeners: {
keyup: function(src, evt){
alert(src.getValue()); } } } ] }); });
textarea.html:
HTML code：
<html>
<head>
<title>Textarea</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="textarea.js"></script>
<link rel="stylesheet" type="text/css" href="forms.css"/>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css"/>
</head>
<body>
<div id="tt"></div>
</body>
</html>
此文轉載自Web開發之答疑解惑源www.znjcx.com，如需轉載，請注明原文出處：http://www.znjcx.com/html/y2012/891_solve-the-problem-of-extjs-textarea-keyup-event-is-not-supported-in.html，謝謝！
轉載于:https://blog.51cto.com/znjcx/1099963
總結
以上是生活随笔為你收集整理的解决Extjs中textarea不支持keyup事件的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C# 多线程读取数据并保存在DataGr
- 下一篇： Dos下cd不起作用详解...