设为首页 - 加入收藏 - 网站地图 SecYe安全 Www.SecYe.Com - 国内网络信息安全IT技术门户网
当前位置:SecYe > 网页设计 > Javascript > 正文

Extjs中panel的 collapseMode 属性的应用,修改折叠箭头样式

时间:2016-12-29 12:28 来源:本站整理 作者:SecYe安全 阅读:

panel中属性collapseMode可以实现面板的折叠,不过属性自带的折叠箭头不太容易辨识,通过修改实现如下展现样式

 

 

具体代码实心如下:

Ext.onReady(function(){

 

var mainPanel=Ext.create('Ext.panel.Panel',{

title:'主信息',

// collapsible:false,

// layout:'border',

height:300,

region:'center'

});

var linePanel=Ext.create('Ext.panel.Panel',{

title:'明细信息',

layout:'fit',

border : true,

autoScroll :true, //形成卷轴

 

collapsible:true,

collapseMode:'mini',

margins:{left: 0, top: 10, right: 0, bottom: 20},

split:true,

frame:true,

height:250,

region:'south'

});

Ext.create('Ext.container.Viewport',{

title:'TEST',

layout:'border',

margins:{left: 0, top: 10, right: 0, bottom: 20},

items:[mainPanel,linePanel],

renderTo:Ext.getBody()

 

});

})

 

 

collapseMode : 'mini' 对应的文件在 ext-all.css 中,如果想修改浮动按钮的显示效果,可以修改css文件中对应的图片路径

实例:

.x-layout-split-north .x-layout-mini{left:48%;height:20px;width:35px;background-image:url(../images/default/layout/up-button.png);} /*mini-top.gif height:5px; width:35px; */

.x-layout-split-south .x-layout-mini{left:48%;height:20px;width:35px;background-image:url(../images/default/layout/down-button.png);} /*mini-bottom.gif height:5px; width:35px; */

 

css文件中默认对应的浮动图片为 mini-top.gif 和 mini-bottom.gif

本文来源:SecYe安全网[http://www.secye.com] (责任编辑:SecYe安全)

点击复制链接 与好友分享!

顶一下
(0)
0%
踩一下
(0)
0%
上一篇:PhantomJS快速入门
下一篇:没有了