最看到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'
}
}
});
分享到:
相关推荐
ExtJs中Store加载(load)时候提示信息
在使用myeclipse过程中,我使用ajax同步请求传递参数到后台却出现中文乱码,这是我解决问题的代码,希望对您有所帮助
Extjs4 表单从数据库读取数据映射到对应的字段中显示
storebar extjs通过store实现toolbar
Extjs4后台框架
extjs_php向后台提交json_post的接收方法实例 php接口json数据用$_post[]方法无效时使用
个人《Extjs4学习指南》电子文档过程中整理的Myeclipse工程,有以下修改:1、数据库改为Mysql;2、前四章后台改为servlet;3、最后一章后台改为SSH架构。 使用说明:1、BeginExtjs4目录为前四章的例子代码;2、SSH_...
EXTJS4自学手册——EXT数据结构组件(store) 三、Extjs布局 EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox) EXTJS4自学手册——EXT容器布局(Vbox,Accordion,Table,Column) EXTJS4自学手册——EXT...
extjs4 对多种store数据 ,以多种方式绑定到界面上,以一例子以说明编写
extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台
JQuery AJAX提交中文乱码的解决方案 Jquery css函数用法 JQuery中getJSON的使用方法 Jquery中显示隐藏的实现代码分析 JQuery全选功能的实现 JQuery特效——下拉菜单 JQuery系列教程之XPath选择符 JQuery系列教程之...
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
extjs动态生成model、store、panel;sql拼接等多种技术难点
Extjs4+MVC+struts2后台管理系统,
ExtJs 4 API 中文
extjs4 中文 API
13款extjs经典后台框架.总有一款适合你。本人精心积累,5点积分不算多。
Extjs4文件上传,后台struts2
ExtJs4 手册中文版,是通过整理后生成的chm文档
1、关于加载和回调的问题 ExtJs的Store在加载时候一般是延迟加载的,这时候Grid就会先出现一片空白,等加载完成后才出现数据;因此,我们需要给它添加一个提示信息! 但是Store却没有waitMsg属性。 解决方案: 1.给...