感谢您的回复,看起来我们可能会到达某个地方。我创建了一个简单的新视图。见下文:
var homePanelTop = new Ext.Panel({ id:'topCont',
cls:'topCont'
});
var homePanelBtm = new Ext.Panel({
id:'btmCont',
cls:'btmCont'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
id:'mainlayout',
fullscreen : true,
layout: {
type: 'vbox',
align: 'stretch',
},
defaults:{flex:1},
items: [homePanelTop, homePanelBtm],
suspendLayout: true,
monitorOrientation: true,
orientationchange: this.onOrientationChange,
onOrientationChange: function(orientation, w, h){
this.suspendLayout = false;
if(orientation === 'portrait'){
console.log('P: ' + orientation);
this.add(homePanelTop, true);
} else {
console.log('L: ' + orientation);
this.remove(homePanelTop, false);
}
this.doLayout();
}
});
Ext.reg('HomeIndex', App.views.HomeIndex);
我希望在上面的视图中看到的是第一次加载和纵向,将有两个面板,顶部面板(黄色)和底部面板(蓝色)。当我正常旋转时,我仍然得到相同的效果。
但我所追求的是,当我旋转到横向时,顶部面板(黄色)被移除,底部面板(蓝色)填充其余空间。
然后,当我旋转回纵向时,我将两个面板恢复为它们的设计尺寸(flex:1)
使用上面的代码(在 chrome 中测试)发生的情况是顶部面板(黄色)保持在顶部,但高度略小,并且不会像应有的那样消失
无论如何,请注意我拥有的两个控制台跟踪命令,它们显示以下旋转读数:
第一次加载后,我旋转到横向,输出为:
L:风景
L:风景
试图删除不存在的组件。Ext.Container:remove 接受要移除的组件的参数。cmp.remove() 用法不正确。
L:风景
试图删除不存在的组件。Ext.Container:remove 接受要移除的组件的参数。cmp.remove() 用法不正确。
L:风景
试图删除不存在的组件。Ext.Container:remove 接受要移除的组件的参数。cmp.remove() 用法不正确。
当我旋转回纵向时,我得到以下输出:
L:风景
试图删除不存在的组件。Ext.Container:remove 接受要移除的组件的参数。cmp.remove() 用法不正确。
L:风景
试图删除不存在的组件。Ext.Container:remove 接受要移除的组件的参数。cmp.remove() 用法不正确。
P:肖像
P:肖像
因此,在横向旋转上查看它实际上是如何触发onorientationchange函数 4 次的,第一个没问题,其他三个有错误,因为第一个已经删除了它,所以这就是我相信的警告。
然后对于纵向的,我得到两个注册为横向调用,然后是两个点击注册纵向调用。
所有这一切都是通过一个动作完成的,所以这是否会以某种方式导致删除和添加代码无法按预期工作以及如何防止在旋转时方向被调用四次?
如果有人对此开发有任何想法,请随时加入。
感谢到目前为止的帮助 Si