监听表单事件 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。