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

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

下面是一个例子

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显示Issue

，当我尝试打开它并不似乎是在正确的位置列表。

有没有办法让它工作？

在此先感谢

来源

2014-02-27 Luiguis

我不是在规格和浏览器实现的专家，但对于WebKit和FF至少我已经能够通过Ext调试下来的使用getBoundingClientRect。这个函数返回实际的屏幕尺寸（即你的情况下的缩放值），而大多数其他的计算是通过预缩放措施完成的（如何调用这些尺寸？CSS尺寸？不知道...）。

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

无论如何，您可能想要在更大规模上尝试它，看看是否所有东西都保持在一起。这里的修复（见updated fiddle - 顺便说一句，你注释掉了所有的CSS，除了WebKit的）：

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静态方法。

来源

2014-02-27 14:07:03 rixo

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

回答

相关问题