您的位置：首页 > Web前端 > JavaScript

EXTJS学习系列提高篇:第八篇(转载)作者殷良胜,制作树形菜单之二

2008-11-03 16:07 351 查看

本节作为制作菜单的第二个主要部分,当然这个功能又比第七篇复杂许多,这里不仅仅要实现左边的树形菜单,而且还要实现顶部的菜单栏,顶部的菜单栏显示的是树的所有的根节点.默认打开页面会显示左面所有的菜单,但是当点击顶部某个根节点时,首先会将左边的菜单全部清除,然后会顶部的菜单所有对应的节点加载到左面的树形菜单里面,当每次点击顶部菜单时,都会对检查左面的菜单是否与之对应,如果不对应,就将其清除,然后加载新的菜单.本例更具有实用性.

本篇除了有第七篇所包含的ext组件外,还增加了几个Ext组件,如:TabPanel,Toolbar,Button,Toolbar.Button,下面就对这几个Ext组件做一个简单的回顾:

1,TabPanel 作为一个选项板窗口,实际上是由许多个tab组成,不过没有tab类,因为每个tab就是一个简单的panel.可以有很多中方式构造出TabPanel ,它有两个很重要的属性,一个是activate,一个是deactivate,不用多说,他的意义大家一目了然.

2,Toolbar 一看就知道工具栏的作用了,在panel可以有工具栏,工具栏可以存放按钮,文本,分隔符等许多内容,并且它还可以直接通过面板的tools配置项往面板头部添加预先定义的工具栏选项.这个我会在基础篇中详细讲解

3,Button按钮和Toolbar.Button按纽就不用多解释了,但有一点要提到,那就是可以在Button上轻易定义任何图标.

同样在复制代码之前,先看看这个效果如何,放心,我不会夸大其词,它确实很精美,在这里也会依次显示页面的效果,比如在首次加载和点击[首页]的效果是一样的,另外2幅图则是用来显示当点顶部菜单后所展现的迷人的效果.图片较大.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="Example_TreeAutoLoad_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>无标题页</title>

<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />

<link rel="Stylesheet" type="text/css" />

<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-purple.css" />

<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ExtJS/ext-all.js"></script>

<script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>

<style type="text/css">

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<script type="text/javascript">

function BuildTree1()

</script>

<script type="text/javascript">

function ready()

Ext.onReady(ready);

</script>

</div>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航