本节作为制作菜单的第二个主要部分,当然这个功能又比第七篇复杂许多,这里不仅仅要实现左边的树形菜单,而且还要实现顶部的菜单栏,顶部的菜单栏显示的是树的所有的根节点.默认打开页面会显示左面所有的菜单,但是当点击顶部某个根节点时,首先会将左边的菜单全部清除,然后会顶部的菜单所有对应的节点加载到左面的树形菜单里面,当每次点击顶部菜单时,都会对检查左面的菜单是否与之对应,如果不对应,就将其清除,然后加载新的菜单.本例更具有实用性.
本篇除了有第七篇所包含的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幅图则是用来显示当点顶部菜单后所展现的迷人的效果.图片较大.
1,下面将完整客户端代码完整复制,显示如下:
Code
