Ext查询面板收缩时,文本内容垂直显示
css添加如下样式
/**
*查询面板收缩时,文本内容垂直显示
**/
.x-layout-collapsedText
{
width:16px;
font-size:11px;
word-wrap:break-word;
letter-spacing:10px;
color:#04408c;
font-weight:bold;
font-family:tahoma,arial,verdana,sans-serif;
line-height:17px;
}
重写Ext.panel.Panel.js中添加如下代码:
/**
*查询面板收缩时,文本内容垂直显示
**/
Ext.override(Ext.panel.Panel,{
initComponent:function(){
this.callParent(arguments);
this.collapsedVerticalText();
},
collapse:function(direction,animate){
this.callParent(arguments);
this.collapsedVerticalText();
},
collapsedVerticalText:function(){
var task = new Ext.util.DelayedTask(function(){
var d = Ext.query("div.x-vml-base");
if(Ext.isChrome || navigator.userAgent.indexOf("MSIE 10.0") > 0){
d = Ext.query("div svg");
}
if(!Ext.isEmpty(d)){
for(var i=0;i<d.length;i++){
var text = d[i].innerText;
if(Ext.isChrome || navigator.userAgent.indexOf("MSIE 10.0") > 0){
text = d[i].textContent;
}
if(Ext.isEmpty(text)){
text = '查询条件';
}
d[0].parentNode.innerHTML="<font class='x-layout-collapsedText'>"+text+"</font>";
}
}
});
task.delay(50);
}
});