问题描述

关于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代码，，这是悬浮框。这个界面并不是完善后的。

解决方案

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

解决方案二：
悬浮框显示的位置刚好以鼠标作为左上角，这个是什么意思。。

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

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