【ExtJS5.1.0.107】Form设置VBox Layout后 获取焦点将导致容器滚动到顶部
前言：这段时间在做ExtJS的内容，遇到很多莫名其妙的问题，问题也都不太好精确定位到。后来测试了好久，终于定位到问题所在了。
就是Form的VBox Layout与msgTarget: 'side'导致的问题。问题定位到之后，由于公司网络限制，翻不了Google，只能上ExtJS官网去碰碰运气了。
最后也被我找到有人也遇到这个问题http://www.sencha.com/forum/showthread.php?296531里面也有人给出了解决方案。
注：这个问题我只在ExtJS 5.1.0.107上遇到。
遇到的问题是这样子的：各位看官可以在https://fiddle.sencha.com/#fiddle/hi9测试一下
1
2
3
4
5 ExtTemeplate
6
7
8
9
10 Ext.onReady(function(){
11 var itemArrays = [];
12 for (var i = 0; i < 30; i++) {
13 itemArrays.push(
14 Ext.create({
15 xtype: 'textfield',
16 fieldLabel: 'Label' + (i + 1)
17 })
18 );
19 }
20 Ext.create({
21 xtype:'window',
22 title:'Window Title',
23 items:[
24 Ext.create({
25 xtype:'form',
26 layout:'vbox',
27 autoScroll:true,
28 width:600,
29 height:450,
30 fieldDefaults: {
31 labelWidth: 80,
32 labelAlign: 'right',
33 msgTarget: 'side'
34 },
35 items:itemArrays,
36 buttons:[
37 Ext.widget({
38 text: '提交',
39 type: 'submit',
40 xtype: 'button'
41 }),
42 Ext.widget({
43 text: '关闭',
44 xtype: 'button'
45 })
46 ]
47 })
48 ]
49 }).show();
50 });
51
52
53
解决方案：就是在Extjs加载之后voerride“Ext.layout.container.Box”即可
1 Ext.define('My.override.VBoxLayoutFix', {
2 override: 'Ext.layout.container.VBox',
3 beginLayout: function(ownerContext) {
4 var scrollable = this.owner.getScrollable();
5 if (scrollable) {
6 this.lastScrollPosition = scrollable.getPosition();
7 }
8 this.callParent(arguments);
9 },
10 completeLayout: function(ownerContext) {
11 var scrollable = this.owner.getScrollable();
12 this.callParent(arguments);
13 if (scrollable) {
14 scrollable.scrollTo(this.lastScrollPosition);
15 }
16 }
17 });
页:
[1]