桃乐比 - 博客园

2014年12月25日

摘要： ExtJS 4 的应用界面是由很多小部件组合而成的，这些小部件被称作“组件(Component)”，所有组件都是Ext.Component的子类，Ext.Component提供了生命周期管理包括初始化、渲染、大小和尺寸管理、销毁等功能，这使得所有Ext.Component的子类都自动分享了这些能力。ExtJS提供了各式各样丰富的组件，每一个组件都很容易被扩展创建成自定义组件。 The Compon... 阅读全文

posted @ 2014-12-25 22:39 桃乐比阅读(892) 评论(0) 推荐(0)

ExtJS 4 MVC架构讲解

摘要：大规模客户端应用通常不好实现不好组织也不好维护，因为功能和人力的不断增加，这些应用的规模很快就会超出掌控能力，ExtJS 4 带来了一个新的应用架构，不但可以组织代码，还可以减少实现的内容新的应用架构遵照一个类MVC的模式，模型（Models）和控制器（Controllers）首次被引入。业界有很多种MVC架构，基本大同小异，ExtJS 4的定义如下： Model模型是字段和它们的数据的集... 阅读全文

posted @ 2014-12-25 22:26 桃乐比阅读(337) 评论(0) 推荐(0)

2014年12月24日

Extjs4.1.x使用Application动态按需加载MVC各模块

摘要：我们知道Extjs4之后提出了MVC模块开发，将以前肥厚的js文件拆分成小的js模块[model\view\controller\store\form\data等]，通过controller拼接黏合，提高了js代码的重用性，可阅读性，更加适合团队的开发。js采用mvc后必定会带来一个问题，如何高效的... 阅读全文

posted @ 2014-12-24 22:19 桃乐比阅读(772) 评论(0) 推荐(0)

ExtJs MVC应用架构示例

摘要：项目目录结构 (源码)2. app.jsExt.Loader.setConfig({ enabled : true, paths : { 'Ext' : 'extjs', 'App' : 'app', 'Ext.ux' : '... 阅读全文

posted @ 2014-12-24 22:08 桃乐比阅读(362) 评论(0) 推荐(0)

2014年11月14日

ExtJS5_自定义菜单2

摘要：这一节来定义另外三种类型的菜单类。首先定义菜单按钮类。文件放于app/view/main/region目录下面，文件名为ButtonMainMenu.js。 /** * 显示在顶部的按钮菜单，可以切换至标准菜单，菜单树 */ Ext.define('app.view.main.region.ButtonMainMenu', { extend : 'app.ux.ButtonTrans... 阅读全文

posted @ 2014-11-14 23:25 桃乐比阅读(284) 评论(0) 推荐(0)

ExtJS5_自定义菜单1

摘要：顶部和底部区域已经作好，在顶部区域有一个菜单的按钮，这一节我们设计一个菜单的数据结构，使其可以展示出不同样式的菜单。由于准备搭建的是一个系统模块自定义的系统，因此菜单也是自定义的，在操作员系统登录的时候，和MainModel中的其他数据一样，将会通过ajax加载要显示的菜单数据，然后生成菜单条或者菜... 阅读全文

posted @ 2014-11-14 23:20 桃乐比阅读(276) 评论(0) 推荐(0)

ExtJs5_继承自定义一个控件

摘要： Extjs的开发都可以遵循OOP的原则，其对类的封装也很完善了。自定义一个控件最简单的办法就是继承一个已有的控件。根据上一节的需要，我做了一个Button的子类。首先根据目录结构，在app目录下建立一个ux目录，将自定义控件都放在这个目录下。在ux目录下建立一个文件ButtonTransparent... 阅读全文

posted @ 2014-11-14 23:07 桃乐比阅读(338) 评论(0) 推荐(0)

ExtJs5_使用图标字体来美化按钮

摘要： sencha 的例子中，有使用图标字体来美化按钮的例子，这个用起来又方便风格又统一，例如下图：上面图标字体的使用方法也很简单，只要下载Font Awesome的css和图标文件，放到项目里就可以了。部分图标截图： Font Awesome的网站为：点击打开链接。进入网站后，先下载Font Awes... 阅读全文

posted @ 2014-11-14 23:00 桃乐比阅读(403) 评论(0) 推荐(1)

ExtJS5_主界面上加入顶部和底部区域

摘要：为主界面加一个顶部区域和底部区域。一个管理系统的界面可以粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。在增加这二个区域之前，我们先在MainModel.js中加入一些数据。Ext.define('app.view.main.MainModel', { extend : 'E... 阅读全文

posted @ 2014-11-14 22:47 桃乐比阅读(400) 评论(0) 推荐(0)

ExtJS5_MVVM特性的简单说明

摘要：下面我们来看一下自动生成的代码中的ＭＶＶＭ架构的关系。Main是一个可视的控件，MainController是这个控件的控制类，MainModel是这个控件的模型类。在上面的图片中，左边是Main.js中的代码，右边是MainController.js 和 MainModel.js中的代码，可以看... 阅读全文

posted @ 2014-11-14 22:41 桃乐比阅读(832) 评论(0) 推荐(0)