2 closetothemoon CloseTotheMoon 于 2015.05.26 09:48 提问

关于Extjs中悬浮框位置设置的问题。

最近在做关于Extjs的实习项目,里面涉及到 的设置,小队头头要求我把悬浮框显示的位置刚好以鼠标作为左上角,对于这个我不知道悬浮框组件中是否有对位置动态捕捉的设定。希望大家能够帮助我答疑解惑。

 Ext.define('query.controller.PayListInfoCheckController', {
    extend : 'Ext.app.Controller',
    views : [ 'PayListInfoCheckView' ],
    stores : [ 'PayListInfoCheckStore' ],
    init : function() {
        this.control({
            'paylistinfocheckview' : {
                afterrender : this.afterRender
            },
            'paylistinfocheckview button[action=search]' : {
                click : this.onSearchBtn
            }
        });
    },
    afterRender : function(tab) {
        var grid = tab.down('grid');
        var store = grid.getStore();
        store.load();
        var view = grid.getView();
        var tip = Ext.create('Ext.tip.ToolTip', {
            target : view.el,
            mouseOffset : [ -50, -20 ],
            delegate : view.cellSelector,
            trackMouse : false,
            frame : true,
            layout : 'fit',
            showDelay : 0,
            dismissDelay : 0,
            autoHide : false,
            items : [ {
                xtype : 'form'
            } ],
            listeners : {
                beforeshow : function(tip, eOptes) {
                    var jsDom = tip.triggerElement;
                    var detailType = jsDom.getAttribute('detailType');
                    var paramsStr = jsDom.getAttribute('paramsArr')
                    if (!detailType || !paramsStr) {
                        return false;
                    }
                    var title = jsDom.getAttribute('paramsTitle');
                    var titleArr = null;
                    if(title){
                        titleArr = title.split(',');
                    }
                    var paramsArr = paramsStr.split(',');
                    var record = view.getRecord(view
                            .findItemByChild(tip.triggerElement));
                    var form = tip.down('form');
                    var map = {};
                    var titleMap = {};
                    Ext.suspendLayouts();
                    form.removeAll();
                    paramsArr.forEach(function(value, index) {
                        var val = record.get(value);
                        if (!Ext.isEmpty(val)) {
                            map[value] = val;
                            form.add({
                                xtype : 'displayfield',
                                name : value
                            });
                            if(titleArr){
                                titleMap[value] = titleArr[index];
                            }                           
                        }
                    });
                    if (Ext.Object.isEmpty(map)) {
                        Ext.resumeLayouts(true);
                        return false;
                    }
                    if(titleArr){
                        Ext.Object.each(map, function(key, value){
                            map[key] = titleMap[key] + ":" + value
                        });
                    }
                    switch (detailType) {
                    case 'orderId':
                        form.maxWidth = 150;
                        break;
                    case 'transTime':
                        form.maxWidth = 200;                        
                        break;
                    case 'payCustName':
                        form.maxWidth = 200;
                        //form.maxHeight=300
                        break;
                    case 'payCustCardNo':
                        form.maxWidth = 200;
                        //form.maxHeight=900

                        break;
                    }
                    form.getForm().setValues(map);
                    Ext.resumeLayouts(true);
                }
            }
        });
    },

    // tabAfterRender: function (tab) {
    // var me = this;
    // Ext.Ajax.request(
    // {
    // url: 'query/view/list',
    // success: function (response) {
    // var obj = Ext.decode(response.responseText);
    // if (obj.success) {
    // var data = obj.data;
    // var combo = tab.down('extendcombo[name=orderType]');
    // combo.setDefaultValue(data.id, function () {
    // // 在获取到当前用户开之后才加载数据
    // me.searchButtonClick(tab.down('button[text=查询]'));
    // });
    // }
    // }
    // });
    // },
    onSearchBtn : function(btn) {
        var tab = btn.up('paylistinfocheckview');
        var form = tab.down('form');
        var store = tab.down('grid').getStore();
        var map = form.getForm().getValues();
        // 额外加上排序
        map.orderBy = true;
        store.getProxy().extraParams = map;
        store.loadPage(1);
    }
// searchBtnClicked: function (btn) {
// var tab = btn.up('paylistinfocheckview').down('grid'),
// store = tab.getStore();
// var tab1=btn.up('paylistinfocheckview');
// var orderId = tab1.down('textfield[name=orderId]').getValue();
// var userId = tab1.down('textfield[name=userId]').getValue();
// var customerId = tab1.down('textfield[name=customerId]').getValue();
// store.loadPage(1, {
// params: {
// orderId: orderId,
// userId: userId,
// customerId: customerId
// },
// callback: function (records, operation, success) {
// if (!success) {
// Ext.MessageBox.alert('内部错误');
// }
// }
// });
// }
});

