?????? 最看到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'
}
}
});
?