随笔-9  评论-168  文章-266  trackbacks-0

HTML:
   <ul id="knowledgemenu" class="x-hidden mymenu">
      <li><a id="knowledge"  class="menubar">知识导航</a></li>
      <li><a id="bbs"    class="menubar">公告</a></li>
      <li><a id="question"    class="menubar">待解决问题</a></li>
      <li><a id="sloved"    class="menubar">已解决问题</a></li>
      <li><a id="knownw"   class="menubar">知识贡献</a></li>
      <li><a id="tagslist"    class="menubar">Tags</a></li>
    </ul>
    <ul id="libmenu" class="x-hidden mymenu">
      <li><a id="knownlist"  class="menubar">文章库</a></li>
      <li><a id="booklist"  class="menubar">图书库</a></li>
      <li><a id="A1"  class="menubar">软件库</a></li>
    </ul>
CSS:

.menubar {
 border-bottom: 1px solid #AACCF6;
 color: #222222;
 cursor: pointer;
 display: block;
 height: 20px;
 width: 50px;
 line-height: 17px;
 outline-color: -moz-use-text-color;
 outline-style: none;
 outline-width: 0;
 padding: 3px;
 text-align: center;
 text-decoration: none;
 white-space: nowrap;
}

.menubar:hover {     //鼠标悬停上时触发
 background: #EBF3FD url(../item-over.gif) repeat-x scroll left bottom;
 text-decoration: none;
}


JS:
    var knowledgemenu = new Ext.Panel({
                 title: '翰维知道',
                 contentEl:'knowledgemenu',  //DOM标签ID
                 border:false,
                    iconCls:'nav'
                });
    var libmenu = new Ext.Panel({
                 title: '专题',
                 contentEl:'libmenu',
                 border:false,
                    iconCls:'nav'
                });
    var westPanel=new Ext.Panel({
                    region:'west',
                    el:'west',
                    title:'功能菜单',
                    collapsible: true,    //本窗口伸缩
                    //collapseMode:'mini',
                    split:true,
                    width: 175,
                    minSize: 175,
                    maxSize: 175,
                    margins:{left: 10, top: 0, right: 0, bottom: 0},
                    layout:'accordion',   //子窗口为折叠
                    layoutConfig:{
                        animate:true
                       // fill :false
                    },
                    items:[knowledgemenu, libmenu]
    }); 
posted on 2009-05-27 16:22 紫蝶∏飛揚↗ 阅读(15877) 评论(5)  编辑  收藏 所属分类: EXTJS

评论:
# re: Extjs 漂亮的Panel折叠伸缩控件 layout:'accordion' 2010-08-02 10:15 | Mr.1
你好你 这个例子里面的 iconCls:'nav'的nav样式定义在那里的,可以贴出来我看看吗  回复  更多评论
  
# re: Extjs 漂亮的Panel折叠伸缩控件 layout:'accordion' 2010-11-10 10:09 | nav样式
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.nav {
background-image:url(examples/shared/icons/fam/folder_go.png);
}
</style>  回复  更多评论
  
# re: Extjs 漂亮的Panel折叠伸缩控件 layout:'accordion' 2010-11-18 14:08 | 帅呆呆
不错,好。
学习了。顶  回复  更多评论
  
# re: Extjs 漂亮的Panel折叠伸缩控件 layout:'accordion' 2011-05-05 16:52 | xmllong
楼主,能不能把你上面代码中用到的图片发上来,万分感谢:)
examples/shared/icons/fam/folder_go.png
../item-over.gif  回复  更多评论
  
# re: Extjs 漂亮的Panel折叠伸缩控件 layout:'accordion' 2011-05-05 22:48 | love
能把这个页面的完整代码发上来吗:俺初学EXT  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: