ExtJs博客前奏

由于这段时间事情比较杂乱，博客就主要以项目中例子来说明编写。

ExtJs4中的Grid非常强大，有展示，选中，搜索，排序，编辑，拖拽等基本功能，这篇博客我就这几个功能做写累述。

1.ExtJs4之Grid详细

2.ExtJs4之TreePanel

Grid的展示选中排序选中事件。

附图：

代码：

  1. <script type="text/javascript">
  2.         Ext.onReady(function () {
  3.             var store = Ext.create('Ext.data.Store', {
  4.                 fields: ["cataId", "cataNo", "cataRemark", "cataTitle", "cataObjectName", "cataeditstatusName",
  5.                      "cataPublishName", "cataEndDate", "holyUpdateTime", "catapushtime"],
  6.                 pageSize: 20,  //页容量5条数据
  7.                 //是否在服务端排序 （true的话，在客户端就不能排序）
  8.                 remoteSort: false,
  9.                 remoteFilter: true,
  10.                 proxy: {
  11.                     type: 'ajax',
  12.                     url: '/Tools/106.ashx?method=getAllCatalog',
  13.                     reader: {   //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]
  14.                         type: 'json', //返回数据类型为json格式
  15.                         root: 'rows',  //数据
  16.                         totalProperty: 'total' //数据总条数
  17.                     }
  18.                 },
  19.                 sorters: [{
  20.                     //排序字段。
  21.                     property: 'ordeId',
  22.                     //排序类型，默认为 ASC
  23.                     direction: 'desc'
  24.                 }],
  25.                 autoLoad: true  //即时加载数据
  26.             });
  27.  
  28.             var grid = Ext.create('Ext.grid.Panel', {
  29.             renderTo: Ext.getBody(),
  30.             store: store,
  31.             height: 400,
  32.             width:800,
  33.             selModel: { selType: 'checkboxmodel' },   //选择框
  34.             columns: [
  35.                           { text: '型录ID', dataIndex: 'cataId', align: 'left', maxWidth: 80 },
  36.                           { text: '型录编号', dataIndex: 'cataNo',  maxWidth: 120 },
  37.                           { text: '助记标题', dataIndex: 'cataTitle', align: 'left', minWidth: 80 },
  38.                           { text: '应用对象', dataIndex: 'cataObjectName', maxWidth: 80, align: 'left' },
  39.                           { text: '发布状态', dataIndex: 'cataPublishName', maxWidth: 80 },
  40.                           { text: '活动截止日期', dataIndex: 'cataEndDate',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s' },
  41.                           { text: '更新时间', dataIndex: 'holyUpdateTime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'},
  42.                           { text: '发布时间', dataIndex: 'catapushtime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'}
  43.                        ],
  44.             bbar: [{
  45.                 xtype: 'pagingtoolbar',
  46.                 store: store,
  47.                 displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
  48.                 emptyMsg: "没有数据",
  49.                 beforePageText: "当前页",
  50.                 afterPageText: "共{0}页",
  51.                 displayInfo: true
  52.             }],
  53.              listeners: { 'itemclick': function (view, record, item, index, e) {
  54.                Ext.MessageBox.alert("标题",record.data.cataId);
  55.             }
  56.             },
  57.              tbar:[
  58.              {text:'新增',iconCls:'a_add',handler:showAlert},"-",
  59.              {text:'编辑',iconCls:'a_edit2',handler:showAlert},"-",
  60.              {text:'停用/启用',iconCls:'a_lock'},"-",
  61.              {text:'发布',iconCls:'a_upload',handler:showAlert},"-",
  62.              {text:'组织型录',iconCls:'a_edit',handler:showAlert},"-",
  63.              {text:'管理商品',iconCls:'a_edit',handler:showAlert},"-",
  64.              "->",{ iconCls:"a_search",text:"搜索",handler:showAlert}],
  65.         });
  1. function showAlert (){
          var selectedData=grid.getSelectionModel().getSelection()[0].data;
  2.  
  3.       Ext.MessageBox.alert("标题",selectedData.cataId);
     }
  1. }); 
  1. </script>

注释：

一、gridPanel几个必须配置的项：store（数据格式组织、存储），columns(展示到页面的格式，数据组织)。

1、store里面有个fields配置，为需要的数据字段，跟读取到的数据（本地，或远程获取的）字段对应。

2、columns中的text为grid展示的列标题，dataIndex绑定字段与store中fields配置字段的对应。

二、数据获取

  1.  proxy: {
  2.                     type: 'ajax',
  3.                     url: '/Tools/106.ashx?method=getAllCatalog',
  4.                     reader: {   //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]
  5.                         type: 'json', //返回数据类型为json格式
  6.                         root: 'rows',  //数据
  7.                         totalProperty: 'total' //数据总条数
  8.                     }
  9.                 },
  10.                 sorters: [{
  11.                     //排序字段。
  12.                     property: 'ordeId',
  13.                     //排序类型，默认为 ASC
  14.                     direction: 'desc'
  15.                 }],

1、传递的参数为：method=getAllCatalog&page=1&start=0&limit=20&sort=[{"property":"ordeId","direction":"desc"}]

2、传回数据为：{"rows":[{"rowNum":"1","cataId":"852","cataNo":"10000809","cataTitle":"","cataObject":"4","cataObjectName":"华悦购物","cataType":"1","cataTypeName":"默认","cataeditstatus":"2","cataeditstatusName":"待提交","cataPublishStatus":"2","cataPublishName":"已发布","cataRemark":"banner广告","cataObjectType":"2","apptypename":"销售","cataEndDate":"2014-09-27","holyCreateTime":"2013-11-24 16:02:04","holyUpdateTime":"","catapushtime":"","holyCreateUser":"lhcs"}]}

三、分页（不带搜索条件）：         

  1. bbar: [{
  2.                 xtype: 'pagingtoolbar',
  3.                 store: store,
  4.                 displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
  5.                 emptyMsg: "没有数据",
  6.                 beforePageText: "当前页",
  7.                 afterPageText: "共{0}页",
  8.                 displayInfo: true
  9.             }]

1、store为grid的store

2、store中的remoteSort配置为true。

3、传递参数为：你点的列标题绑定字段+desc/asc,组织格式为：method=getAllCatalog&page=1&start=0&limit=20&sort:[{"property":"cataNo","direction":"DESC"}]

四、选中行

1、选中行点击事件

  1.   listeners: { 'itemclick': function (view, record, item, index, e) {
  2.                Ext.MessageBox.alert("标题",record.data.cataId);
  3.             }

2、外部操作选中行

  1.  function showAlert (){
  2.              var selectedData=grid.getSelectionModel().getSelection()[0].data;
  3.              Ext.MessageBox.alert("标题",selectedData.cataId);
  4.          }

3、外部操作多行选中

  1.   var rows = grid.getView().getSelectionModel().getSelection();
  2.                 var msg = "";
  3.                 for (var i = 0; i < rows.length; i++) {
  4.                     msg = msg + rows[i].get('cataId') + ',';
  5.                 }

五、列数据格式

  1.   1、时间
  1. { text: '发布时间', dataIndex: 'catapushtime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'}

2、金钱

  1. { text: '订单金额', dataIndex: 'oprice',align:'right', xtype:'numbercolumn',format:'0,000.00'},

3、多字段组合

  1.    { text: '毛利率', dataIndex: 'sPrice', minWidth: 20,
  2.                                 renderer: function(v, m, r){
  3.                                 var puprsaleprice = r.get("sPrice") * r.get("puprsalepricetax")/(1+r.get("puprsalepricetax"));
  4.                                 var puprtaxprice = r.get("cPrice") * r.get("puprtax")/(1+r.get("puprtax"));
  5.                                 //var maoprice = (r.get("sprice") - r.get("cprice") - (puprsaleprice-puprtaxprice)- r.get("puprinvoiceprice") - r.get("pfreight") - r.get("sprice") * r.get("fpoint"))/r.get("sprice");
  6.                                 var maoprice = (r.get("sPrice") - r.get("cPrice") - (puprsaleprice-puprtaxprice)- r.get("puprinvoiceprice") - r.get("pfreight") - r.get("sPrice") * r.get("fpoint"))/(r.get("sPrice") / (1+r.get("puprsalepricetax")));
  7.                                 return (maoprice * 100).toFixed(2) + '%';
  8.                             }},

 六、Grid数据刷新

  1.   1、不传参刷新当前数据
  1. store.load();

2、传参刷新数据

  1. store.load({ params: { Id: 123} });

Grid编辑

附图：

代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5.     <title></title>
  6.      <link href="/ExtUI/ExtJs4.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
  7.     <link href="/ExtUI/mecss/UIicon.css" rel="stylesheet" type="text/css" />
  8.     <script src="/ExtUI/ExtJs4.2.1/ext-all.js" type="text/javascript"></script>
  9.  
  10.     <script type="text/javascript">
  11.         Ext.onReady(function () {        
  12.  
  13.             var RowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行编辑模式
  14.                         clicksToMoveEditor : 2,   //双击编辑  整行修改
  15.                         autoCancel : false,
  16.                         saveBtnText:'确定',
  17.                         cancelBtnText:'取消',
  18.                         errorsText:'错误',
  19.                         dirtyText:'你要确认或取消更改'
  20.  
  21.             });
  22.             var catalogEditProductStore = Ext.create('Ext.data.Store', {
  23.                 fields: ["prcaId","prodId","prcaImg","prodNo","prcaOrderBy", "prodNameZh", "prcaTitle", "prcaPrice", "prcaSalesPrice", "prcaDeductPoint", "prcaSalePoint",
  24.                         "prcaStorage","prcaIndateStart","prcaIndateEnd","prcaFreight","prcaRedirectUrl","prcaProdTotal","prcaIntegral"],
  25.                 pageSize: 10,  //页容量5条数据
  26.                 //是否在服务端排序 （true的话，在客户端就不能排序）
  27.                 remoteSort: false,
  28.                 remoteFilter: true,
  29.                 proxy: {
  30.                     type: 'ajax',
  31.                     url: '/Tools/106EditProduct.ashx?method=getCatalogProductByID&id=1797&cataId=888',
  32.                     reader: {
  33.                         type: 'json', //返回数据类型为json格式
  34.                         root: 'rows',  //数据（json格式）
  35.                         totalProperty: 'total' //数据总条数
  36.                     }
  37.                 },
  38.                 sorters: [{
  39.                     //排序字段。
  40.                     property: 'prodNo',
  41.                     //排序类型，默认为 ASC
  42.                     direction: 'desc'
  43.                 }],
  44.                 autoLoad: true  //即时加载数据
  45.             });
  46.  
  47.             //该型录下的选中编辑的商品
  48.             var catalogEditProduct = Ext.create("Ext.grid.Panel", {      
  49.  
  50.                 store: catalogEditProductStore,
  51.  
  52.                 multiSelect: true, //支持多选
  53.                 height:400,
  54.                 width:800,
  55.                 selModel: { selType: 'checkboxmodel' },
  56.                 columns: [
  57.                             { text: '型录商品ID', dataIndex: 'prcaId', align: 'left', width: 50 },
  58.                             { text: '商品ID', dataIndex: 'prodId', align: 'left', width: 50 },
  59.                             { text: '商品编号', dataIndex: 'prodNo', align: 'left', width: 80 },
  60.                             {
  61.                                 header: "名称",
  62.                                 width: 200,
  63.                                 dataIndex: 'prodNameZh',
  64.                                 align: 'left',
  65.                                 renderer: function (value, metaData, record) {//自定义列值组合
  66.                                     var path = record.get("prcaImg");
  67.                                     var txt = value;
  68.                                     if (path != "" && path != null) {
  69.                                         txt = '<span style="color:blue;display:table;width:100%;" qtip=\'<img width="280" src="upload/'
  70.                                                  + path.charAt(0) + "/" + path + '">\'>' + txt + '</span>';
  71.                                     }
  72.                                     return txt;
  73.                                 },
  74.                                 sortable: true
  75.                             },
  76.                             { text: '排序', dataIndex: 'prcaOrderBy', minWidth: 20,editor: { xtype: 'numberfield' } },
  77.                             { text: '商品标题', dataIndex: 'prcaTitle',align: 'left', minWidth: 300,editor: { xtype: 'textfield' } },
  78.                             { text: '市场价', dataIndex: 'prcaPrice', minWidth: 20,editor: { xtype: 'numberfield' } },
  79.                             { text: '售价', dataIndex: 'prcaSalesPrice', minWidth: 40,editor: { xtype: 'numberfield' } },
  80.                             { text: '可获金币', dataIndex: 'prcaDeductPoint', minWidth: 30,editor: { xtype: 'numberfield' } },
  81.                             { text: '购买使用金币', dataIndex: 'prcaSalePoint', minWidth: 20,editor: { xtype: 'numberfield' } },
  82.                             { text: '库存', dataIndex: 'prcaStorage', minWidth: 40,editor: { xtype: 'numberfield' } },
  83.                             { text: '起始日期', dataIndex: 'prcaIndateStart', minWidth: 40,editor: { xtype: 'datefield'} },
  84.                             { text: '结束日期', dataIndex: 'prcaIndateEnd', minWidth: 40,editor: { xtype: 'datefield'} },
  85.                             { text: '含运费', dataIndex: 'prcaFreight', minWidth: 40,editor: { xtype: 'numberfield' } },
  86.                             { text: '跳转地址', dataIndex: 'prcaRedirectUrl', minWidth: 40,editor: { xtype: 'textfield' } },
  87.                             { text: '总件数(团购专用)', dataIndex: 'prcaProdTotal', minWidth: 40,editor: { xtype: 'numberfield' } },
  88.                             { text: '已订购人数(团购专用)', dataIndex: 'prcaIntegral', minWidth: 40,editor: { xtype: 'numberfield' } },
  89.                 ],
  90.                 bbar: [{
  91.                     xtype: 'pagingtoolbar',
  92.                     store: catalogEditProductStore,
  93.                     displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
  94.                     emptyMsg: "没有数据",
  95.                     beforePageText: "当前页",
  96.                     afterPageText: "共{0}页",
  97.                     displayInfo: true
  98. //                    listeners: {
  99. //                        beforechange: function (ts, page, eOpts) {//分页 加载查询数据
  100. //                              Ext.apply(catalogEditProductStore.proxy.extraParams,CatalogTtree.getSelectionModel().getSelection()[0].data);
  101. //                        }
  102. //                    }
  103.                 }],
  104.                 tbar: [
  105.                   { text: '保存', iconCls: 'a_edit2' ,handler:showSelectedOptions}, "-",
  106.                   { text: '删除', iconCls: 'a_delete',handler:showSelectedOptions }, "-",
  107.                   { text: '上传主图', iconCls: 'a_upload',handler:showSelectedOptions }, "-",
  108.                   { text: '刷新', iconCls: 'a_refresh',handler:showSelectedOptions }, "-",
  109.                   {text:'添加提报商品',iconCls:'a_add',handler:showSelectedOptions},"-"],
  110.                 plugins : [RowEditing],                          //绑定编辑对象 
  111.  
  112.             });
  113.  
  114.             catalogEditProduct.getView().on("render",function(view){
  115.                 view.tip=Ext.create('Ext.tip.ToolTip',{
  116.                     target:view.el,
  117.                     delegate:view.itemSelector,
  118.                     trackMouse:true,
  119.                     renderTo:Ext.getBody(),
  120.                     listeners:{
  121.                        beforeshow:function(tip){
  122.                            var record=view.getRecord(tip.triggerElement);
  123.                            var ucc=record.get("prcaImg").substring(0,1);
  124.                            var html="<div ><img width='300px'  src='/upload/"+ucc+"/"+record.get("prcaImg")+"'></div>";
  125.                            tip.update(html);
  126.                        }
  127.                     }  
  128.  
  129.                 });
  130.             });  
  131.  
  132.              var centerPanel = Ext.create("Ext.panel.Panel", {
  133.                 region: 'center',
  134.                 defaults: {
  135.                     autoScroll: true,
  136.                   //  autoHeight: true
  137.                 },
  138.                 items: [catalogEditProduct]
  139.             });
  140.  
  141.             new Ext.Viewport({
  142.                 layout: "border",
  143.                 rederTo: Ext.getBody(),
  144.                 defaults: {
  145.                     frame: true
  146.                 },
  147.                 items: [centerPanel]
  148.             });
  149.  
  150.             function showSelectedOptions() {
  151.                 var rows = catalogEditProduct.getView().getSelectionModel().getSelection();
  152.                 var msg = "";
  153.                 for (var i = 0; i < rows.length; i++) {
  154.                     msg = msg + rows[i].get('prcaId') + ',';
  155.                 }
  156.                 Ext.MessageBox.alert("标题", msg);
  157.             }
  158.         });
  159.  
  160.     </script>
  161. </head>
  162. <body>
  163. </body>
  164. </html>

