HTML:
<ul id="knowledgemenu
" class="x-hidden
mymenu"
(这里的class用来隐藏面板内容的)>
<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
(contentEL可以换成html)
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]
});
http://www.blogjava.net/algz/articles/278217.html
分享到:
相关推荐
EXTJS4的菜单栏设计灵活,可自定义程度高,支持多级菜单、图标、分隔符等元素,为开发者提供了丰富的API和配置选项。 菜单栏在EXTJS4中的实现主要基于`Ext.menu.Menu`类。这个类提供了一个容器,可以容纳多个菜单项...
动态加载菜单是ExtJS中的一个关键特性,它允许在用户交互过程中动态地创建、修改和加载菜单项,提供了更灵活的用户界面设计。在“Extjs动态加载菜单”这个主题中,我们将深入探讨这一功能的实现方式以及相关技术。 ...
在ExtJS中,折叠布局(Accordion Layout)是一种特殊的布局方式,它将所有子组件(Panels)垂直堆叠,并且在任何时刻只允许一个面板展开显示其内容,其他面板则保持折叠状态。`layout: 'accordion'` 就是用来设置...
动态树加载菜单是 ExtJS 中一种常见且实用的功能,它允许用户在需要时按需加载树节点,从而提高应用性能,减少初次加载时的数据量。 动态树加载,也称为懒加载或按需加载,是指在用户滚动、展开节点或执行其他操作...
在ExtJS中,导航菜单通常通过`Ext.menu.Menu`类来实现,这是一个可弹出的菜单,可以包含多个子菜单项。创建导航菜单时,我们需要定义菜单项(menu items),每个菜单项可以是简单的链接、复选框、分割线或包含子菜单...
Extjs经典教程,关于面板布局的学习资料,图文并茂,值得一看
在ExtJS5中,树形菜单(Tree Menu)是一种常见的UI组件,它允许用户以层次结构的方式展示数据,非常适合用于目录浏览、文件系统导航或者复杂的组织结构展示。在本篇文章中,我们将深入探讨ExtJS5树形菜单的使用方法...
标题中的“ExtJS Desktop相关 动态生成开始菜单 多级菜单的快捷方式”涉及到的是一个使用ExtJS框架实现的桌面应用模拟系统,它能够创建类似Windows操作系统的开始菜单,并支持多级菜单结构来快速访问应用程序或功能...
extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...
### Extjs面板和布局知识点详解 #### 一、Extjs中的面板(Panel) 在Extjs中,**面板(Panel)**扮演着极其重要的角色,它不仅作为其他组件的容器,而且还是实现页面布局的关键手段之一。面板类似于Delphi、Visual...
extjs点击右侧面板生成tab,面板是ul+li的
总结来说,ExtJS 4.2 Desktop 拓展是一个集成了多种桌面特性并优化了基础框架的解决方案,它提供了图标换行、窗口拖动、多级开始菜单等功能,使得开发复杂的Web应用变得更加简单和直观。通过下载提供的LinBDesk4.2...
Extjs 下拉菜单实现拼音输入进行检索
EXTJS的动态树(TreePanel)组件允许开发者创建可交互的树形结构,这些结构可以动态地加载数据。树节点可以包含子节点,可以展开或折叠,支持拖放操作,非常适合用来展示层次化的信息,如目录结构、组织架构等。动态...
例如,小屏幕设备可以折叠菜单,大屏幕设备则可以展开全部菜单。 6. **事件处理**:在菜单导航中,事件处理是关键。通过监听`click`、`beforeclick`等事件,可以实现对用户操作的响应,进行权限控制、数据加载等...
在IT行业中,ExtJS是一个广泛使用的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件库,包括数据绑定、布局管理...通过这样的方式,我们可以构建出动态、可扩展且高效的树形菜单,适应各种业务需求。
ext js简单的折叠布局 自己总结的 根据项目的需要可以使用
在Sencha Touch中,`Accordion`布局是一种特殊的布局方式,主要用于展示一系列可折叠的面板,每个面板只显示一个内容区域,用户点击一个面板时,其他面板会自动收起。这种布局方式常用于信息展示、菜单导航等场景,...
在本篇文章中,我们将详细了解如何使用ExtJS框架实现具有下拉树功能的下拉菜单效果。ExtJS是一个成熟的JavaScript框架,用于创建交互式的Web应用程序,提供了一整套丰富的用户界面组件,其下拉树组件是其众多组件之...
本文将详细介绍如何使用ExtJs构建树形菜单,并通过实际示例来演示具体步骤。 #### 二、创建基础树形菜单 在ExtJs中,树形菜单主要通过`Ext.tree.TreePanel`类来实现。该类继承自`Panel`面板,提供了许多特性和方法...