【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 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>ExtTemeplate</title>
 6     <link type="text/css" rel="stylesheet" href="../Content/Ext5.1/css/neptune.css" />
 7     <script type="text/javascript" src="../Content/Ext5.1/JS/ext-all-debug.js"></script>
 8 
 9     <script type="text/javascript">
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     </script>
52 </head>
53 </html>

 

 

解决方案：就是在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 });

 

posted @ 2015-02-03 15:10  VitoWu  阅读(126)  评论(0)    收藏  举报