随笔分类 -  5、ExtJs

上一页 1 2
ExtJs
16、手把手教你Extjs5（十六）Grid金额字段单位MVVM方式的选择
摘要：这一节来完成Grid中的金额字段的金额单位的转换。转换旰使用MVVM特性，总体上和控制菜单的几种模式类似。首先在目录app/view/main/menu下建立文件Monetary.js，用于放金额单位的数据和生成菜单的items。/** * 金额单位的管理类 */Ext.define('app.vi... 阅读全文
posted @ 2015-11-26 10:47 前端客 阅读(626) 评论(0) 推荐(0)
15、手把手教你Extjs5（十五）各种Grid列的自定义渲染
摘要：Grid各列已经能够展示出来了。列的类型包括字符型，整型，浮点型，货币型，百分比型，日期型和布尔型，我自定义了各种类型的渲染样式： 1、整型：标题栏居中，数值靠右显示，正数颜色为蓝色，负数颜色为红色，0不显示。 2、浮点型：标题栏居中，数值靠右显示，正数颜色为蓝色，负数颜色为红色，显示二位小数，0不... 阅读全文
posted @ 2015-11-26 10:45 前端客 阅读(1256) 评论(1) 推荐(0)
14、手把手教你Extjs5（十四）模块字段和Grid列的定义[2]
摘要：model和columns生成好了，下面要修改一下Module.js和Grid.js中的代码，使其能够协同工作。/** * 一个模块的主控界面的容器，用来安放各个模块控件以及协调他们之间的关系 */Ext.define('app.view.module.Module', { extend: '... 阅读全文
posted @ 2015-11-26 10:44 前端客 阅读(668) 评论(2) 推荐(0)
13、手把手教你Extjs5（十三）模块字段和Grid列的定义[1]
摘要：这一节加入模块自定义字段，并根据这些字段生成model。然后再定义grid中的分组和列。从这一切开始真正进入到了模块自定义的节奏当中，代码的复杂度和技巧性也大大提高。先从模块字段的自定义开始。先看一下ModuleModel.js中加入的新的定义：/** * 模块的数据模型 */Ext.define(... 阅读全文
posted @ 2015-11-26 10:42 前端客 阅读(473) 评论(0) 推荐(0)
12、手把手教你Extjs5（十二）执行菜单命令在tabPanel中显示模块
摘要：上面设计好了一个模块的主界面，下面通过菜单命令的执行来把这个模块加入到主界面当中。在MainModule.js中有一个函数，生成了当前的菜单数据：// 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据getMenus : function() { var items =... 阅读全文
posted @ 2015-11-26 10:41 前端客 阅读(1065) 评论(0) 推荐(0)
11、手把手教你Extjs5（十一）模块界面的总体设计
摘要：上一节中设计了一些模块自定义中用到的要素，为了直观起见，这一节先建立一个模块的主界面。看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了。一个模块的主界面是一个Grid，在其上方有个操作按钮的工具条，在左边有导航区域，在右边有一个记录明细的显示区域。下面即是一个例子：下面我们来... 阅读全文
posted @ 2015-11-26 10:39 前端客 阅读(938) 评论(0) 推荐(0)
10、手把手教你Extjs5（十）自定义模块的设计
摘要：从这一节开始我们来设计并完成一个自定义模块。我们先来确定一个独立的模块的所能定义的一些模块信息。以下信息只是我自己在开发过程中想到或用到的，希望有新的想法的或者有建议的跟贴回复。一个独立模块包含以下信息：1、模块的基本信息模块ID号：一个数字的ID号，可以根据此ID号的顺序将相同分组的模块放在一块。... 阅读全文
posted @ 2015-11-26 10:37 前端客 阅读(893) 评论(0) 推荐(0)
9、手把手教你Extjs5（九）使用MVVM特性控制菜单样式
摘要：菜单的样式多了，怎么可以灵活的切换是个问题。在使用标准菜单的时候，在菜单最前面有二个按钮，可以切换到树状菜单和按钮菜单。在树状菜单的显示区，可以切换换到标准菜单，以及折叠式菜单。切换到按钮菜单之后：切换菜单切换到标准菜单和树状菜单，需要在设置里面进行操作。下面分别来看看是如何实现的。由于内部处理比较... 阅读全文
posted @ 2015-11-26 10:36 前端客 阅读(445) 评论(0) 推荐(0)
8、手把手教你Extjs5（八）自定义菜单2
摘要：这一节来定义另外三种类型的菜单类。首先定义菜单按钮类。文件放于app/view/main/region目录下面，文件名为ButtonMainMenu.js。/** * 显示在顶部的按钮菜单，可以切换至标准菜单，菜单树 */Ext.define('app.view.main.region.Button... 阅读全文
posted @ 2015-11-26 10:35 前端客 阅读(455) 评论(0) 推荐(0)
7、手把手教你Extjs5（七）自定义菜单1
摘要：顶部和底部区域已经作好，在顶部区域有一个菜单的按钮，这一节我们设计一个菜单的数据结构，使其可以展示出不同样式的菜单。由于准备搭建的是一个系统模块自定义的系统，因此菜单也是自定义的，在操作员系统登录的时候，和MainModel中的其他数据一样，将会通过ajax加载要显示的菜单数据，然后生成菜单条或者菜... 阅读全文
posted @ 2015-11-26 10:33 前端客 阅读(1140) 评论(0) 推荐(0)
6、手把手教你Extjs5（六）继承自定义一个控件
摘要：Extjs的开发都可以遵循OOP的原则，其对类的封装也很完善了。自定义一个控件最简单的办法就是继承一个已有的控件。根据上一节的需要，我做了一个Button的子类。首先根据目录结构，在app目录下建立一个ux目录，将自定义控件都放在这个目录下。在ux目录下建立一个文件ButtonTransparent... 阅读全文
posted @ 2015-11-26 10:30 前端客 阅读(919) 评论(0) 推荐(0)
sencha cmd常用命令汇总
摘要：一、sencha generate:自动生成项目或者代码 1、sencha generate app 项目名称 生成路径 ：生成一个新的extjs项目 注明：以上命令会从官网下载试用版本的ext代码到你本地，如果你已经下载到本地，需要用 -sdk命令指定本地的ext目录来生成你的应用程序，如下： s 阅读全文
posted @ 2015-11-23 11:56 前端客 阅读(5451) 评论(0) 推荐(0)
Extjs的架构设计思考，单页面应用 or 多页面？
摘要：写在前面：不要认为 EXTJS 高版本就是一个界面改良，在项目中，仍然用 N 张页面，在 N 张页面部署 EXTJS ．这种方式不用多讲，效率问题大家都看得出来， EXTJS 是一个集成开发工具，注定他的开发包很大，一个 600 多 K 的 JS 文件，打算让它下载多少次呢？应该说， EXTJS 不 阅读全文
posted @ 2015-11-22 16:32 前端客 阅读(1358) 评论(0) 推荐(0)
5、手把手教你Extjs5(五)使用图标字体来美化按钮)
摘要：sencha 的例子中，有使用图标字体来美化按钮的例子，这个用起来又方便风格又统一，例如下图：上面图标字体的使用方法也很简单，只要下载Font Awesome的css和图标文件，放到项目里就可以了。部分图标截图：Font Awesome的网站为：点击打开链接。进入网站后，先下载Font Awesom... 阅读全文
posted @ 2015-11-20 18:28 前端客 阅读(1199) 评论(0) 推荐(0)
4、手把手教你Extjs5(四)主界面上加入顶部和底部区域
摘要：这一节为主界面加一个顶部区域和底部区域。一个管理系统的界面可以粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。在增加这二个区域之前，我们先在MainModel.js中加入一些数据。Ext.define('app.view.main.MainModel', { extend: ... 阅读全文
posted @ 2015-11-20 18:21 前端客 阅读(883) 评论(0) 推荐(0)
3、手把手教你Extjs5(三)MVVM特性的简单说明
摘要：下面我们来看一下自动生成的代码中的MVVM架构的关系。Main是一个可视的控件，MainController是这个控件的控制类，MainModel是这个控件的模型类。在上面的图片中，左边是Main.js中的代码，右边是MainController.js 和 MainModel.js中的代码，可以看到... 阅读全文
posted @ 2015-11-20 16:56 前端客 阅读(1357) 评论(2) 推荐(0)
2、手把手教你Extjs5(二)项目中文件的加载过程
摘要：上一节中用sencha工具自动创建了一个项目，并且可以在浏览器中查看。现在我们来看看js类加载过程。如下图所示：1､首先：浏览器中输入 localhost:1841 ，调用 index.html; app 在这里面只引入了一个文件：bootstrap.js。这是一个神奇的... 阅读全文
posted @ 2015-11-20 16:05 前端客 阅读(1289) 评论(0) 推荐(0)
1、Sencha cmd学习笔记(一) 使你的sencha cmd跑起来
摘要：带着Ext JS 5来使用sencha cmd 这个指导通过处理使用 sencha cmd的sencha generate app命令来创建应用程序，本文是以允许一个应用程序来结束的 处理更新一个存在的应用程序来体验Sencha cmd是在本章结束的时候介绍的，首先理解什么是"ideal"和“def 阅读全文
posted @ 2015-11-20 10:37 前端客 阅读(1759) 评论(0) 推荐(0)
1、手把手教你Extjs5(一)搭建ExtJS5环境
摘要：搭建ExtJS5环境 Sencha Cmd 5 with ExtJS 5 下载并解压 ExtJS 5 SDK 使用 sencha generate app 命令生成 ExtJS 项目环境 阅读全文
posted @ 2015-11-19 18:33 前端客 阅读(5040) 评论(0) 推荐(0)

上一页 1 2