本章我们利用原型完成一张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.jsmodal，对应服务端的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界面完成。
