【9、手把手教你Extjs5（九）使用MVVM特性控制菜单样式】的更多相关文章

9、手把手教你Extjs5（九）使用MVVM特性控制菜单样式

菜单的样式多了,怎么可以灵活的切换是个问题. 在使用标准菜单的时候,在菜单最前面有二个按钮,可以切换到树状菜单和按钮菜单. 在树状菜单的显示区,可以切换换到标准菜单,以及折叠式菜单. 切换到按钮菜单之后: 切换菜单切换到标准菜单和树状菜单,需要在设置里面进行操作. 下面分别来看看是如何实现的.由于内部处理比较复杂,我就画一张大图了,源代码稍后也会发布在csdn中. 现在看看设置里面改变菜单样式的那个控件的运行图.…

12、手把手教你Extjs5（十二）执行菜单命令在tabPanel中显示模块

上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = []; var menuData = this.get('systemMenu'); // 取得定义好的菜单数据 Ext.Array.each(menuData, function(group) {…

19、手把手教你Extjs5（十九）模块Grid的其他功能的设想

经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作.由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中. 比如对于“Grid列宽的自动适应”这个功能,我们可以在系统设置项里加入“列宽自适应模式”,下面有三个选项:1.不自动适应:2.首次加载数据时自动适应:3､每次加载数据都自动适应.因为列宽自动适应需要时间,如果字段很多,记录很多会比较慢,因此可以加入这个设置,使用户根据自己的喜好来设置.还可以对每种类型的字…

16、手把手教你Extjs5（十六）Grid金额字段单位MVVM方式的选择

这一节来完成Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,总体上和控制菜单的几种模式类似.首先在目录app/view/main/menu下建立文件Monetary.js,用于放金额单位的数据和生成菜单的items. /** * 金额单位的管理类 */ Ext.define('app.view.main.menu.Monetary', { statics: { values: null, getAllMonetary: function () { if (!this.values)…

24、手把手教你Extjs5（二十四）模块Form的自定义的设计[3]

自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下.修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性. 上面设置好了以后,可以看到Form中FieldSet都放置在Tab中了,下面的截图展示了二个Tab的界面. 从理论上说,如果你的Form配置信息设置得合理,可以得到你想要的任何样式的Form.但在实际应用的时候,我们只要完成大部分能自动生成就足够了,真正程序中有超级变态复杂的Form结构,可以自己…

3、手把手教你Extjs5(三)MVVM特性的简单说明

下面我们来看一下自动生成的代码中的MVVM架构的关系.Main是一个可视的控件,MainController是这个控件的控制类,MainModel是这个控件的模型类. 在上面的图片中,左边是Main.js中的代码,右边是MainController.js 和 MainModel.js中的代码,可以看到MVVM中的事件绑定和属性值绑定都用到了.上图中红色的部分标注了一个按钮“Button”的handler(即click)事件绑定到MainController.js中的函数“OnClickButto…

2、手把手教你Extjs5(二)项目中文件的加载过程

上一节中用sencha工具自动创建了一个项目,并且可以在浏览器中查看.现在我们来看看js类加载过程.如下图所示: 1､首先:浏览器中输入 localhost:1841 ,调用 index.html; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>app</title> <!-- The line below must be kept i…

20、手把手教你Extjs5（二十）模块Grid的多列表方案

对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案.在这个自定义系统进行设计的时候,我已经将这部分内容设计了进去,在ModuleModel.js中,在data下面有个属性tf_gridSchemes为数组型,你有多少种方案,都定义在这个下面就可以了,然后再创建一个控件可以根据这些定义来进行方案的选择,选择好以后让grid重新配置新的方案即可. 先来看一下新增一个方案的配置信息,在ModuleMode…

18、手把手教你Extjs5（十八）模块记录的拖放删除、拖放复制新增

网页当中的拖放(drag-drop)是比较有趣的操作,extjs5中很好的封装了拖放的动作,也有各种类来支持,但是要学好“拖放”这个东西真是很难,特别是象我这样英语不好的人,看不太懂官网上的说明,做一个拖放的操作起码得几天的时间. 下面完成拖放删除的功能.即,选中一条记录或多条记录,然后拖动到“删除”按钮上,最后松开鼠标进行记录删除的操作.操作步骤: 1.给Grid增加新的配置,使其记录允许拖动.在Grid.js中的initComponent函数中加入 this.viewConfig = { s…

15、手把手教你Extjs5（十五）各种Grid列的自定义渲染

Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色,0不显示. 2.浮点型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色,显示二位小数,0不显示. 3.货币型:同浮点型,但是可以选择不同的单位,如元,千元,万元,百万元,亿元.数据有分节显示. 4.百分比型:自定义的一个百分比的显示,有数值和图像来形象的表示百分比. 5.日期型:显示格式为…