`
guoyiqi
  • 浏览: 1009962 次
社区版块
存档分类
最新评论

监听表单事件 learning extjs 中文

阅读更多

监听表单事件

Ext让监听单击控件或按键等用户事件变得异常简单。一个通常的事件就是按回车然后提交表单,让我们来看下这是怎么完成的。

{//copy right guoyiqi 2009-2-6

xtype: 'textfield',

fieldLabel: 'Title',

name: 'title',

allowBlank: false,

listeners: {

specialkey: function(f,e){

if (e.getKey() == e.ENTER) {

movie_form.getForm().submit();

}

}

}

}

Specialkey监听器在任何按键都触发,包括了退格,Tab,Esc等。所以我们要判断按键是否是回车。当按回车键后表单将提交。

 

组合框的事件

现在我们给组合框加入事件监听,当某个选项被选中后触发。

先定义一组数据:

var genres = new Ext.data.SimpleStore({

fields: ['id', 'genre'],

data : [

['0','New Genre'],

['1','Comedy'],

['2','Drama'],

['3','Action']

]

});

再定义组合框,加入事件监听:

{

xtype: 'combo',

name: 'genre',

fieldLabel: 'Genre',

mode: 'local',

store: genres,

displayField:'genre',

width: 130,

listeners: {

select: function(f,r,i){

if (i == 0){

Ext.Msg.prompt('New Genre','Name',Ext.emptyFn);

}

}

}

}

 

不同的监听器需要传递不同的参数给相应的方法,可以参见API

Select事件,传递3个参数:

1.       表单域

2.       被选择的数据

3.       被点击的是第几个选项

当类表的选项被选中时,我们就知道哪个被选中了。第三个参数指明了第几个选项被选中,我们就可以判断它是不是0(第一个),如果是就让用户添加个新的类型。

每个控件都有对应的监听器,可以查看相应的API

分享到:
评论
2 楼 jacky68147527 2009-05-05  
比如我对一个HtmlEditor添加键盘事件监听,当按下 Ctrl+Enter键的时候提交表单。

这种情况该怎么去实现?
1 楼 jacky68147527 2009-05-05  
如果是按组合键该怎么处理啊?

相关推荐

    learning extjs 中文版 表单提交

    本篇文章将深入探讨EXTJS中文版中的表单提交相关知识点。 一、EXTJS表单基础 EXTJS的表单(Form)组件是用于收集用户输入数据的容器,它由多个字段(Field)组成,如文本框、选择框、复选框等。每个字段都有自己的...

    Learning ExtJs 第四版 随书源代码

    Learning ExtJs 第四版 随书源代码。采用的Ext 5。

    ExtJs 动态添加表单

    例如,监听表单的submit事件: ```javascript formPanel.getForm().on('submit', function(form, action) { console.log('表单提交', action.result); }); ``` 5. **动态移除字段**: 当需要移除某个字段时,...

    下拉列表 learning extjs 中文

    4. **事件监听** - **选择事件**:可以监听`select`事件来处理用户选择项后的操作,如更新其他组件或发送数据到服务器。 - **触发事件**:`triggerClick`事件会在用户点击下拉箭头时触发,可以用于打开下拉菜单或...

    learning extjs 经典教材

    ### ExtJS经典教材知识点概述 ...《Learning ExtJS》是一本全面介绍ExtJS框架的经典教材,不仅涵盖了基础知识,还涉及了许多高级话题。对于希望使用ExtJS开发复杂Web应用的开发者来说,本书是不可多得的学习资源。

    learning extJS

    learning extJS 随书源码,非常流行的富客户端脚本框架。

    Learning ExtJS 3.2.pdf

    Learning ExtJS 3.2.pdf绝对的高清,不过是英文的,下载之前考虑好,不想骗你们的分,呵呵

    TextArea_HTMLEditor 编辑器 learning extjs 中文

    《TextArea_HTMLEditor 编辑器学习指南——探索EXTJS中文版的奥秘》 在Web开发领域,富文本编辑器是不可或缺的一部分,它允许用户以类似Word的方式编辑网页内容。EXTJS作为一款强大的JavaScript框架,提供了丰富的...

    Extjs 重写Panel添加click事件

    当涉及到事件监听时,我们可以利用Ext JS的事件系统来实现。 点击事件(click event)是用户与UI交互的常见行为,常用于触发某些操作。在Ext JS中,我们可以为任何具有DOM元素的组件添加click事件监听器。对于Panel...

    Learning ExtJS.pdf

    Learning ExtJS.pdf 当今社会,这个你得会。

    learning extjs

    - **事件处理**:探讨了ExtJS中事件处理机制的工作原理,以及如何使用事件来控制程序流程。 - **布局管理**:解释了ExtJS中的不同布局类型(如边框布局、卡片布局等),以及如何合理地组织界面元素。 - **主题定制**...

    Learning EXTJS

    本书《Learning ExtJS》旨在帮助开发者掌握使用EXTJS构建桌面风格用户界面的技能。 #### 二、书籍概述 本书由Shea Frederick、Colin Ramsay和Steve "Cutter" Blades三位作者共同编写,由Packt Publishing出版。...

    learning extjs(中英文打包下载)

    learning extjs(中英文打包下载) 中文的来自www.17ext.com,不齐,将就用。

    ExtJs4.0 表单提交Demo

    在这个Demo中,可能将表单的定义放在View文件中,而提交逻辑放在Controller中,通过事件监听和处理实现通信。 6. **最佳实践** - 使用Ext Js的`actionMethods`配置项,指定服务器端的处理方法(GET或POST)。 - ...

    ExtJs获取表单元素的值

    在本篇文章中,我们将深入探讨如何在ExtJs框架中有效地获取表单元素的值,并结合提供的代码示例进行详细解析。对于前端开发者来说,掌握如何高效地操作表单元素是必不可少的一项技能,尤其是在使用像ExtJs这样的强大...

    extjs中文文档大全

    本文档集合包括了"ExtJS实用开发指南"、"EXT 中文手册"以及"Ext Core手册",涵盖了ExtJS的基础到高级开发知识。 1. **ExtJS实用开发指南**:此部分主要针对ExtJS的实际应用,包含如何快速上手、组件的使用、布局...

    js面向对象 learning extjs 中文

    NULL 博文链接:https://guoyiqi.iteye.com/blog/324849

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    在“ExtJS3.3中文API.CHM”文档中,每个API或类都有详细的说明,包括其属性、方法、事件和配置项,这对于开发者来说是宝贵的参考资料。通过深入学习和理解这些内容,开发者能够熟练掌握ExtJS 3.3,编写出高效、高...

    Extjs 4.11 重写 Panel 添加 click事件

    总结起来,重写ExtJS 4.11 Panel的`click`事件涉及到创建Panel实例,添加事件监听器,以及可能的重写行为。理解并熟练运用这些方法将使你能够更灵活地定制和控制Panel的行为,从而提升应用的用户体验。通过深入学习...

Global site tag (gtag.js) - Google Analytics