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界面完成。