ext 当鼠标移到grid的记要时候弹出窗体并且显示该有的值(特效)
ext 当鼠标移到grid的记录时候弹出窗体并且显示该有的值(特效)
根据学习,了解了一些ext的知识,
显示出一个grid的时候,高手(牛逼人物)把ext写了个特效,就是当鼠标移到grid的记录的时候单行和双行颜色效果不一样,经过老师的讲解,在要修改ext内部的源码就可以实现那种效果,根据老师的讲解,现在自己也做了一个特效,就是将鼠标移到grid的记录时候,会弹出一个window窗体,并且窗体带一个panel当鼠标移到记录时,会将记录的值取出来,将值赋值给window里面的panel的表单去,并且还有自动收缩和自动扩展的功能,
唯一不足之处就是“本想让它鼠标移到grid记录时候弹出一个窗口,想让它停滞几秒让它关闭了!但是种种原因没有办法实现 1.我用close关闭window 但是鼠标再次移到记录的时候window就再也打不开了 2.用hide来隐藏window 但是你鼠标始终停滞在记录上,它一旦隐藏了马上就又出来了”求高手们给个答案。。。。。。
此代码直接拷贝是不能用的,因为grid的数据是用dwr去后台取出数据来!
大家可以自己定义grid在将弹出window的代码模仿写写 尝试解决上面的问题...
代码在此。。。请牛人们多多指教...晚辈献丑了...
根据学习,了解了一些ext的知识,
显示出一个grid的时候,高手(牛逼人物)把ext写了个特效,就是当鼠标移到grid的记录的时候单行和双行颜色效果不一样,经过老师的讲解,在要修改ext内部的源码就可以实现那种效果,根据老师的讲解,现在自己也做了一个特效,就是将鼠标移到grid的记录时候,会弹出一个window窗体,并且窗体带一个panel当鼠标移到记录时,会将记录的值取出来,将值赋值给window里面的panel的表单去,并且还有自动收缩和自动扩展的功能,
唯一不足之处就是“本想让它鼠标移到grid记录时候弹出一个窗口,想让它停滞几秒让它关闭了!但是种种原因没有办法实现 1.我用close关闭window 但是鼠标再次移到记录的时候window就再也打不开了 2.用hide来隐藏window 但是你鼠标始终停滞在记录上,它一旦隐藏了马上就又出来了”求高手们给个答案。。。。。。
此代码直接拷贝是不能用的,因为grid的数据是用dwr去后台取出数据来!
大家可以自己定义grid在将弹出window的代码模仿写写 尝试解决上面的问题...
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.view var 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); } }); }
代码在此。。。请牛人们多多指教...晚辈献丑了...