这个目前在官方还没到有任何反应. 当一个带有collapse属性的panel作为hbox样式panel时, 就会发生此问题
mainPanel = Ext.create("Ext.panel.Panel", { height: 800, width: 700, autoHeight: true, autoScroll: true, border: false, layout: { type: "hbox", columns: 2, align: 'stretch' }, }) leftPanel = Ext.create("Ext.panel.Panel", { frame: true, lookMask: true, collapsible: true, collapseDirection: Ext.Component.DIRECTION_LEFT, width: 230, height: 400, border: 0, useArrow: true, title: "产品分类", split: true, tbar: [ { xtype: "button", text: "全部卷起" }] }); mainPanel.add(leftPanel) mainPanel.doLayout()
这个时候点击卷起的话. 那个卷起按钮会不显示. 在4.0.7版本之前没这个问题.
经排查 问题在于reExpander没用设置height,top, left这三个style属性. 更确切的说, 这个panel原本会向上查找height. 但是4.0.7严格的检查.高度无法正确获取到. 因此这个时候的高度为0. 所以看到缩起来后的按钮以及文字.
这个时候我们在leftPanel上增加一个监听事件. 手动向reExpander设置style属性.
leftPanel.addListener({ collapse: function(p){ if (p && p.collapsed && p.reExpander){ var reExpander = p.reExpander; setTimeout(function(){ reExpander.el.applyStyles({top: 0, left: 0}); reExpander.setHeight(me.getHeight()) }, 50); } } })
这个时候 卷起来已经可以正常看到按钮以及文字了.