跟我一起学extjs5(10--使用MVVM控制菜单样式,含前10节源码)

跟我一起学extjs5(10--使用MVVM特性控制菜单样式)

菜单的样式多了,怎么可以灵活的切换是个问题。

在使用标准菜单的时候,在菜单最前面有二个按钮,可以切换到树状菜单和按钮菜单。

在树状菜单的显示区,可以切换换到标准菜单,以及折叠式菜单。

切换到按钮菜单之后:

切换菜单切换到标准菜单和树状菜单,需要在设置里面进行操作。

下面分别来看看是如何实现的。由于内部处理比较复杂,我就画一张大图了,源代码稍后也会发布在csdn中。

现在看看设置里面改变菜单样式的那个控件的运行图。

这个流程比较复杂,有不懂的可以下载了源码自己观看。源码在我的资源里可以找到,或者直接点击打开链接

有任何意见或建设,请跟贴留言。

跟我一起学extjs5(10--使用MVVM控制菜单样式,含前10节源码)

时间: 2024-10-26 20:29:16

跟我一起学extjs5(10--使用MVVM控制菜单样式,含前10节源码)的相关文章

跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码)

跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码) 经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作.由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中. 比如对于"Grid列宽的自动适应"这个功能,我们可以在系统设置项里加入"列宽自适应模式",下面有三个选项:1.不自动适应:2.首次加载数据时自动适应:3?每次加载数据都自动适应.因为列宽自动适应需要

跟我一起学extjs5(28--加入模块和菜单定义[1建立数据库和表])

跟我一起学extjs5(28--加入模块和菜单定义[1建立数据库和表]) 下面我们开始进入自定义系统的设计和各个组成部分的搭建工作. 首先在sql server中建立数据库,这里的数据的名字我定义为extjs5,然后需要建立模块的定义表,这个表里将存着系统中所有模块的定义信息.为了能有个直观的前后台的互动,先把模块和菜单这二个部分加进去,可以把菜单数据组织好后发送到前台去进行展示. 由于系统中的模块很多,需要分类,因此在先要设计一个"模块分组"的表,对于菜单也是一样,需要有一个&quo

跟我一起学extjs5(29--加入模块和菜单定义[2建立java bean])

跟我一起学extjs5(29--加入模块和菜单定义[2建立java bean]) 对上一节中加入的4个模块在java中建立相应的bean文件. 以上表建立好以后,需要建立java bean文件.在建立之前需要加入几个支持类. 先在com.jfok.server.common中建立包annotation,再在下面加入二个类库,这二个是自定义的注释类.分别用来注释每一个模块的信息和模块中每一字段的信息. package com.jfok.server.common.annotation; impor

跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成])

跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成]) 对于大多web程序来说,后台是完成控制和处理的,前台就是一个展示工具,这个系统也是这样.在上一节中建立了四个模块,下面开始设计前后台的交互.将系统信息和模块.菜单信息传到前台,由前台来进行展示. 首先新建一个java bean类用来存放各种需要传到前台的数据,里面包括:系统信息.操作人员信息.服务人员信息.模块信息.菜单.现在只加入了这几个,以后还要加入各种 各样的权限设置.在com.jfok.server.co

跟我一起学extjs5(32--加入模块和菜单定义[4更新菜单(源码下载)])

跟我一起学extjs5(32--加入模块和菜单定义[4根据后台信息更新菜单]) 这一节根据后台传递过来的菜单分组和菜单定义,以及模块定义来更新4种类型的菜单. 按钮菜单和标准菜单的数据格式是一样的,生成的函数都在MainModel.js中,下面将其改一下: // 根据data.tf_MenuGroups生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = [], me = this; Ext.Array.each(this.get('tf

跟我一起学extjs5(31--加入模块和菜单定义[4前台通过ajax来调用数据与展示])

跟我一起学extjs5(31--加入模块和菜单定义[4前台通过ajax来调用数据与展示]) 上一节已经把到现在为止的后台做好了,启动tomcat ,在浏览器中打入网址:http://localhost:8888/app/applicationinfo.do,就可以取得系统参数值.下面看一下在chrome调试器中的结果. 到此为止,后台暂告一段落,又要开始对前台的extjs的程序进行修改了. 首先要修改的是MainModel.js,在此js文件中加入构造函数: constructor : func

10款jquery图片广告特效的预览及源码下载 改自[帅的相对论]

原文格式有问题,我来排版了一下,分享给大家. 1.jQuery仿海尔官网全屏焦点图特效代码 Query仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效.当焦点图切换时,下方的三块小图也相对应的进行切换. 在线演示 源码下载 2.非常炫酷的jQuery动态随机背景滚动特效 非常炫酷的jQuery动态随机背景滚动特效,图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 在线演示 源码下载 3.jQuery立体感动态下拉导航菜单特效 jQuery立体感动态下拉导航菜单特

10款web前端值得学习的 HTML5 效果附源码

1.jQuery右侧Tab选项卡的焦点图插件 这是一款基于jQuery的焦点图插件,和之前介绍的jQuery焦点图插件类似,它以淡入淡出的动画方式来切换图片,该焦点图插件的特点是右侧有一排Tab选项卡,点击相应选项卡后即可切换对应的图片,应该说这款jQuery焦点图插件还是非常实用的. 在线演示 源码下载 2.超炫 HTML5 粒子效果进度条 我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loa

10款web前端基于jquery实现的动画的源码

1.CSS3 过渡特性创建信封效果的联系表单 最近给大家分享 CSS3 效果比较多,都是充分运用了 CSS3 来实现的.通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享使用 CSS3 过渡特性实现的信封效果的联系表单. 在线演示 源码下载 2.大型综合响应式下拉导航栏 今天向大家隆重介绍一款功能强悍的多功能下拉导航栏,该导航栏可以满足大型电子商务网站在内容方面分类的需求,而且是响应式的,不仅如此,该导航栏还加入了隐藏式搜索框,只能说效果实在是太赞了,