【ExtJS5.1.0.107】Form设置VBox Layout后 获取焦点将导致容器滚动到顶部

car.3205

　　前言：
　　这段时间在做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 });