`
huang5787826
  • 浏览: 45942 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
文章分类
社区版块
存档分类
最新评论

ext 当鼠标移到grid的记录时候弹出窗体并且显示该有的值(特效)

阅读更多
根据学习,了解了一些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);
			}
	});
}

代码在此。。。请牛人们多多指教...晚辈献丑了...
2
1
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics