监听表单事件
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个参数:
- 表单域
- 被选择的数据
- 被点击的是第几个选项
当类表的选项被选中时,我们就知道哪个被选中了。第三个参数指明了第几个选项被选中,我们就可以判断它是不是0(第一个),如果是就让用户添加个新的类型。
每个控件都有对应的监听器,可以查看相应的API。