随笔分类 -  ExtJS

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

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

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

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

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

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

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

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