这是我对界面的controller代码,图片说明,这是悬浮框。这个界面并不是完善后的。

2个回答

wgw335363240
wgw335363240   2015.05.26 10:36
已采纳

EXT 框架现在用的人都少了,都使用jquery了,换框架吧。

showbo
showbo   Ds   Rxr 2015.05.26 10:38

悬浮框显示的位置刚好以鼠标作为左上角,这个是什么意思。。

你设置好tooltip的target就好了。会自动定位到target的左上角。如果是鼠标当前位置。将target设置为body,通过setPosition调整位置

http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tip.ToolTip-method-getPosition

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
12、Extjs添加悬浮框
Extjs添加悬浮框
Extjs添加悬浮框
Ext.tip.QuickTipManager.init();//初始化tips // 设置悬浮框的大小和延迟时间 Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), { maxWidth: 200, minWidth: 100, showDelay: 50 /
关于ExtJs版权问题的认识
来源:http://kldn.iteye.com/blog/1354409 1.extjs作为一个js类库,采用gpl协议显然是不太合理的。因为只要你的代码继承了一个类,就算你修改了源代码,你的继承类的代码就必须公开: Text代码   The following are examples of modifications:    Modify Ext JavaS
ExtJs框架开发的弹出窗口问题
ExtJs框架开发的弹出窗口问题  Javascript 专业回答 网站开发互助团 团队  xiii130 2013-08-13 13:09 function createWin(w, h, x, y){     var win = Ext.create('Ext.window.Window',{         title: ‘窗体标题’,         
Extjs msgTarget 提示位置
文章转载于:Extjs msgTarget 提示位置  http://www.studyofnet.com/news/161.html   extjs msgTarget 有效值包括: qtip:显示一个浮动的提示消息 title:显示一个浏览器浮动提示消息 under:在字段下面显示一个提示消息,使用under时要注意表单的高度 side:在字段右边显示一个提示消息,使用side
Extjs Combobox 高度设置
//需要在listcoinfig中配置,本身的maxHeight不起作用 Ext.onReady(function() { var testStore = Ext.create('Ext.data.Store', { fields : ['code', 'name'], data : [{ name : "先生",
关于Extjs收费问题
1、Extjs最近的几个版本采用了GPL协议,查了下资料,大概意思是说如果用extjs就要遵循GPL协议,你的项目要开源。 2、如果不想开源就要缴费,关于缴费问题,我问了几个q群里的人,经过调查,基本都没缴费。结论:没找上门来就不用缴费,再说小项目他也值不当找你,如果做的项目大公司有实力就要稍微注意一点了。
extjs combobox下拉框显示位置问题
问题描述:(下拉框显示的不在combobox的下端) 问题代码: { //baseCls:"x-plain",//强制与颜色 匹配 layout:"form", labelWidth:55, columnWidth:.14, item
网页开发中,精确定位ExtJs控件的位置的方法。
在项目开发的过程中,一直使用ExtJs进行网页界面的编程,并且已经开发出了一个比较稳定的开发框架来建设信息管理系统的项目。开发的成长过程中我感觉到不管使用什么开发语言,什么架构,面临的最大问题是如果使用这些“工具”来解决项目中常见的问题。不知是不是人长大了,了解的东西虽然越来越多,但是细节的东西到用的时候却是记得不太清楚,因此打算从今天开始把项目中的一些解决问题的过程和学习过程详细记录下来,以便今
关于extjs中文问题
中文版的 引入ext-lang-zh_CN.js,但常常,有些还是英文的,现在提供几种方法给你,绝对秒杀英文,如果不行,找我我一定帮你解决。 1.加入 Ext.QuickTips.init(); 一般那些qtip什么的,tooltip 就会有用 比如表格里面的actioncolumn tooltip: '删除', 2.查看ext-lang-zh_CN.js 找到属性(api一般不会显示)比如t