`
huang5787826
  • 浏览: 46657 次
  • 性别: 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
分享到:
评论

相关推荐

    ext实例 左边是 tree 右边是grid 双击grid弹出form修改

    本实例“ext实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵资源,它演示了如何将这些组件结合起来,实现交互式的数据操作。 1. **树形控件(Tree)**:在左边展示数据结构,通常用于...

    ext grid 显示数据

    "ext grid 显示数据"这一主题,是深入理解EXT JS开发的关键知识点之一,特别是在处理表格和列表展示时。在"LearningExtJS 第五章节的翻译"中,我们可以期待找到关于EXT JS Grid的详细讲解和实例应用。 EXT JS的Grid...

    ext grid json分页显示

    2. 当用户滚动到Grid的底部或者点击分页导航条时,EXT Grid会触发Ajax请求,向服务器发送当前的页码和每页记录数。 3. DWR接收到请求后,根据这些参数在后端数据库执行相应的SQL查询,获取对应页的数据,并将其转换...

    Ext.grid.ColumnModel显示不正常

    Ext.grid.ColumnModel显示不正常

    Ext Grid 导出Excel

    总结来说,"Ext Grid 导出Excel"这个话题涵盖了从JavaScript数据结构到Excel文件格式转换的过程,涉及到的主要技术有Ext JS的Grid和Store组件,以及第三方库SheetJS。这个过程对于那些需要提供数据导出功能的Web应用...

    Ext框架的Grid使用介绍

    7. **插件支持**:EXT JS Grid有多种插件,如CellEditing用于单元格编辑,RowExpander用于行展开显示更多信息,RowBody用于在行内显示额外内容。 8. **响应式设计**:EXT JS的Grid支持响应式布局,自动适应不同屏幕...

    EXT grid导出EXCEL

    2. **获取EXT Grid数据**:EXT Grid的数据通常存储在store中,我们需要遍历store中的所有记录,获取需要导出的字段值。这些记录可以是当前页面的数据,也可以是所有页面的数据,取决于用户的需求。 3. **转换为...

    Ext grid 导出Excel

    "Ext grid 导出Excel"是一个常见需求,它涉及到了JavaScript库Ext JS中的数据网格组件(Ext Grid)与Microsoft Excel文件格式的交互。下面我们将深入探讨这个主题。 首先,Ext JS是一个强大的JavaScript UI框架,它...

    ext grid数据绑定

    本文将深入探讨"EXT Grid数据绑定"这一主题,包括数据查找和如何将查找结果重新填充到Grid中。 EXT Grid的核心是其数据模型(Data Model)和视图(View)。数据模型负责存储和管理数据,而视图则负责渲染这些数据到...

    ext grid 合计行

    找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, &lt;br&gt;但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...

    ext grid 导出 excel

    5. **样式和格式处理**:EXT Grid中的数据显示有各种样式,如颜色、字体等。如果需要保留这些样式,可以使用XLSX.js的`cellStyles`选项。但是,这需要更复杂的处理,因为Excel的样式系统与EXT Grid的样式不完全相同...

    Ext.window从右下角弹出/隐藏

    ### Ext.window从右下角弹出/隐藏:深入解析与实现 #### 一、概述 在Web应用开发中,为了提升用户体验,开发者经常会利用各种UI框架来实现丰富的交互效果。ExtJS作为一款成熟且功能强大的JavaScript框架,在这方面...

    Ext grid合并单元格

    此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、ColumnModel 的配置以及数据绑定等关键概念。 ### 一、Ext JS Grid 概览 Ext JS 是一个...

    ext grid 合并行

    在EXT JS框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能和灵活性。在某些场景下,用户可能需要合并行或列以更好地组织和呈现数据,例如在显示汇总信息或者创建复杂的报告时。"ext grid ...

    各种弹出窗口 ext窗口

    EXT 2.0 MessageBox 和 JavaScript 弹出窗口是两种在 Web 应用程序中常见的用户交互方式。它们允许开发者向用户展示信息、询问问题或获取输入。EXT 是一个流行的 JavaScript 框架,特别是它的 EXT JS 库,用于构建富...

    JSP中使用EXT实现grid table

    5. 编辑功能:EXT Grid可以开启行内编辑或者弹出式编辑,方便用户直接在表格中修改数据。 6. Ajax集成:EXT Grid通过Ajax请求从服务器获取或提交数据,这使得页面能够在不刷新的情况下更新内容,提供了流畅的用户...

    Ext4 grid打印

    Ext4 Grid打印是基于Ext JS库的一个功能,用于在网页中展示数据的表格组件。Ext4 Grid提供了丰富的功能,包括数据排序、筛选、分页以及列的动态调整等。在这个场景下,"grid打印"指的是将Grid中的数据导出或者可视化...

    EXT-JS Grid 用法

    EXT-JS Grid是EXT-JS库中的一个核心组件,它被广泛用于展示和操作大量数据。Grid提供了一种高效、可定制的表格视图,允许用户进行数据浏览、排序、筛选、分页以及编辑。EXT Designer是Sencha公司提供的一个可视化...

    EXT2.0 GRID 示例

    EXT2.0 GRID 示例是一个基于EXT JavaScript库的高级数据展示和操作组件的实例。EXT是一个强大的前端开发框架,尤其在创建交互式Web应用程序方面表现出色。EXT2.0是EXT库的一个早期版本,它提供了丰富的用户界面组件...

    Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。

    Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...

Global site tag (gtag.js) - Google Analytics