阳光VIP

少壮不努力,老大徒伤悲。平日弗用功,自到临期悔。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

监听表单事件 learning extjs 中文

Posted on 2012-02-12 19:49  阳光VIP  阅读(436)  评论(0编辑  收藏  举报

监听表单事件

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。