Tag Archives: Extjs

[ExtJS]4.0.7版本中panel卷起后无法看到按钮效果

这个目前在官方还没到有任何反应. 当一个带有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);
		}
	}
})

这个时候 卷起来已经可以正常看到按钮以及文字了.