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

页面导航:首页 > 网络编程 > JavaScript > Extjs中panel的 collapseMode 属性的应用,修改折叠箭

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

来源: 作者: 时间:2016-02-01 09:31 【

panel中属性collapseMode可以实现面板的折叠,不过属性自带的折叠箭头不太容易辨识,通过修改实现如下展现样式具体代码实心如下:Ext onReady(function(){ var mainPanel=Ext create(Ext panel

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

 

data-cke-saved-src=/uploads/allimg/c160122/1453422cL4Y0-19452.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

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<