`
huoyunshen888
  • 浏览: 83503 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Extjs grid中鼠标触发事件

 
阅读更多
http://topic.csdn.net/u/20100517/11/377b9a5f-fb32-4f44-813c-89fe325d7186.html  

1.Ext.Ajax.request({  
2.    url:'getPath.action',  
3.    success:function(res){  
4.        var obj = Ext.decode(res.responseText);  
5.        //console.log(obj);//可以到火狐的firebug下面看看obj里面的结构  
6.        //加入getPath返回的json为{'path':'upload/abc.jpg'}  
7.        window.location.href = obj.path;//这样就可以弹出下载对话框了  
8.    }  
9.}); 



html>
<head>
  <title>Debug Console</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="debug.css" />

    <!-- GC -->
  <!-- LIBS -->
  <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
     var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id',width:35},
        {header:'名称',dataIndex:'name',width:80},
        {header:'描述',dataIndex:'descn',width:120}
    ]);

    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    store.load();
    var grid = new Ext.grid.GridPanel({
       autoHeight: true,
          renderTo: 'grid',
          store: store,
          cm: cm,
          viewConfig: {
            forceFit: true
         }
       
      
    });
   grid.on('mouseover',function(e){//添加mouseover事件
  var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置
  if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false)
   var record = store.getAt(index);//把这列的record取出来
   var str = Ext.encode(record.data);//组装一个字符串,这个需要你自己来完成,这儿我把他序列化
   var rowEl = Ext.get(e.getTarget());//把target转换成Ext.Element对象
   rowEl.set({
    'ext:qtip':str  //设置它的tip属性
   },false);
  
  }
   });
  
    var win = new Ext.Window({
     id:'window',
        el:'window-win',
        layout:'fit',
        width:500,
        height:270,
        closeAction:'hide',
        items: [grid]

    });
    win.show();
Ext.QuickTips.init();//注意,提示初始化必须要有

});
        </script>
    </head>
    <body>
         <div id="window-win">
            <div id="grid"></div>
   
    </body>
</html>
--------------------------------------------------------------
我比较爱好ext,曾经写了不少这方面的代码,
以上代码是现写的,调试通过,
以后大家可以讨论讨论
分享到:
评论

相关推荐

    extjs 04_grid 单击事件新发现

    在EXTJS的Grid组件中,我们可以监听各种事件,如`cellclick`事件,当用户点击网格的单元格时,此事件会被触发。下面是一个简单的示例,展示了如何监听`cellclick`事件并获取点击的单元格数据: ```javascript grid....

    EXTJS 转EXCEL实例

    在EXTJS中,数据网格(Grid)是一种常用的数据展示组件,它能够以表格形式展示大量数据,并支持排序、分页、过滤等多种操作。要将GRID中的数据导出为Excel,我们需要涉及以下几个关键步骤: 1. **数据准备**:首先...

    EXTJS事件实例源码

    4. **事件对象**:EXTJS的事件对象包含有关事件的详细信息,如`event.target`可以获取触发事件的元素,`event.xy`获取鼠标点击位置等。 5. **事件分离与移除**:使用`removeListener`(或简写`un`)方法可以移除...

    ExtJs grid行 右键菜单的两种方法

    在第一种方法中,我们首先创建一个`Ext.menu.Menu`对象,然后通过监听Grid的`rowcontextmenu`事件来触发菜单的显示。以下是一个简单的示例: ```javascript // 创建菜单 var menu = new Ext.menu.Menu({ items: [ ...

    ExtJs3.0中文API

    - **事件监听和触发机制**: 提供丰富的事件接口,允许组件间的交互和响应用户操作。 - **Ajax 请求**: 内置的 Ajax 功能,支持异步数据通信。 6. **其他特性** - **Drag & Drop**: 支持元素的拖放操作,可应用于...

    ExtJS ToolTip功能

    在ExtJS中,`ToolTip`功能是一种非常实用且灵活的功能,它允许用户在鼠标悬停在某个元素上时显示额外的信息。这种特性对于提高用户界面的可用性和用户体验尤其有用。本文将详细介绍如何在ExtJS中实现ToolTip,并通过...

    ExtJs教程_完整版

    - **用户事件(User Events)**:包括鼠标点击、键盘输入等用户触发的事件。 - **系统事件(System Events)**:例如AJAX请求的状态变化(开始、完成、失败等)。 ExtJS提供了一个强大的事件管理系统,允许开发者轻松地...

    ExtJS获取字段宽度顺序调整后的状态

    这种交互设计是基于`column.resize`事件实现的,当用户释放鼠标后,该事件会被触发,我们可以监听这个事件来获取当前列的宽度信息。 3. **列顺序的改变**:用户可以通过拖拽列头到新的位置来改变列的顺序。这依赖于...

    Extjs中文教程

    - 命名空间是Extjs中组织代码的一种方式,用于避免全局变量冲突。 - 使用`Ext.namespace`方法来定义命名空间。 - **Extjs OOP** - Extjs提供了一套面向对象的编程模型,支持类的继承、封装等特性。 - 通过`Ext....

    ExtJS in Action

    - **事件(Event)**:事件是 ExtJS 中最基本的概念之一,用于处理用户与界面之间的交互。例如,当用户点击按钮时触发的事件。 - **组件(Component)**:组件是 ExtJS 中构建用户界面的基本单位。每个组件都有自己的...

    非常简单易用的girdview鼠标移动或点击的行背景色事件

    在本案例中,我们将讨论如何实现一个非常简单易用的功能,即当鼠标移动到GridView的某一行或者用户点击某一行时,该行的背景色发生变化。这个功能可以提升用户的交互体验,使用户更易于区分当前选中的行。 首先,`...

    EXTGrid属性方法

    `Ext.grid.GridPanel`是ExtJS 4.0中的一个关键组件,用于创建数据表格。以下为该组件的一些核心属性及其含义: - **store**: 数据存储器,用于存放表格的数据源。 - **columns**: 列配置模型,可以通过配置来定义每...

    基于FineUI Grid控件添加右键菜单

    在本文中,我们将深入探讨如何在FineUI框架中为Grid控件添加右键菜单功能。FineUI是一款强大的Web前端开发库,它基于ExtJS库,并提供了丰富的UI组件和便捷的API,使得开发者能够快速构建交互式的企业级Web应用。 ...

    ext中文教程

    - **事件对象**:当事件触发时,可以通过事件对象获取更多信息,如触发事件的目标元素、鼠标位置等。 - **阻止默认行为**:使用 `event.preventDefault()` 阻止事件的默认行为,例如点击链接时不跳转。 - **停止事件...

    EXT 中文手册

    - **传递参数**:事件处理函数还可以接收来自触发事件的元素的信息作为参数。 #### 十二、类设计与表单组件入门 - **对象创建**:在 EXT 中,可以使用面向对象的方式创建组件,这有助于代码的组织和复用。 - **使用...

Global site tag (gtag.js) - Google Analytics