Extjs+SpringMVC原型—新手起步

本章我们利用原型完成一张e_task数据库表的CRUD。基本步骤如下:

设计数据模型并建表

设计表结构、建表

生成实体类

利用JPA Tools可以从数据库表反向生成对应的java实体类。


唤出JPA Tools

第一次使用时,需要建立一个数据库连接:

建立数据库连接
选择数据库表
采用一个基类Identity生成主键值
image.png

点击Finish之后,在net.bat.entity下生成了一个实体类ETask
由于我们采用统一的id基类Identity管理主键,因此删掉多余的生成的id及其setter getter:

image.png

生成默认的js代码

net.bat.entity.ExtJSCoder 是懒人写给懒人的一个工具类,它能够生成默认的界面。将line194行修改为我们刚才反向生成的ETask类。

Class cls = ETask.class;

运行ExtJSCoder的main方法,会输出一堆js代码,其中的注释行是起文件分割的作用,并告诉你应该把内容放到何处:

/*------------app/model/ETask.js--------------*/
Ext.define('DCApp.model.ETask', {
extend: 'DCApp.model.Base',
fields: [
    {name:'id'},
    {name:'description'},
    {name:'title'},
    {name:'userId', type: 'int'} ]
});


/*-------------app/view/etask/List.js-------------*/
Ext.define('DCApp.view.etask.List', {
extend: 'DCApp.view.PageList',
alias: 'widget.ETasklist',

viewModel: {
    type: 'etasklist'
},
...

如果你学习个Extjs的mvvm模型,你会比较熟悉这些目录及代码。我们这里简单说明下:

  • /model/ETask.js modal,对应服务端的java实体类;
  • /view/etask/List.js 列表方式的view,因为它是DCApp.view.PageList的子类,所以继承了分页检索、克隆、排序等基础功能;
  • /view/etask/Detail.js 详细页方式的view,因为它是DCApp.view.Detail的子类,也就集成了详细页的tab定位、前后浏览、保存、主子表嵌套等基础功能;
  • /view/etask/ListModel.js 辅助列表页view的model。

手工建立上述文件,并将生成的代码内容放到es/web/app 下。

添加菜单

Navigation.js是用来定义layout西边分区菜单树,


Navigation.js

我们在
{id: 'LOperlist', text: '日志', leaf: true} 后面增加一行,挂上我们的测试菜单:

 {id: 'LOperlist', text: '日志', leaf: true},
 {id: 'EDlrlist', text: '任务', leaf: true}

重启Server,刷新网页登录进入,出现任务菜单,点击它,打开了list view:

任务菜单

但此时点击录入 按钮无响应,我们需要增加事件响应

添加事件响应

/app/controller/Global.js中增加事件响应

            'ETasklist':{
                openobj:'onOpenObj',
                editobj:'onEditObj'
            },
            'ETaskdetail':{
                objnext:'objNext',
                objprev:'objPrev',
                openobj:'onOpenObj',
                editobj:'onEditObj'
            },

再次点击录入,会调用onEditObj,打开详细页编辑条目:

详细页-编辑

录入内容之后,保存, 将会持久化条目,并回到分页list。

保存并回到分页list

尝试其他功能,例如克隆, 删除, 上一条,下一条, 功能均正常,至此,一个单表的默认CRUD界面完成。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,262评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,821评论 25 709
  • 也许你需要的是激情阳光和水 而我们却一起过起了日子 我喝白开 你饮可乐 坐在一起看起了电视 也许你渴望的是日出而升...
    feono阅读 200评论 0 1
  • 读张越的《如何学编程?》 什么是编程? 现代计算机的起点是莱布尼茨的一个梦想,将理性还原为计算,用强大的机器执行这...
    伍帆阅读 666评论 0 0
  • 简信bug 版本 安卓 1.11.5 描述 简信icon右上角的小tip提示我有5条新简信,但是我点进我的简信列...
    小枫学幽默阅读 494评论 0 1