Extjs4 store load 有中文字符提交后台乱码解决方法

最看到Exjs4很多改进的相关信息，产生用用看的想法。所以就着手4.x方面的学习。在学习的过程当中发现4.x 相对以前版本存在很多的差别。baidu或谷歌一下有一大堆讲解。 参考一些资料后着手4.x的学习与开发。本人是参照官方MVC例子着手学习的。开发一个基于java后台的增、删、改、查的例子。在做增加、更改、查询时都没有出现乱码情况。以下是增加与更改的ext代码:

Js代码  

1. Ext.define('W.gzgl.views.common.MenuAddPanel',{  
2.     extend      : 'Ext.window.Window',  
3.     layout      : 'fit',  
4.     resizable   : true,  
5.     width       : 400,  
6.     height      : 300,  
7.     title       : '菜单增加',  
8.     closeAction : 'close',  
9.     initComponent : function(){  
10.         this.items = this.buildItems(this);  
11.         this.callParent();  
12.     },  
13.     buildItems  : function(form){  
14.               
15.         return Ext.create('Ext.form.Panel', {  
16.             bodyPadding     : 5,  
17.             border          : false,  
18.             waitMsgTarget   : true,  
19.             fieldDefaults   : {  
20.                 labelAlign  : 'right',  
21.                 labelWidth  : 85,  
22.                 msgTarget   : 'side'  
23.             },  
24.             bodyStyle       : "border-bottom: 1px solid #8db2e3;",  
25.             items: [{  
26.                 xtype       : 'fieldset',  
27.                 title       : '菜单增加',  
28.                 defaultType : 'textfield',  
29.                 defaults    : {  
30.                     width: 280  
31.                 },  
32.                 items       : [{  
33.                         fieldLabel  : '菜单序号',  
34.                         emptyText   : '请输入...',  
35.                         allowBlank  : false,  
36.                         name        : 'id'  
37.                     },{  
38.                         fieldLabel  : '菜单名',  
39.                         emptyText   : '请输入...',  
40.                         allowBlank  : false,  
41.                         name        : 'name'  
42.                     }, {  
43.                         fieldLabel  : '加载组件名',  
44.                         emptyText   : '请输入...',  
45.                         name        : 'componetName'  
46.                     }, {  
47.                         fieldLabel  : '样式',  
48.                         name        : 'iconCls'  
49.                     }, /*{ 
50.                         fieldLabel  : '父菜单', 
51.                         name        : 'parentId' 
52.                          
53.                     }*/  
54.                     Ext.create('W.gzgl.componet.common.select.MenuSelect',{  
55.                         fieldLabel  : '父菜单',  
56.                         name        : 'parentId'  
57.                     })  
58.                     ,{  
59.                         xtype       : 'radiogroup',  
60.                         fieldLabel  : '是否叶子',  
61.                         defaults    : {  
62.                             name    : 'leaf'  
63.                         },  
64.                         items       : [{  
65.                             //checked       : true,  
66.                             inputValue  : 'true',  
67.                             boxLabel    : '是'  
68.                         }, {  
69.                             inputValue  : 'false',  
70.                             boxLabel    : '否'  
71.                         }]  
72.                     },{  
73.                         xtype       : 'radiogroup',  
74.                         fieldLabel  : '是否启用',  
75.                         defaults    : {  
76.                             name: 'visible'  
77.                         },  
78.                         items       : [{  
79.                             //checked       : true,  
80.                             inputValue  : 'true',  
81.                             boxLabel    : '启用'  
82.                         }, {  
83.                             inputValue  : 'false',  
84.                             boxLabel    : '不启用'  
85.                         }]  
86.                     }  
87.                 ]  
88.             }],  
89.       
90.             buttons: [{  
91.                 text    : '重 置',  
92.                 handler : function(){  
93.                    /* formPanel.getForm().load({ 
94.                         url     : 'xml-form-data.xml', 
95.                         waitMsg : 'Loading...' 
96.                     });*/  
97.                     this.up('form').getForm().reset();  
98.                 }  
99.             }, {  
100.                 text        : '保 存',  
101.                 disabled    : true,  
102.                 formBind    : true,  
103.                 iconCls     : 'icon-delete',  
104.                 handler     : function(){  
105.                     var actionUrl = form.actionType === 'create' ? 'manager/menuCreate.hs' : 'manager/menuUpdate.hs';  
106.                     this.up('form').getForm().submit({  
107.                         method          : 'post',  
108.                         url             : actionUrl,  
109.                         submitEmptyText : false,  
110.                         waitMsg         : '数据保存中...',  
111.                         success         : function(response){  
112.                             Ext.getCmp(form.gridName).getStore().load();  
113.                             form.close();  
114.                         },  
115.                         failure         : function(){  
116.                               
117.                         }  
118.                     });  
119.                 }  
120.             }]  
121.         });  
122.     }  
123. });  

  以下是数据源的定义:

Js代码  

1. Ext.define('W.gzgl.stores.common.MenuStore', {  
2.     extend    : 'Ext.data.Store',  
3.     pageSize  : 20,  
4.     requires  : ['W.gzgl.models.common.MenuModel'],  
5.     model     : 'W.gzgl.models.common.MenuModel',      
6.     autoDestroy: true,  
7.     autoLoad    : true,  
8.     proxy : {  
9.         type    : 'ajax',  
10.         url     : 'manager/menuList.hs',  
11.         reader  : {  
12.             type        : 'json',  
13.             root        : 'rows',  
14.             idProperty  : 'name'  
15.         }  
16.     }  
17. });  

 从代码上分析是没有存在什么问题。工程或环境的编码也都为"utf-8"。

也从网络找了一些解决方法。

一、在load提交时对字符串进行decode处理。

Js代码  

1. {name : encodeURIComponent(value)}  

 

然后在后端进行反编码

 

Java代码  

1. java.net.URLDecoder.decode(name, "utf-8");  

 

根据这一做法确实可以解决这一问题。但是综合比较后个人认认为这不是一个很好的解决方法。这一做法就是每一个参数都需要重复上述步骤。比较烦。在对from提交与store提交对比后发现load提交默认为“get”.参考相应说明后。在数据源定义中更改method为"post".即可解决store带中文提交乱码问题。

更改后的代码：

Js代码  

1. Ext.define('W.gzgl.stores.common.MenuStore', {  
2.     extend    : 'Ext.data.Store',  
3.     pageSize  : 20,  
4.     requires  : ['W.gzgl.models.common.MenuModel'],  
5.     model     : 'W.gzgl.models.common.MenuModel',      
6.     autoDestroy: true,  
7.     autoLoad    : true,  
8.     proxy : {  
9.         type    : 'ajax',  
10.         url     : 'manager/menuList.hs',  
11.         actionMethods: {  
12.             read: 'POST'  
13.         },  
14.         reader  : {  
15.             type        : 'json',  
16.             root        : 'rows',  
17.             idProperty  : 'name'  
18.         }  
19.     }  
20. });