问答首页 → 移动开发技术
0 0

怎么设置EXT4 GRID鼠标悬停在列上，弹出提示层显示列内的内容？15

RT，哪一个知道，找了好久了没搞定！
--------------------------------------------
鼠标放到某一行只能提示固定列，方法如下： 
listeners: {  
             render: function(g) {  
                 //g.on("itemmouseenter", function(grid, row, col) { 
				 g.on("itemmouseenter", function(view,record,mode,index,e) {
					 
                     grid.tip = Ext.create('Ext.tip.ToolTip', {
						target: view.el,          // The overall target element.
						delegate: view.itemSelector, // Each grid row causes its own seperate show and hide.
						trackMouse: true,         // Moving within the row should not hide the tip.
						renderTo: Ext.getBody(),  // Render immediately so that tip.body can be referenced prior to the first show.
						listeners: {              // Change content dynamically depending on which element triggered the show.
							beforeshow: function updateTipBody(tip) {
								tip.update(view.getRecord(tip.triggerElement).get('name'));
							}
						}
					});

                 });  
             }  
         }

_____________________
怎么动态获取鼠标所在列的dataIndex？？？
问题补充：
jobar 写道
提供一种思路：
在colomn上加监听 
columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name',
                            listeners: {
                                afterrender: {
                                    fn: me.onGridcolumnAfterRender,
                                    scope: me
                                }
                            }
                        },
。。。
]


 onGridcolumnAfterRender: function(abstractcomponent, options) {
        var el = abstractcomponent.getEl();
        el.on(
        'mouseover',
        function(e,t){
            var panel = Ext.widget('panel',{
                width:100,
                height:100,
                items:[{
                    xtype: 'button',
                    text: 'click me'
                }]
            });
            panel.show();
        },
        this
        );
    }

已经给gird加上了tip，tip中的内容用
tip.update(view.getRecord(tip.triggerElement).get('name'));
给写死了，现在就想着怎么获取鼠标所在列的dataindex值这个提示功能就算完成了，不知道哥们能给我指条明路么？
问题补充：
jobar 写道
先把列的index取到，然后就可以拿到dataindex了 
……

感谢你的指导，现在已经拿到列的dataIndex了。
——————————————————————————
目前的tip结果还是不正确，因为把itemmouseenter事件加在了grid的行上面
——————————————————————————
所以还是请问 往列上加itemmouseenter事件怎么加，看API把我看晕列都。
问题补充：
jobar 写道
列上加监听，我第一次回复的时候就建议你这样做。 
{
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name',
                            listeners: {
                                columnshow: {
                                    fn: me.onGridcolumnColumnshow,
                                    scope: me
                                }
                            }
                        }

.....
    onGridcolumnColumnshow: function(ct, column, options) {
//这里写逻辑代码
    }

-----------------------------------------------------
鸭梨好大，我还是没整出来。不过分还是给你把，感谢啊！
我想给列上加鼠标停留上的事件。你给的这个方法不知道咋用。
╮(╯▽╰)╭
onGridcolumnColumnshow: function(ct, column, options)
这个方法是加到每个column定义的里面么？
-----------------------------------------------------
ext4 
2012年5月09日 15:48

4个答案 按时间排序 按投票排序

0 0

采纳的答案

列上加监听，我第一次回复的时候就建议你这样做。 

{
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name',
                            listeners: {
                                columnshow: {
                                    fn: me.onGridcolumnColumnshow,
                                    scope: me
                                }
                            }
                        }

.....
    onGridcolumnColumnshow: function(ct, column, options) {
//这里写逻辑代码
    }

2012年5月10日 15:43
0 0

可以直接在column的renderer函数中操作metaData项来动态的添加提示，示例如下： 

{
                        	   xtype: 'gridcolumn',
                        	   dataIndex: 'name',
                        	   width:200,
                        	   align:'left',
                        	   editor:'textfield',
                        	   text: '名称',
                        	   renderer: function(v, m, r){
                        	   	    m.tdAttr = 'data-qtip="'+v+'"'; 
                        	   	    return v;
                        	   }
                           },

2016年6月30日 15:40
0 0

先把列的index取到，然后就可以拿到dataindex了 