注释：

1、标记变色

  1. {
  2.                                 header: "名称",
  3.                                 width: 200,
  4.                                 dataIndex: 'prodNameZh',
  5.                                 align: 'left',
  6.                                 renderer: function (value, metaData, record) {//自定义列值组合
  7.                                     var path = record.get("prcaImg");
  8.                                     var txt = value;
  9.                                     if (path != "" && path != null) {
  10.                                         txt = '<span style="color:blue;display:table;width:100%;" qtip=\'<img width="280" src="upload/'
  11.                                                  + path.charAt(0) + "/" + path + '">\'>' + txt + '</span>';
  12.                                     }
  13.                                     return txt;
  14.                                 },
  15.                                 sortable: true
  16.                             },

附图：

2、Grid行tip提示

  1.    catalogEditProduct.getView().on("render",function(view){
  2.                 view.tip=Ext.create('Ext.tip.ToolTip',{
  3.                     target:view.el,
  4.                     delegate:view.itemSelector,
  5.                     trackMouse:true,
  6.                     renderTo:Ext.getBody(),
  7.                     listeners:{
  8.                        beforeshow:function(tip){
  9.                            var record=view.getRecord(tip.triggerElement);
  10.                            var ucc=record.get("prcaImg").substring(0,1);
  11.                            var html="<div ><img width='300px'  src='/upload/"+ucc+"/"+record.get("prcaImg")+"'></div>";
  12.                            tip.update(html);
  13.                        }
  14.                     }  
  15.  
  16.                 });
  17.             });

