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

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

Ext.define('W.gzgl.views.common.MenuAddPanel',{
	extend 		: 'Ext.window.Window',
	layout		: 'fit',
    resizable	: true,
	width		: 400,
	height  	: 300,
	title		: '菜单增加',
	closeAction : 'close',
	initComponent : function(){
		this.items = this.buildItems(this);
		this.callParent();
	},
	buildItems  : function(form){
			
		return Ext.create('Ext.form.Panel', {
	        bodyPadding		: 5,
	        border 			: false,
	        waitMsgTarget	: true,
	        fieldDefaults	: {
	            labelAlign	: 'right',
	            labelWidth	: 85,
	            msgTarget	: 'side'
	        },
			bodyStyle 		: "border-bottom: 1px solid #8db2e3;",
	        items: [{
	            xtype		: 'fieldset',
	            title		: '菜单增加',
	            defaultType	: 'textfield',
	            defaults	: {
	                width: 280
	            },
	            items		: [{
	                    fieldLabel	: '菜单序号',
	                    emptyText	: '请输入...',
	                    allowBlank	: false,
	                    name		: 'id'
	                },{
	                    fieldLabel	: '菜单名',
	                    emptyText	: '请输入...',
	                    allowBlank	: false,
	                    name		: 'name'
	                }, {
	                    fieldLabel	: '加载组件名',
	                    emptyText	: '请输入...',
	                    name		: 'componetName'
	                }, {
	                    fieldLabel	: '样式',
	                    name		: 'iconCls'
	                }, /*{
	                    fieldLabel	: '父菜单',
	                    name		: 'parentId'
	                    
	                }*/
	                Ext.create('W.gzgl.componet.common.select.MenuSelect',{
	                	fieldLabel	: '父菜单',
	                	name		: 'parentId'
	                })
	                ,{
	                    xtype		: 'radiogroup',
		                fieldLabel	: '是否叶子',
		                defaults	: {
		                    name	: 'leaf'
		                },
		                items		: [{
		                	//checked		: true,
		                    inputValue	: 'true',
		                    boxLabel	: '是'
		                }, {
		                    inputValue	: 'false',
		                    boxLabel	: '否'
		                }]
	                },{
		                xtype		: 'radiogroup',
		                fieldLabel	: '是否启用',
		                defaults	: {
		                    name: 'visible'
		                },
		                items		: [{
		                	//checked		: true,
		                    inputValue	: 'true',
		                    boxLabel	: '启用'
		                }, {
		                    inputValue	: 'false',
		                    boxLabel	: '不启用'
		                }]
		            }
	            ]
	        }],
	
	        buttons: [{
	            text	: '重 置',
	            handler	: function(){
	               /* formPanel.getForm().load({
	                    url		: 'xml-form-data.xml',
	                    waitMsg	: 'Loading...'
	                });*/
	            	this.up('form').getForm().reset();
	            }
	        }, {
	            text		: '保 存',
	            disabled	: true,
	            formBind	: true,
	            iconCls		: 'icon-delete',
	            handler		: function(){
	            	var actionUrl = form.actionType === 'create' ? 'manager/menuCreate.hs' : 'manager/menuUpdate.hs';
	                this.up('form').getForm().submit({
	                	method			: 'post',
	                    url				: actionUrl,
	                    submitEmptyText	: false,
	                    waitMsg			: '数据保存中...',
	                    success 		: function(response){
	                    	Ext.getCmp(form.gridName).getStore().load();
	                    	form.close();
	                    },
	                    failure			: function(){
	                    	
	                    }
	                });
	            }
	        }]
	    });
	}
});

  以下是数据源的定义:

Ext.define('W.gzgl.stores.common.MenuStore', {
    extend    : 'Ext.data.Store',
    pageSize  : 20,
    requires  : ['W.gzgl.models.common.MenuModel'],
    model     : 'W.gzgl.models.common.MenuModel',    
    autoDestroy: true,
    autoLoad 	: true,
    proxy : {
    	type 	: 'ajax',
    	url  	: 'manager/menuList.hs',
    	reader	: {
            type		: 'json',
            root		: 'rows',
            idProperty	: 'name'
        }
    }
});

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

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

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

{name : encodeURIComponent(value)}

 

然后在后端进行反编码

 

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

 

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

更改后的代码：

Ext.define('W.gzgl.stores.common.MenuStore', {
    extend    : 'Ext.data.Store',
    pageSize  : 20,
    requires  : ['W.gzgl.models.common.MenuModel'],
    model     : 'W.gzgl.models.common.MenuModel',    
    autoDestroy: true,
    autoLoad 	: true,
    proxy : {
    	type 	: 'ajax',
    	url  	: 'manager/menuList.hs',
    	actionMethods: {
    		read: 'POST'
		},
    	reader	: {
            type		: 'json',
            root		: 'rows',
            idProperty	: 'name'
        }
    }
});

 

评论

5 楼 luhouxiang 2015-05-12  

这个方案好，否则一个一个参数搞定的话会很麻烦

4 楼 s332401890 2014-02-18  

谢谢分享！！！！！！！！！！

3 楼 wudith 2013-07-30  

好资料，我也遇到这个问题

2 楼 elgs 2013-04-19  

Thank you!

1 楼 oscarzhangke 2012-08-22  

  谢谢 顶一个 解决我的问题了