ext与struts2结合

迈不过友情╰ 2022-07-18 01:07 141阅读 0赞

1.  FormPanel本身是没有提交功能的，它仅仅是一个前台UI控件，数据的提交是通过一个叫BasicForm的东西进行提交的。而后者的获得是通过getForm()方法来实现的，或者直接调用FormPanel的form属性也可以。
2.  在BasicForm的submit方法中需要定义一个url属性，在这里url就是我们在struts.xml中配置的action的名字action name。
3.  服务器端返回的数据是json格式，因此在struts.xml中需要为相应的action定义一个type为json的result。这个result不需要配置任何jsp页面。
4.  服务器端的action类中需要定义【boolean类型的success和String类型的msg】两个只读属性，这两个属性会以json数据的形式回调BasicForm的两个方法success或者failure，当然到底调用哪一个要看success属性返回的值。但是无论是哪一个，程序如果需要页面跳转必须调用【window.location = ""；】，因为我们已经不能使用struts来实现页面跳转了。**记住，这两个只读属性名是固定的。**
5.  由客户端提交给action的数据，例如由textfield提交给action的数据，缺省情况下是通过POST方式提交的，从action的角度来看，这些数据是作为request的parameter传递过来的。那么这些parameters的名字是什么呢？就是那些客户端组件的id值。例如在FormPanel上有一个textfield，它的id值是"name"，那么相应的在action中，请求传送过来的参数中就有一个名字叫name的parameter。此外，我们还可以定义同名的的只写属性，那么在客户端提交数据后，属性值将被写入到这些属性中，我们可以在服务器端直接得到表单提交的数据。
6.  如果我们希望将所有数据一次性清空，那么可以调用BasicForm的reset()方法。

所有以上讨论与框架整合均不冲突，我们一样可以使用SSH，或者SSH2。

下面是一些常规的表单UI组件以及后台对应的数据类型：

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word"> 
 <tbody> 
 <tr style="height:5px; background-color:rgb(250,191,143)"> 
 <td colspan="2" style="border:0.5pt solid; border-collapse:collapse; padding:3px 9px; font-size:14px"> UI组件 </td> 
 <td style="border-top-width:0.5pt; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:solid solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 相应的ExtJS属性（主要部分） </td> 
 <td style="border-top-width:0.5pt; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:solid solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 后台Java Bean属性 </td> 
 </tr> 
 <tr style="height:5px"> 
 <td colspan="2" style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:0.5pt; border-style:none solid solid; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> xtype : 'textfield' </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 需要定义name或者id属性 </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 与前台属性值相同的属性名，类型为String </td> 
 </tr> 
 <tr style="height:5px"> 
 <td colspan="2" style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:0.5pt; border-style:none solid solid; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> xtype : 'datefield' </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 需要定义name或者id属性 </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 与前台属性值相同的属性名，类型为Date </td> 
 </tr> 
 <tr style="height:5px"> 
 <td colspan="2" style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:0.5pt; border-style:none solid solid; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> xtype : 'combo' </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 需要定义name或者id属性 </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 与前台属性值相同的属性名，类型为String </td> 
 </tr> 
 <tr style="height:5px"> 
 <td colspan="2" style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:0.5pt; border-style:none solid solid; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> xtype : 'radio' </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 需要定义name属性，同时必须定义inputValue属性，此外同一组的radio需要定义相同的name属性，而且所有radio要定义在同一个radiogroup之中。 </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 与前台属性值相同的属性名，类型为String，获得的属性值必为某个inputValue或者null </td> 
 </tr> 
 <tr style="height:5px"> 
 <td colspan="2" style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:0.5pt; border-style:none solid solid; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> xtype : 'checkbox' </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 需要定义name属性，同时必须定义inputValue属性，此外同一组的checkbox需要定义相同的name属性，而且所有checkbox需要定义在同一个checkboxgroup之中。 </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 与前台属性值相同的属性名，类型为String，获得的属性值必为某个inputValue或者以逗号分割的多个inputValue，或者null </td> 
 </tr> 
 </tbody> 
</table>

对于文件上传来说，需要注意以下几个方面：

1.  在FormPanel中设置一个属性【fileUpload : 'true'】；
2.  在jsp页面中引入FileUploadField.js文件，这个文件的路径是【"$\{pageContext.request.contextPath\}/ux/fileuploadfield/FileUploadField.js"】；

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word"> 
 <tbody> 
 <tr style="height:5px; background-color:rgb(250,191,143)"> 
 <td style="border:0.5pt solid; border-collapse:collapse; padding:3px 9px; font-size:14px"> UI组件 </td> 
 <td style="border-top-width:0.5pt; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:solid solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 相应的ExtJS属性（主要部分） </td> 
 <td style="border-top-width:0.5pt; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:solid solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 后台Java Bean属性 </td> 
 </tr> 
 <tr style="height:5px"> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:0.5pt; border-style:none solid solid; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> xtype : 'fileuploadfield' </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> 需要定义name属性，name : 'xyz' </td> 
 <td style="border-top-width:initial; border-right-width:0.5pt; border-bottom-width:0.5pt; border-left-width:initial; border-style:none solid solid none; border-color:initial; border-collapse:collapse; padding:3px 9px; font-size:14px"> Struts1/2是不同的，这里以struts2为例。根据情况，需要定义三个属性中的某个或某几个。它们分别是： File xyz; ---&nbsp;真正的文件； String xyzFileName; ---&nbsp;文件名字； String xyzContentType; ---&nbsp;文件类型； 多文件上传时，需要将属性定义为List类型； </td> 
 </tr> 
 </tbody> 
</table>

这里需要注意的是：一定要在你的jsp页面中引用fileuploadfield.css，否则的话，你将发现有两个控件，一个是ExtJS的控件，一个是HTML的控件，两者互相覆盖，并且前者并不起作用。同时文件上传一样受struts的文件上传大小的限制。

在使用文件上传组件的过程中，发现一个问题，那就是当数据提交后，浏览器会弹出一个下载json文件的窗口，而不是调用相应的回调函数，网上没有查到原因。只有相应的处理方法。

1.  首先在struts action中将返回值设为null；正常情况下是返回success；
2.  调用response的输出流的write方法，按照后台程序的处理结果将字符串【"\{success : true或者false, msg : '你的信息返回值'\}" 】直接输出到客户端；只有这样才能正常执行；否则的话struts不会按照json格式序列化数据并返回。不知道这是文件上传组件的问题，还是怎么回事。总之一定要这么做才行。