ExtJS 4采用MVC的方式划分程序,事件响应代码的写法:
1,一般放到controller里面,
假设application里面写了
controllers:[
'Users'
]
'Users'
]
则控制器代码放到定义目录的app/controller/Users.js里面,写法如下:
Ext.define("MyApp.controller.User",{
extend:'Ext.app.Controller',
requires:['Ext.window.MessageBox'], //这句不加下面的Ext.Msg.alert会出错!
extend:'Ext.app.Controller',
requires:['Ext.window.MessageBox'], //这句不加下面的Ext.Msg.alert会出错!
init:function(){
this.control({
'treepanel':{
itemclick:function(view,record){
Ext.Msg.alert('你点击了',record.get('text')); //打印树节点的名字
},
this.control({
'treepanel':{
itemclick:function(view,record){
Ext.Msg.alert('你点击了',record.get('text')); //打印树节点的名字
},
itemcontextmenu:function(view,record,item,index, e){
//添加右键菜单
e.preventDefault(); //阻止浏览器事件
e.stopEvent(); //阻止浏览器事件
var nodemenu=new Ext.menu.Menu({
floating:true,
items:[{
text:"新增组织机构",
icon:'images/add.gif',
iconCls:'leaf',
handler:function(){
alert("新增");
}
},{
text:"编辑组织机构",
icon:'images/leaf.gif',
iconCls:'leaf',
handler:function(){
alert("编辑");
}
},{
text:"删除组织机构",
icon:'images/delete.gif',
iconCls:'leaf',
handler:function(){
alert("删除");
}
}]
});
nodemenu.showAt(e.getXY()); //显示在鼠标的位置
}
},
e.preventDefault(); //阻止浏览器事件
e.stopEvent(); //阻止浏览器事件
var nodemenu=new Ext.menu.Menu({
floating:true,
items:[{
text:"新增组织机构",
icon:'images/add.gif',
iconCls:'leaf',
handler:function(){
alert("新增");
}
},{
text:"编辑组织机构",
icon:'images/leaf.gif',
iconCls:'leaf',
handler:function(){
alert("编辑");
}
},{
text:"删除组织机构",
icon:'images/delete.gif',
iconCls:'leaf',
handler:function(){
alert("删除");
}
}]
});
nodemenu.showAt(e.getXY()); //显示在鼠标的位置
}
},
'treepanel2':{
itemclick:function(view,record){
alert(Ext.getDisplayName(record));
}
}
}
);
}
});
}
);
}
});
在init方法里面,调用this.control调用事件响应代码,'treepanel'表示Component Query语法,一般用xtype里表示的内容即可。
上述代码同时提供了为itemcontextmenu提供事件处理添加右键菜单的功能。
2,不采用MVC模式的代码,对于Panel, Window等面板,也有一个listeners属性,可以这样加入事件处理:
listeners:{
itemdblclick:
function
(){
Ext.Msg.alert(
'helo'
,
'db clicked'
);
}
}
3,对于Button等组件,如果是默认的事件(如按钮的click),也可以直接用handler属性,例如:
handler:function(){
alert('clicked!');
}