跟我一起学extjs5
文章平均质量分 86
蒋锋
工作经历丰富,现在正在开发spring boot + react + ant design的常规功能自定义系统,邮件联系:jfok1972@qq.com
展开
-
跟我一起学extjs5(10--使用MVVM控制菜单样式,含前10节源码)
跟我一起学extjs5(10--使用MVVM特性控制菜单样式) 菜单的样式多了,怎么可以灵活的切换是个问题。 在使用标准菜单的时候,在菜单最前面有二个按钮,可以切换到树状菜单和按钮菜单。 在树状菜单的显示区,可以切换换到标准菜单,以及折叠式菜单。 切换到按钮菜单之后:原创 2014-07-03 11:00:04 · 16347 阅读 · 61 评论 -
跟我一起学extjs5(31--加入模块和菜单定义[4前台通过ajax来调用数据与展示])
跟我一起学extjs5(31--加入模块和菜单定义[4前台通过ajax来调用数据与展示])原创 2014-09-29 12:57:59 · 6142 阅读 · 5 评论 -
跟我一起学extjs5(33--单个模块的设计[1建立表和bean])
跟我一起学extjs5(33--单个模块的设计[1建立表和bean]) 现在开始进入这个系统的第一个核心部分,就是如何对模块的功能进行设计。请看下图,一个最简单的模块包括的内容有:模块属性,字段属性,列表定义和表单定义。 在上面的定义中,一个模块可以有n个字段组成,可以有若干个列表方案和表单方案;每一个列表和表单可以有若干个组组成,每个组下面又有原创 2014-10-09 10:24:03 · 4617 阅读 · 1 评论 -
跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成])
跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成]) 对于大多web程序来说,后台是完成控制和处理的,前台就是一个展示工具,这个系统也是这样。在上一节中建立了四个模块,下面开始设计前后台的交互。将系统信息和模块、菜单信息传到前台,由前台来进行展示。 首先新建一个java bean用来存放各种需要传到前台的数据,里面包括:系统原创 2014-09-29 08:30:27 · 5612 阅读 · 4 评论 -
跟我一起学extjs5(28--加入模块和菜单定义[1建立数据库和表])
跟我一起学extjs5(27--加入模块和菜单定义[1建立数据库和表) 下面我们开始进入自定义系统的设计和各个组成部分的搭建工作。 首先在sql server中建立数据库,这里的数据的名字我定义为extjs5,然后需要建立模块的定义表,这个表里将存着系统中所有模块的定义信息。为了能有个直观的前后台的互动,先把模块和菜单这二个部分加进去,可以把菜单数据组织好后发送原创 2014-09-28 08:11:51 · 5468 阅读 · 3 评论 -
跟我一起学extjs5(29--加入模块和菜单定义[2建立java bean])
二、java中建立相应的bean文件。 以上表建立好以后,需要建立java bean文件。在建立之前需要加入几个支持类。 先在com.jfok.server.common中建立包annotation,再在下面加入二个类库,这二个是自定义的注释类。分别用来注释每一个模块的信息和模块中每一字段的信息。package com.jfok.server.common.原创 2014-09-28 10:18:46 · 5444 阅读 · 7 评论 -
跟我一起学extjs5(26--加入后台处理的系统设计)
跟我一起学extjs5(26--加入后台处理的系统设计) 对于extjs5的自定义系统,前面介绍了模块基本控件的自定义生成,包括菜单、grid列表、form表单,对于其他功能的再深入就必须加入后台控制系统和前台协同工作了。 这一节介绍一下后台开发环境,后台处理程序我使用 java + spring MVC + hibernate + Sql S原创 2014-09-25 11:27:10 · 6538 阅读 · 7 评论 -
跟我一起学extjs5(27--服务端web,spring,hibernate配置文件的加入)
跟我一起学extjs5(27--服务端web,spring,hibernate配置文件的加入) 我们前面创建项目的时候是一个java web project,现在在项目中需要加入spring,hibernate,sqlserver连接的jar包以及加入配置文件。spring我现在使用的是3.1版本,hibernate使用的是3.0,具体的jar包以及一些附加包,请自行下载后加原创 2014-09-26 11:00:21 · 6461 阅读 · 5 评论 -
跟我一起学extjs5(18--模块的新增、修改、删除操作)
跟我一起学extjs5(18--模块的新增、修改、删除操作) 上节在Grid展示时做了一个金额单位可以手工选择的功能,如果你要加入其他功能,也只要按照这个模式来操作就行了,比如说你想改变金额字段的颜色、小数位数、零值是否显示、货币符号、单位显示在标题栏或者跟在金额后面,凡是你能想到的需要手工设置的东西都可以加进来。 上面讲到的这些设置以后会加到程序里,在下载包里可以看到,原创 2014-07-15 14:28:14 · 11834 阅读 · 7 评论 -
跟我一起学extjs5(32--加入模块和菜单定义[4更新菜单(源码下载)])
跟我一起学extjs5(32--加入模块和菜单定义[4根据后台信息更新菜单]) 这一节根据后台传递过来的菜单分组和菜单定义,以及模块定义来更新4种类型的菜单。 按钮菜单和标准菜单的数据格式是一样的,生成的函数都在MainModel.js中,下面将其改一下: // 根据data.tf_MenuGroups生成菜单条和菜单按钮下面使用的菜单数据原创 2014-09-30 15:23:02 · 6402 阅读 · 9 评论 -
跟我一起学extjs5(34--单个模块的设计[2建立表单表bean])
跟我一起学extjs5(34--单个模块的设计[2建立表单表及bean]) 建立表单方案表:CREATE TABLE [dbo].[_ModuleFormScheme]( [tf_formSchemeId] [int] NOT NULL, [tf_moduleId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,原创 2014-10-10 14:32:25 · 4649 阅读 · 1 评论 -
跟我一起学extjs5(35--单个模块的设计[3根据类的标注自动生成数据])
跟我一起学extjs5(34--单个模块的设计[2根据类的标注自动生成数据]) 然后在hibernate.cfg.xml中加入: 至此这4个模块的数据表已经加好了,下面是根据类的标注信息自动生成上述4个类中数据的过程。也就是说你新建一个类,用自定义的标识语言来标注各个字段之后,可以根据标注的信息把各个字段的内容写到数据库中原创 2014-10-10 15:13:28 · 4487 阅读 · 1 评论 -
跟我一起学extjs5(01--开发的总体说明)
跟我一起学extjs5(01--开发的总体说明) 我之前使用extjs4+java spring MVC架构了一套“模块常规功能自定义的系统”(博客详见点击打开链接),该系统中详细讲解了设计思想,但并未有实现过程。由于extjs5的发布,并有许多新特性,而我对原系统正有重构和加入新功能的想法,因此决定对该系统进行升级,并将升级的开发过程写成博客。原创 2014-06-30 11:15:52 · 45735 阅读 · 28 评论 -
跟我一起学extjs5(40--增加一个自定义模块[1建立表和bean文件])
跟我一起学extjs5(40--增加一个自定义模块[1建立表和bean文件]) 经过上面的工作,一个独立模块的CRUD已经可以运行了,为了更好的可以看到其他自定义功能,我们做一个自定义的独立模块,这个模块中包括了各种的数据类型。 新增一个“销售合同“的独立严模块,模块名称为Agreement,里面包括了20几个字段,把主要的字段类型都设置了,有字符串型,原创 2014-10-16 16:29:46 · 4706 阅读 · 4 评论 -
跟我一起学extjs5(41--增加一个自定义模块(源码下载)[2销售合同加入菜单和模块展示])
跟我一起学extjs5(41--增加一个自定义模块[2销售合同加入菜单和模块展示]) 在前面一节销售合同模块的信息导入系统后,需要在菜单中加入这个模块,但是现在菜单模块没法利用此系统进行编辑(多模块的层次现在还没有加入),因此只能在数据库里加入一条记录了: 加入后,重新启动一下tomcat,进入系统,就能在菜单"合同管理“下,原创 2014-10-17 08:56:18 · 9325 阅读 · 63 评论 -
跟我一起学extjs5(42--单个模块的数据新增方式)
跟我一起学extjs5(43--单个模块的数据新增方式的定义) 前面已经加入了一个自定义的模块,并且可以进行数据的新增、修改、删除的操作了。这一节来设想几种新据新增的方式,并给出一些具体的解决方案。看了我后台java源码的可以看出,所有的模块的新增、修改、删除全部是相同的处理,只是用了反射来原创 2014-11-17 15:48:18 · 5962 阅读 · 17 评论 -
跟我一起学extjs5(39--单个模块的设计[7数据的增加修改删除])
跟我一起学extjs5(39--单个模块的设计[7数据的增加修改删除]) 从后台取得数据已经可以了,下面对记录的新增、修改和删除进行前后台的互动改造。首先将新增和修改在行内进行,也就是都是在grid上进行。 在grid上可以编辑行,需要在initComponent中增加一个plugins的修改,将原来cellEditing的删除掉,加入rowEditin原创 2014-10-14 15:08:52 · 5603 阅读 · 1 评论 -
跟我一起学extjs5(38--单个模块的设计[6取得模块列表数据])
跟我一起学extjs5(38--单个模块的设计[6取得模块列表数据]) 上一节中做好了前后台的程序,现在来看看取得数据的运行过程。在菜单中选择 “系统管理”--“模块分组”。就可以看到下图,在渲染后grid后,会显示数据。 来看看ajax取得数据的url和数据。 url的信息:Remote Addre原创 2014-10-13 09:45:22 · 4508 阅读 · 3 评论 -
跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])
跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据]) 写了几个月,总算有点盼头了,终于要从后台取得数据了。后台的spring mvc 和 service 只能简单的说说了,里面加了几十个类,有兴趣的下载了源码自己看。下面画张通用的模块列表取数据的流程,这个流程是适用于所有的模块。我这个后台处理程序也是对所有的模块进行统一处理,包括数据查找,新增,修改,删原创 2014-10-13 08:34:18 · 6378 阅读 · 3 评论 -
跟我一起学extjs5(36--单个模块的设计[4根据菜单建立相应的模块])
跟我一起学extjs5(36--单个模块的设计[4根据菜单建立相应的模块]) 前几节处理好了后台,现在又要处理前台了。首先是要修改菜单的选择事件,在创建一个module的时候将 moduleName参数传递进去。 修改MainController.js中的函数: // 选择了主菜单上的菜单后执行 onMainMenuClick : functi原创 2014-10-11 11:55:10 · 5226 阅读 · 4 评论 -
跟我一起学extjs5(25--模块Form的自定义的设计[3])
跟我一起学extjs5(25--模块Form的自定义的设计[3]) 自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下。修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性。 上面设置好了以后,可以看到Form中FieldSet都放置在Tab中了,下面的原创 2014-07-30 09:34:11 · 7043 阅读 · 14 评论 -
跟我一起学extjs5(14--模块字段和Grid列的定义[1])
跟我一起学extjs5(14--模块字段和Grid列的定义及生成) 这一节加入模块自定义字段,并根据这些字段生成model。然后再定义grid中的分组和列。从这一切开始真正进入到了模块自定义的节奏当中,代码的复杂度和技巧性也大大提高。先从模块字段的自定义开始。先看一下ModuleModel.js中加入的新的定义:/** * 模块的数据模型 */Ext.defi原创 2014-07-11 14:41:16 · 11338 阅读 · 13 评论 -
跟我一起学extjs5(08--自定义菜单1)
跟我一起学extjs5(08--自定义菜单1) 顶部和底部区域已经作好,在顶部区域有一个菜单的按钮,这一节我们设计一个菜单的数据结构,使其可以展示出不同样式的菜单。由于准备搭建的是一个系统模块自定义的系统,因此菜单也是自定义的,在操作员系统登录的时候,和MainModel中的其他数据一样,将会通过ajax加载要显示的菜单数据,然后生成菜单条或者菜单树。在这个例子中,我原创 2014-07-02 09:38:45 · 16529 阅读 · 29 评论 -
跟我一起学extjs5(07--继承自定义一个控件)
跟我一起学extjs5(07--继承自定义一个控件) Extjs的开发都可以遵循OOP的原则,其对类的封装也很完善了。自定义一个控件最简单的办法就是继承一个已有的控件。根据上一节的需要,我做了一个Button的子类。首先根据目录结构,在app目录下建立一个ux目录,将自定义控件都放在这个目录下。在ux目录下建立一个文件ButtonTransparent.js。原创 2014-07-01 14:01:00 · 21408 阅读 · 21 评论 -
跟我一起学extjs5(03--项目中文件的加载过程)
跟我一起学extjs5(03--项目中文件的加载过程)原创 2014-06-30 11:17:31 · 31223 阅读 · 32 评论 -
跟我一起学extjs5(02--建立工程项目)
跟我一起学extjs5(02--建立工程项目)我们先建立一个java Project,虽然现在开发跟java一点关系也没有,我们也先塔建java的Web环境。1、进入eclipse,建立一个Dynamic Web Project 。,next >, next > ,Finish。至此完成java pro原创 2014-06-30 11:16:59 · 35239 阅读 · 50 评论 -
跟我一起学extjs5(04--MVVM特性的简单说明)
跟我一起学extjs5(04--MVVM特性的简单说明)下面我们来看一下自动生成的代码中的MVVM架构的关系。Main是一个可视的控件,MainController是这个控件的控制类,MainModel是这个控件的模型类。在上面的图片中,左边是Main.js中的代码,右边是MainController.js 和 MainModel.js中的代码,可以原创 2014-06-30 11:18:19 · 30706 阅读 · 10 评论 -
跟我一起学extjs5(05--主界面上加入顶部和底部区域)
跟我一起学extjs5(05--主界面上加入顶部和底部区域)这一节为主界面加一个顶部区域和底部区域。一个管理系统的界面可以粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。在增加这二个区域之前,我们先在MainModel.js中加入一些数据。Ext.define('app.view.main.MainModel', { extend : 'Ext.ap原创 2014-06-30 11:54:29 · 23079 阅读 · 40 评论 -
跟我一起学extjs5(19--模块记录的拖放删除、拖放复制新增)
跟我一起学extjs5(19--模块记录的拖放删除、拖放复制新增) 网页当中的拖放(drag-drop)是比较有趣的操作,extjs5中很好的封装了拖放的动作,也有各种类来支持,但是要学好“拖放”这个东西真是很难,特别是象我这样英语不好的人,看不太懂官网上的说明,做一个拖放的操作起码得几天的时间。 下面完成拖放删除的功能。即,选中一条记录或多条记录,然后拖动到“原创 2014-07-16 10:40:31 · 9466 阅读 · 7 评论 -
跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)
跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)原创 2014-07-14 15:58:58 · 9558 阅读 · 14 评论 -
跟我一起学extjs5(09--自定义菜单2)
跟我一起学extjs5(09--自定义菜单2) 这一节来定原创 2014-07-02 14:03:30 · 18204 阅读 · 44 评论 -
跟我一起学extjs5(21--模块Grid的多列表方案)
跟我一起学extjs5(21--模块Grid的多列表方案) 对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案。在这个自定义系统进行设计的时候,我已经将这部分内容设计了进去,在ModuleModel.js中,在data下面有个属性tf_gridSchemes为数组型,你有多少原创 2014-07-21 08:51:10 · 10450 阅读 · 25 评论 -
跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码)
跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码) 经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作。由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中。 比如对于“Grid列宽的自动适应”这个功能,我们可以在系统设置项里加入“列宽自适应模原创 2014-07-16 15:23:31 · 8754 阅读 · 30 评论 -
跟我一起学extjs5(15--模块字段和Grid列的定义[2])
跟我一起学extjs5(15--模块字段和Grid列的定义[2]) model和columns生成好了,下面要修改一下Module.js和Grid.js中的代码,使其能够协同工作。/** * 一个模块的主控界面的容器,用来安放各个模块控件以及协调他们之间的关系 */Ext.define('app.view.module.Module', { extend原创 2014-07-11 14:54:12 · 11025 阅读 · 28 评论 -
跟我一起学extjs5(12--模块界面的总体设计)
跟我一起学extjs5(12--模块界面的总体设计) 上一节中设计了一些模块自定义中用到的要素,为了直观起见,这一节先建立一个模块的主界面。看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了。一个模块的主界面是一个Grid,在其上方有个操作按钮的工具条,在左边有导航区域,在右边有一个记录明细的显示区域。下面即是一个例子:原创 2014-07-10 09:44:31 · 18274 阅读 · 33 评论 -
跟我一起学extjs5(24--模块Form的自定义的设计[2])
跟我一起学extjs5(24--模块Form的自定义的设计[2]) 在本节中将要加入各种类型的字段,在加入字段的时候由于可以一行加入多个字段,因此层次结构又多了一层fieldcontainer。form里面的主要层次结构如下: form -- fieldSet -- fieldcontainer -- field。 现在加入fieldcontainer的生成器的原创 2014-07-29 10:38:32 · 6849 阅读 · 13 评论 -
跟我一起学extjs5(23--模块Form的自定义的设计[1])
跟我一起学extjs5(23--模块Form的自定义的设计[1]) 下面开始设计和完成一个简单的Form的自定义过程。先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formSchemes,在这个属性下面可以定义多个formScheme,下面的例子中只加入了一个,在formScheme上,加了二个f原创 2014-07-28 11:38:18 · 8888 阅读 · 3 评论 -
跟我一起学extjs5(22--模块Form的自定义的设计)
跟我一起学extjs5(22--模块Form的自定义的设计) 前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些。先来设计一下要完成的总体目标。 1、可以有多个Form方案,对应于显示、新增、修改、审核、审批等功能; 2、对于上述各种功能可以选择不同的Form方案,比如说修改可以有几个方案原创 2014-07-28 09:08:54 · 7288 阅读 · 2 评论 -
跟我一起学extjs5(06--使用图标字体来美化按钮)
跟我一起学extjs5(06--使用图标字体来美化按钮) sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了。Font Awesome的网站为:点击打开链接。进入网站后,先下载Font A原创 2014-07-01 08:15:50 · 36657 阅读 · 31 评论 -
跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块)
跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块) 上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中。在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var it原创 2014-07-10 16:35:04 · 13680 阅读 · 25 评论