附图：

3、Grid行编辑

  1.  var RowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行编辑模式
  2.                         clicksToMoveEditor : 2,   //双击编辑  整行修改
  3.                         autoCancel : false,
  4.                         saveBtnText:'确定',
  5.                         cancelBtnText:'取消',
  6.                         errorsText:'错误',
  7.                         dirtyText:'你要确认或取消更改'
  8.  
  9.             });

首先上面那段代码加上，然后columns里面配置editor（详见上面代码），最后在 Grid中配置plugins : [RowEditing]。。

grid就先整理这么多，下一篇预告为：TreePanel。。I hope it'll help you , Thanks for reading..

 

ExtJs4之Grid详细的更多相关文章

  1. EXTJS4:在grid中加入合计行

    extjs4很方便的实现简单的合计(针对在不分页的情况下): 它效果实现在:Ext.grid.feature.Summary这个类中 Ext.define('TestResult', { extend ...

  2. ExtJS4.x Grid 单元格鼠标悬停提示

    //每一个列都会出现鼠标悬浮上去显示内容 /** * //适用于Extjs4.x * @class Ext.grid.GridView * @override Ext.grid.GridView * ...

  3. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  4. Extjs4.2 Grid搜索Ext.ux.grid.feature.Searching的使用

    背景 Extjs4.2 默认提供的Search搜索,功能还是非常强大的,只是对于国内的用户来说,还是不习惯在每列里面单击好几下再筛选,于是相当当初2.2里面的搜索,更加的实用点,于是在4.2里面实现. ...

  5. 关于ExtJs4的Grid带 查询 参数 分页（baseParams-->extraParams）

    (园里很多文章,美名其曰 :ExtJs GridPanel+查询条件+分页.  但是加查询条件后点击下一页,查询条件失效,求你们自己测试明白再显摆 不要误导我这种新人.) ExtJs6发布了,ExtJ ...

  6. EXTJS4.0 grid 可编辑模式 配置

    首先配置这个参数 plugins:[//插件 Ext.create("Ext.grid.plugin.CellEditing",{ clicksToEdit:1//单元格 点一下就 ...

  7. ExtJs4之TreePanel

    Tree介绍 树形结构,是程序开发,不可缺少的组件之一.ExtJs中的树,功能强大美观实用.功能齐全,拖拉,排序,异步加载等等. 在ExtJs4中Tree和Grid具有相同的父类,因此Grid具有的特 ...

  8. Extjs4中的常用组件：Grid、Tree和Form

    至此我们已经学习了Data包和布局等API.下面我们来学习作为Extjs框架中我们用得最多的用来展现数据的Grid.Tree和Form吧! 目录: 5.1. Grid panel 5.1.1. Col ...

  9. 快速使用CSS Grid布局，实现响应式设计

    常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...

随机推荐

  1. [RT][NOIP2015]联合权值

    1.题面 2.总结 第一次回忆一下当年的题目.但是这道题已经做烂了,只是看还记得树遍历会写么. 然后我写了一下,有点费劲,交上去之后只有70,比较尴尬,看了下去年5月写的代码,发现完全不是一个感觉啊. ...

  2. compass reset和layout [Sass和compass学习笔记]

    reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset ...

  3. git flow工作流实际项目实践

    公司项目的开发流程主要是这样 代码分为 develop分支 master分支 平时我开发的时候,主要在develop分支上改动 一般来讲,有以下几种改动方式 1.直接在develop上修改代码 这种一 ...

  4. React-Native -课后练习

    import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, } fro ...

  5. android copy项目后修改项目名

    有个eclipse下的Android项目,现在因为有个需求想在复制出来一个项目,把这个项目变成两个独立项目.在同一个工作空间下不能同时存在项目名称一样的项目,所以需要修改项目名.具体操作如下: 1.修 ...

  6. Qgis连接Oracle

    CMake编译中选择编译Oracle一项以后,编译的qgis才会有连接Oracle数据库的功能. 编译qgis以后,可以通过添加矢量图层中选择Oracle数据库,或是添加Oracle空间图层,或是添加 ...

  7. 9_bootstrap less 移动端

    chrome,firefox提供了"Device Emulation"功能,可模拟常见的各种浏览设备 android ADT或ios Xcode附带的设备模拟器,或第三方在线测试工 ...

  8. Python之路【第七篇】python基础 之socket网络编程

    本篇文章大部分借鉴 http://www.cnblogs.com/nulige/p/6235531.html python socket  网络编程 一.服务端和客户端 BS架构 (腾讯通软件:ser ...

  9. txt文本变成html

    file_name = 'x.txt' f = open(file_name,'r') file_result = 'x.html' str_head = " LINE CI UTIL&qu ...

  10. SSHE框架整合（增删改查）

    1.前期准备:jar包(c3p0.jdbc ,各个框架) web.xml文件:spring的   转码的,和Struts2的过滤器 <?xml version="1.0" e ...