Question

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

这是一个例子

body {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}

//Example from extjs documentation
Ext.onReady(function(){

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    renderTo: Ext.getBody()
});

});

Fiddle显示问题

当我尝试打开列表时，它似乎没有处于正确的位置。

有没有办法让它发挥作用？

提前致谢

Answer 1

我不是规范和浏览器实现的专家，但至少对于webkit和FF，我已经能够将其调试为Ext 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 }; };的使用。此函数返回实际的屏幕大小（即您的情况下的缩放值），而大多数其他计算是通过预缩放度量来完成的（如何调用这些？CSS维度？dunno ...）。

逻辑上想到的修复是尝试替换此方法以使其返回未缩放的维度...令人惊讶的是，它“有效”。我在这里放了一些距离，因为我真正知道的只是它在我的Chrome和FF版本中修复了你的小提琴，我无法告诉其他浏览器（但我在相关的Ext代码中看到了IE的一些特定处理方法）），或者它可以在其他地方破坏......

无论如何，你可能想要在更大的范围内尝试它，看看是否所有东西都在一起。这是修复（参见getBoundingClientRect - 顺便说一下，除了webkit之外，你已经注释掉了所有的CSS）：

Element

当然，我不建议以这种方式粗暴地覆盖本机浏览器Ext.supports.BoundingClientRect，但这可能足以测试它并意识到它不符合要求。如果它似乎可以在您想要支持的所有平台上运行，您可能想要尝试修复Ext本身。这是一个首发......

Ext：{{1}}中有此方法的支持标志。首先关闭它。

现在这个标志仅在Ext（4.2.0）的一个地方进行测试，但该方法被调用了8次。其中大多数都用于破译浏览器功能;我不知道这是什么影响。但我可以说最后一个确实很重要：它在updated fiddle静态方法中。

应用css规模转换后，Extjs组合框不起作用

1 个答案: