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

作者:襄阳西继迅达电梯有限公司  发布时间:2017-09-02 11:46:08
Extjs中panel的 collapseMode 属性的应用,修改折叠箭头样式

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

data-cke-saved-src=http://xyxjxd.com/uploadfile/2017/0902/20170902114612583.png

具体代码实心如下:

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

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:咸宁SEO http://xianning.4567w.com

  • 上一篇:卡汀财经分享—CFA考试拥有超常记忆力的小习惯
  • 下一篇:最后一页
  •