在实际项目中，可能存在需要结合Ext2.0使用EOS的需求，因此本文中描述了如何在EOS中集成Ext2.0实现业务需求的步骤和开发过程。 1、适用环境
Windows XP
EOS 5.3
Oracle 9i
Ext 2.0
2 安装Ext2.0
1、 下载Ext2.0
访问www.extjs.com下载最新的Ext2.0包。
2、 在EOS5项目中安装Ext2.0
a) 新建EOS项目
b) 新建构件包ext20_eos
c) 将Ext2.0安装包中的文件或者目录拷贝到构件包的page节点下，这些文件包括
ext-all.js
ext-all-debug.js
ext-core.js
ext-core-debug.js
adapter[目录]
resources[目录]
3 开发步骤
我们将描述实现一个修改EOSOperator的功能，该功能实现通过id获取EOSOperator实体显示在HTML表单上，用户可以修改表单中的内容，然后将这些修改后的值更新到数据库中。
1、 开发、调试业务逻辑
开发两个业务逻辑：
Ø ext20_eos.biz.userExpand： 通过EOSOperator主键获取EOSOperator实体的业务逻辑
Ø ext20_eos.biz.userUpdate： 将EOSOperator保存到数据库中
2、 开发JSP页面
编写一个userUpdateExt.jsp页面，页面上主要是引用那些必要的js，包括：
Ø <script type="text/javascript" src="/ext20_eos/page/ext-2.0/adapter/ext/ext-base.js"></script>
Ø <script type="text/javascript" src="/ext20_eos/page/ext-2.0/ext-all.js"></script>
<!—引入访问EOS业务逻辑的js à
Ø <SCRIPT language="jscript" src="/fbtools/page/hiddensubmit.js" type="text/javascript"></SCRIPT>
<!—引入显示界面的Ext js部分，将在第三部中实现 à
Ø <script type="text/javascript" src="/ext20_eos/page/userUpdate.js"></script>
3、 编写Ext2.0代码----userUpdate.js
1. Ext.onReady(function(){
2.
3. Ext.QuickTips.init();
4.
5. var bd = Ext.getBody();
6.
7. var top = new Ext.FormPanel({
8.
9. labelAlign: "top",
10. frame:true,
11. title: "修改用户信息",
12. bodyStyle:"padding:5px 5px 0",
13. width: 600,
14. // 用Ext2.0的语法画界面
15. items: [{
16. layout:"column",
17. items:[{
18. columnWidth:.5,
19. layout: "form",
20. items: [{
21. xtype:"textfield",
22. fieldLabel: "操作者编号",
23. name: "OPERATORID",
24. id: "OPERATORID",
25. value: "1"
26. }, {
27. xtype:"textfield",
28. fieldLabel: "登录用户名",
29. name: "USERID",
30. id: "USERID"
31. }]
32. },{
33. columnWidth:.5,
34. layout: "form",
35. items: [{
36. xtype:"textfield",
37. fieldLabel: "密码",
38. name: "PASSWORD",
39. id: "PASSWORD"
40. },{
41. xtype:"textfield",
42. fieldLabel: "操作者姓名",
43. name: "OPERATORNAME",
44. id: "OPERATORNAME"
45. }]
46. }]
47. }],
48.
49. buttons: [{
50. text: "初始化",
51. handler: function(){
52. // 通过HiddenSubmit和EOS Server通讯，获取服务器边的数据
53. alert("start...初始化，开始向服务器上发送数据");
54. var sub = new HiddenSubmit("ext20_eos.biz.userExpand");
55. var opid = Ext.getCmp("OPERATORID").getValue();
56. var xml = "<EOSOperator><operatorID>"+opid+"</operatorID></EOSOperator>";
57.
58. alert(xml);
59.
60. if (sub.submitXML(xml)){
61. alert("end...向服务器发送数据结束");
62.
63. alert(sub.getProperty("EOSOperator/userID"));
64.
65. Ext.getCmp("USERID").setValue(sub.getProperty("EOSOperator/userID"));
66. Ext.getCmp("PASSWORD").setValue(sub.getProperty("EOSOperator/password"));
67. Ext.getCmp("OPERATORNAME").setValue(sub.getProperty("EOSOperator/operatorName"));
68. }else
69. alert("error...数据发送失败");
70.
71. }
72. },{
73. text: "保存",
74. handler: function(){
75. // 通过HiddenSubmit和EOS Server通讯，向服务器发送数据
76. alert("start...开始向服务器上发送数据");
77.
78. var sub1 = new HiddenSubmit("ext20_eos.biz.userUpdate");
79. var opid = Ext.getCmp("OPERATORID").getValue();
80. var oppassword = Ext.getCmp("PASSWORD").getValue();
81.
82. alert("oppassword : " + oppassword);
83.
84. var opname = Ext.getCmp("OPERATORNAME").getValue();
85. var opuserid = Ext.getCmp("USERID").getValue();
86.
87. sub1.add("EOSOperator/operatorID",opid);
88. sub1.add("EOSOperator/userID",opuserid);
89. sub1.add("EOSOperator/password",oppassword);
90. sub1.add("EOSOperator/operatorName",opname);
91. sub1.submit();
92. alert("end...向服务器发送数据结束");
93.
94. alert("start...开始清空页面数据");
95. Ext.getCmp("USERID").setValue("");
96. Ext.getCmp("PASSWORD").setValue("");
97. Ext.getCmp("OPERATORNAME").setValue("");
98. alert("end...清空页面数据结束");
99.
100. }
101. }]
102. });
103.
104. top.render(document.body);
105.
}); | 
