ext 当鼠标移到grid的记录时候弹出窗体并且显示该有的值(特效)
teacher.initListGrid = function(){ var colMap ={ id:'id', columns:[{id: "id",header: "<fmt:messagekey='teacher.id' />", hidden:true,hideable:false, dataIndex: 'id'},{header: "<fmt:message key='teacher.name' />", width: 100, sortable: true, locked:false, dataIndex: 'name'}, {header: "<fmt:message key='teacher.sex' />", width: 100, sortable: true, locked:false, dataIndex: 'sex'}, {header: "<fmt:message key='teacher.addres' />", width: 100, sortable: true, locked:false, dataIndex: 'addres'}, header: "<fmt:message key='teacher.dataState' />", hidden:true ,width: 100, sortable: true, locked:false, dataIndex: 'dataState'}]};//IE DELETE var grid = teacher.listGrid = new Ext.grid.GridPanel({ colMap: colMap, loadMask: {msg:'<fmt:message key="loadData.waitmsg"/>'}, stripeRows: true, viewConfig: { forceFit:true }, showRowNumber:true, border:false, dwrFun:teacherManager.getTeachersByDwr, showPagebar:true, singleSelect :true, //鼠标移到grid的数据时显示窗体 afterRender : function(){ this.on('mouseover',this.rowMouseOver,this,{buffer:500});},rowMouseOver : function(e,t){var view = this.viewvar row = view.findRowIndex(t); if(row!== false){ if(!this.win){this.win = new Ext.Window({id:'goods.win',title : '内容',width : 250, autoHeight :true,layout : 'fit',border : false, closeAction : 'hide',items : new Ext.FormPanel({ id : 'form-panel', frame : true, autoHeight : true, labelWidth : 80, defaults : { width : 100, xtype : 'textfield'}, items : [{fieldLabel : 'id',name : 'id',readOnly:true,allowBlank:false}, {xtype:'box',autoEl:{style:'height:10px'}}, //将两个连接在一起的textfield分开 {fieldLabel : 'name',name : 'name',readOnly:true,allowBlank:false}, {xtype:'box',autoEl:{style:'height:10px'}}, {fieldLabel : 'sex',name : 'sex',readOnly:true,allowBlank:false}, {xtype:'box',autoEl:{style:'height:10px'}}, {fieldLabel : 'addres',name : 'addres',readOnly:true,allowBlank:false}, {xtype:'box',autoEl:{style:'height:10px'}}, {fieldLabel : 'dataState',name : 'dataState',readOnly:true,allowBlank:false}] }), //收缩小图标 以及实习的功能 tools : [{ id :'pin', qtip : '禁用自动收缩', hidden : true, handler : function(event, el, panel){ removeWinEvent ("goods.win"); Ext.getDom(panel.tools['pin'].id).style.display = "none"; Ext.getDom(panel.tools['unpin'].id).style.display = "block"; } }, { id :'unpin', qtip : '启动自动收缩', hidden : true, handler : function(event, el, panel){ setWinEvent("goods.win"); Ext.getDom(panel.tools['pin'].id).style.display = "block"; Ext.getDom(panel.tools['unpin'].id).style.display = "none"; } }], listeners : { 'beforeshow' : function(cmp) { setWinEvent("goods.win"); } } }); //当启动自动收缩的时候的事件 就是鼠标移过去的时候就显示 移开的时候就收缩 function setWinEvent(winId) { var winPanel = Ext.getCmp(winId); Ext.get(winId).on('mouseover', function() { if (winPanel.collapsed) { winPanel.expand(); Ext.getDom(winPanel.tools['pin'].id).style.display = "block"; Ext.getDom(winPanel.tools['unpin'].id).style.display = "none"; } }); Ext.get(winId).on('mouseleave', function() { if (!winPanel.collapsed) { winPanel.collapse(); Ext.getDom(winPanel.tools['pin'].id).style.display = "none"; Ext.getDom(winPanel.tools['unpin'].id).style.display = "none"; } }); } //移除事件 function removeWinEvent(winId){ Ext.get(winId).removeAllListeners(); }; }//显示窗体的位置this.win.setPosition(e.getXY());//this.win.setPosition(2,200);this.win.show();//过2秒显示的窗体自动关闭//this.win.close.defer(2000,this.win);/*//新建一个任务 var task = { run: function(){ Ext.getCmp('goods.win').hide(); }, interval: 100 //秒 刷新一次 } var runner = new Ext.util.TaskRunner(); runner.start(task);*//*this.win.on("beforedestroy", function(obj) { Ext.MessageBox.alert("信息", "想关闭我,那是不可能的"), obj.show(); return false; },this,{delay:2000}); */this.win.toFront();this.fillData(this.getStore().getAt(row));} }, beforeDestroy : function(){Ext.destroy(this.win);//摧毁win的窗体},//给窗体的form表单填入数据fillData : function(record){var form = Ext.getCmp('form-panel').getForm();form.setValues(record.data);}});}