应用css比例转换后，Extjs组合框无法工作

Question

我需要缩放一个应用程序，以适应它的内部和如果是固定的大小，但我注意到比extjs 4组合框列表不工作缩放，这是我第一次看到这个问题与规模转换，我想它影响到所有浮动组件在ext。

下面是一个例子

身体{-webkit-变换:刻度(0.8)；-moz-变换:刻度(0.8)；-ms-变换:刻度(0.8)；-o变换:刻度(0.8)；变换:刻度(0.8)；} //示例从extjs文档Ext.onReady(函数(){//包含状态变量列表= Ext.create('Ext.data.Store‘)，{字段：'abbr’、‘名称’、数据：{"abbr":"AL“、”名称“：”Alabama“}、{"abbr":"AK”、“名称”：“阿拉斯加”}、{“abbr”：“abbr”：“AZ”，“名称”：“亚利桑那”}//. })；//创建组合框，附加到状态数据存储区Ext.create('Ext.form.ComboBox'，{ fieldLabel：‘选择状态’，存储:州，queryMode：'local'，displayField：'name'，valueField：'abbr'，renderTo: Ext.getBody() })；}； 显示问题的小提琴

当我试图打开列表时，它的位置似乎不对。

有办法让它起作用吗？

提前感谢

Answer 1

我不是规范和浏览器实现方面的专家，但至少对于webkit和FF，我已经能够通过Ext调试这一点。这个函数返回实际的屏幕大小(在您的情况下是缩放的值)，而大多数其他的计算是用预量程度量完成的(如何调用这些值？)CSS尺寸？不知道.)

逻辑上出现的修正是尝试替换此方法，使其返回未缩放的维度.令人惊讶的是，它“起作用”。我在这里放了一些距离，因为我真正知道的是它在我的Chrome和FF版本中修复了你的小提琴，我不能告诉其他浏览器(但我在相关的Ext代码中看到了对IE的一些特定处理)，或者它在其他地方可能会破坏什么……

不管怎么说，你可能想试一试更大的规模，看看是否一切都在一起。下面是修复(请参阅更新小提琴 --顺便说一句，除了webkit之外，您已经注释掉了所有的CSS )：

Element.prototype.getBoundingClientRect = function() {
    var left = this.offsetLeft,
        top = this.offsetTop,
        height = this.offsetHeight,
        width = this.offsetWidth;
    return {
        left: left
        ,top: top
        ,width: width
        ,height: height
        ,right: left + width
        ,bottom: top + height
    };
};

当然，我不建议以这种方式残酷地覆盖本机浏览器Element，但这可能足以测试它并意识到它不符合要求。如果它看起来可以在您想要支持的所有平台上工作，那么您可能想尝试修复Ext本身。这里有个初学者..。

Ext：Ext.supports.BoundingClientRect中有此方法的支持标志。从关掉它开始。

现在，这个标志只在Ext的一个地方进行测试(4.2.0)，但是该方法被调用了8次。他们中的大多数都是用来破解浏览器功能的；我不知道这里的影响是什么。但我可以看出，最后一个方法确实很重要:它是在Ext.Element#getXY静态方法中。