g.on("itemmouseenter", function(view,record,mode,index,e) { 
var pos = view.getPositionByEvent(e);                                view.tip = Ext.create('Ext.tip.ToolTip', {  
                                   target: view.el,          // The overall target element.  
                                   delegate: view.itemSelector, // Each grid row causes its own seperate show and hide.  
                                   trackMouse: true,         // Moving within the row should not hide the tip.  
                                   renderTo: Ext.getBody(),  // Render immediately so that tip.body can be referenced prior to the first show.  
                                   listeners: {              // Change content dynamically depending on which element triggered the show.  
                                       beforeshow: function updateTipBody(tip) {  
                                           tip.update(view.getRecord(tip.triggerElement).get('name')); 
var dataIndex = view.getRecord(tip.triggerElement).fields.keys[pos.column];
                                           console.log(dataIndex);
                                       }  
                                   }  
                               });  
                            });

2012年5月10日 14:41
0 0

提供一种思路：
在colomn上加监听 

columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name',
                            listeners: {
                                afterrender: {
                                    fn: me.onGridcolumnAfterRender,
                                    scope: me
                                }
                            }
                        },
。。。
]


 onGridcolumnAfterRender: function(abstractcomponent, options) {
        var el = abstractcomponent.getEl();
        el.on(
        'mouseover',
        function(e,t){
            var panel = Ext.widget('panel',{
                width:100,
                height:100,
                items:[{
                    xtype: 'button',
                    text: 'click me'
                }]
            });
            panel.show();
        },
        this
        );
    }

2012年5月09日 17:44

相关推荐

    Ext的用户扩展控件-----可以在表格的单元格上弹出提示层信息

    "Ext的用户扩展控件-----可以在表格的单元格上弹出提示层信息"是一个专门为EXT的Grid组件设计的功能增强插件，它使得用户在鼠标悬停于表格的特定单元格时，能够显示更详细的信息提示，极大地提升了数据展示的交互性...

    用tip解决Ext列宽度不够的问题

    这样，当用户将鼠标悬停在含有`ext:qtip`属性的元素上时，就会弹出一个带有标题和内容的提示框，显示原本被截断的数据。这种解决方案既保持了表格的简洁性，又确保了用户可以查看到所有信息。 此外，为了提高用户...

    新版EXT教程

    3. **提示和通知**：通过弹出提示框或通知条等形式，向用户提供即时反馈。 #### 五、案例分析与实战技巧 1. **登录界面设计**：介绍如何使用EXT构建一个安全且友好的登录界面，包括验证逻辑的实现。 2. **数据展示...

    EXT 中文手册

    - **MessageBox**：一个弹出消息框组件，用于向用户显示提示信息或请求确认操作。 - **Grid**：一个表格组件，可以用来展示大量结构化的数据，并支持排序、筛选等功能。 - **更多组件**：除了 MessageBox 和 Grid...

    一个非常好的用extjs开发的股票信息显示的例子

    例如，鼠标悬停在股票代码上时，可能会出现一个工具提示显示该股票的详细信息；点击某个按钮，可能会弹出一个窗口展示更全面的股票分析报告。 为了实现数据的实时更新，开发者可能使用了ExtJS的AJAX或者Store组件。...

    extjs xtype

    快速提示是EXTJS中的一个小弹出窗口，可以在鼠标悬停在特定元素上时显示相关信息，无需用户进行任何交互。 关于`vtype`，这是EXTJS中表单字段验证的一种方式。EXTJS提供了多种预定义的`vtype`验证规则，如`email`...

    轻松搞定ExtJS.pdf

    - **悬停提示**: 在用户鼠标悬停时显示相关信息。 - **表单验证**: 确保用户输入的数据符合预期格式。 #### 18. FormPanel布局与初始化 - **布局**: 使用不同的布局策略来组织表单元素。 - **初始化**: 在表单加载...

    ExtJs3.0中文API

    - **ToolTips**: 提示框组件，用于显示鼠标悬停时的额外信息。 - **Ajax Grid**: 支持从服务器动态加载数据的网格组件。 - **Charts**: 图表组件，用于数据可视化。 7. **API 文档使用** - **CHM 文件**: CHM...

Magicbox
Ask-but
我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

Global site tag (gtag.js) - Google Analytics