下面是一個彈出消息框的例子：其中包括grid行點擊事件和接聽按鈕事件
Ext.define('person.view.message.MsgInfo', {
extend : 'Ext.window.Window',initComponent : function() {
var me = this;
var mstore = Ext.create('Ext.data.Store', {// 定義數據源
autoLoad : true,
fields : [ 'pkid', 'msgtitle', 'sqname',"msgId","sqId"],
proxy : {
type : 'ajax',
url : 'query/getTipsWinInfo.do?userType='+userType, // 請求的服務器地址
reader : {
type : 'json',
root : 'data'
}
}});
Ext.apply(me, {
id : 'msginfo',
width : 300,
height : 220,
layout : 'fit',
modal : false,
// plain: true,
shadow : false, // 去除陰影
draggable : true, // 默認不可拖拽
resizable : false,
closable : true,
frame : false,
minimizable:true,
maximizable:true,
animateTarget:this,
title : "提示",
bodyStyle : 'background:#5CA2D5',
closeAction : 'destroy', // 默認關閉爲隱藏
listeners : {
minimize: function () {
var me = this;
me.setHeight(0);
me.setWidth(0);
this.initPosition(true);
Ext.EventManager.onWindowResize(this.initPosition, this); // window大小改變時，重新設置座標
Ext.EventManager.on(window, 'scroll', this.initPosition, this); // window移動滾動條時，重新設置座標
this.on('beforeshow', this.showTips);
this.on('beforehide', this.hideTips);
// me.hide();
},maximize:function(){
var me = this;
me.setHeight(220);
me.setWidth(300);
this.initPosition(true);
Ext.EventManager.onWindowResize(this.initPosition, this); // window大小改變時，重新設置座標
Ext.EventManager.on(window, 'scroll', this.initPosition, this); // window移動滾動條時，重新設置座標
this.on('beforeshow', this.showTips);
this.on('beforehide', this.hideTips);
},close:function(){
if(mstore.data.length>0){
var msid = "";var msgid_shequid="";
for(var i=0;i<mstore.data.length;i++){
var rec=mstore.getAt(i);
msid+=rec.get('pkid')+","//記錄表消息
msgid_shequid+=rec.get('msgId')+"-"+rec.get('sqId')+","//源消息
}//alert(msid.substring(0,msid.length-1));
Ext.Ajax.request({
url : 'message/UpdateMsgInfo.do',
method : 'POST',
params: {
msgid : msid.substring(0,msid.length-1),
userType:userType,
msgid_shequid:msgid_shequid
},
success : function(response) {
var messid = response.responseText;
if(messid==1){
me.close();
}
}
});
}
},
show : function() {
me.MsgInfo();
}
}
});
this.initPosition(true);
Ext.EventManager.onWindowResize(this.initPosition, this); // window大小改變時，重新設置座標
Ext.EventManager.on(window, 'scroll', this.initPosition, this); // window移動滾動條時，重新設置座標
this.on('beforeshow', this.showTips);
this.on('beforehide', this.hideTips);
this.callParent(arguments);
},
// 參數: flag - true時強制更新位置
initPosition : function(flag) {
if (true !== flag && this.hidden) { // 不可見時，不調整座標
return false;
}
var doc = document, bd = (doc.body || doc.documentElement);
// ext取可視範圍寬高(與上面方法取的值相同), 加上滾動座標
var left = bd.scrollLeft + document.body.clientWidth - 5 - this.width;
var top = bd.scrollTop + document.body.clientHeight - 5 - this.height;
this.setPosition(left, top);
},
showTips : function() {
var self = this;
if (!self.hidden) {
return false;
}
self.initPosition(true); // 初始化座標
},
hideTips : function() {
var self = this;
if (self.hidden) {
return false;
}
},
MsgInfo : function() {
var store = Ext.create('Ext.data.Store', {// 定義數據源
autoLoad : true,
fields : [ 'pkid', 'sqname', 'msgtitle',"msgId","sqId"],
proxy : {
type : 'ajax',
url : 'query/getTipsWinInfo.do?userType='+userType, // 請求的服務器地址
reader : {
type : 'json',
root : 'data'
}
},
listeners : {
load : function(store) {
if(store.data.length>0){
}
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
columns : [ {
text : "消息標題",
flex : 3,
align : 'center',
sortable : false,
dataIndex : 'msgtitle'
}, {
text : "來自查看",
flex : 1,
align : 'center',
sortable : false,
dataIndex : 'sqname'
}
],
border : false,
store : store,
columnLines : true,
frame : true,
header : false,
iconCls : 'icon-grid',
listeners:{
itemclick:function(view,record, item, index, e){
var msgId=record.get('msgId');//源消息
var win = Ext.create("person.view.message.mesWin",{
title:'您有新消息',
iconCls :"bik",
id:'shequ_msg_1',
animateTarget:Ext.getBody(),
modal:true,
closable: false ,
url:"message/getMessageList.do",
messid:msgId,
tools:[{
type:'close',
id:'closableid',
hidden :false,
qtip: '關閉窗口',
handler: function(event, toolEl, panel){
Ext.Ajax.request({
url : 'message/UpdateMsgInfo.do',
method : 'POST',
params: {
messid:msgId,//消息ID
userType:userType,
msgid_shequid:""
},
success : function(response){
var messid = response.responseText;
if(messid==1){
win.close();
}
}
});
win.close();
}
}
]
}).show();
}
}
});
this.add(grid);
}
});