Extjs与服务端的数据该怎样交互 - Web 开发 / Ajax
我的提交了json字符数据，可在服务端不知道该怎样解析！请大家给个实例参考一下
[解决办法]
success:function(response){ var json = eval("(" + response.responseText + ")");}
[解决办法]
看错了 是往服务端提交撒
往服务端提交有好几种方式 楼主是哪种提交 formPanel的 还是Ajax的？服务端语言是什么？
[解决办法]
服务端还不就是一个字符串呀。当然如果你用其它框架的话，框架会帮你转化。
[解决办法]
json 数据一般分为 数组 或者对象 在ext控件支持的json数据格式也不完全相同 不多废话给几个例子看看
我是通过json-plugin包来返回json数据的
json数据：
[JSON]{"message":null,"phone":"","smartUserList":[{"orderType":"按使用次数","regDate":"2011-05-25T14:30:11","smartType":"普通卡","usPhone":"13810351401","usType":"全球通\/动感地带"},{"orderType":"按使用次数","regDate":"2011-05-25T00:00:00","smartType":"普通卡","usPhone":"861381000","usType":"全球通\/动感地带"}],"success":true}
grid 会用到其中
"smartUserList":[{"orderType":"按使用次数","regDate":"2011-05-25T14:30:11","smartType":"普通卡","usPhone":"13810351401","usType":"全球通\/动感地带"},{"orderType":"按使用次数","regDate":"2011-05-25T00:00:00","smartType":"普通卡","usPhone":"861381000","usType":"全球通\/动感地带"}]
部分
js代码
给出gird部分
//start grid-people
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel( [
new Ext.grid.RowNumberer(),
sm ,
{
header : '用户号码',
dataIndex : 'usPhone'
}, {
header : '用户类型',
dataIndex : 'usType'
}, {
header : '业务类型',
dataIndex : 'smartType'
}, {
header : '排序规则',
dataIndex : 'orderType'
}, {
header : '注册时间',
dataIndex : 'regDate',
width : 120,
renderer : Ext.util.Format.dateRenderer('Y-m-d H:i:s')
}
]);
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'selectSmartUser.action'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'smartUserList'
}, [
{name : 'usPhone',mapping:'usPhone',type : 'string'},
{name : 'regDate',mapping:'regDate',type : 'date',dateFormat : 'Y-m-dTH:i:s'},
{name : 'usType',mapping:'usType',type : 'string'},
{name : 'smartType',mapping:'smartType',type : 'string'},
{name : 'orderType',mapping:'orderType',type : 'string'}
]),
baseParams:{uname : '' , mname : '' , typename : '',action : '', startfcd : '', endfcd : ''}
});
var grid = new Ext.grid.GridPanel({
loadMask : {
msg : '列表加载中...'
},
id : 'grid',
title : '用户信息',
region : 'center',
height : 120,
ds: ds,
cm: cm,
sm: sm,
listeners : {
'rowdblclick' : onRowDblClick, //双击
scope : this
}
});
//grid-people end
------解决方案--------------------
补充一点 因为api中的一些bug导致有很多朋友在加载数据树出现异常 ext大部分控件支持的json数据格式是json数组 这里说明一下
如果你返回的数据格式是 “key”：{}那么你返回的是json对象
如果是“key”：[]那么就是数组了
遇到数据加载异常时 详细了解一下这个控件支持的是什么格式的json数据
[解决办法]
接下来是楼主要了解的ext表单提交
如果是ext表单提交 那么直接使用ext自己的映射可以将表单控件对应到页面model对象的字段上
例子
js代码
给出表单部分
//start addPeopleform
var addPeopleform = new Ext.form.FormPanel({
id:'addPeopleform',
defaultType : 'textfield',
labelAlign : 'right',
labelWidth : 80,
frame : true,
height:380,
header:false,
collapsible : true,
split : true,
title : '添加用户信息',
region : 'center',
columnWidth : .5,// 设置了该列的宽度占总宽度的50%（columnWidth:.5）
layout : 'form',// formlayout用来放置控件
items : [
{
name:'people.opname',
xtype : 'textfield',
width:150,
fieldLabel : '登录名',// 控件标题为姓名
allowBlank : false,// 该选项值不允许为空
blankText : "不能为空，请填写!",
maxLength : 10,
maxLengthText : '您最大能输入的长度为10!',
minLength : 6 ,
minLengthText : '您最小必须输入的长度为6!'
},{
name:'people.opcname',
xtype : 'textfield',
width:150,
fieldLabel : '中文名',// 控件标题为姓名
allowBlank : false,// 该选项值不允许为空
blankText : "不能为空，请填写!",
maxLength : 6,
maxLengthText : '您最大能输入的长度为6!',
minLength : 2 ,
minLengthText : '您最小必须输入的长度为2!',
regex : /[\u4e00-\u9fa5]/, //正则表达式在 扩展验证
regexText:"只能输入中文!" //正则表达式错误提示
},{
id : 'people.oppass',
name:'people.oppass',
inputType:'password',
width:150,
fieldLabel : '密码',
allowBlank : false,// 该选项值不允许为空
blankText : "不能为空，请填写",
maxLength : 12,
maxLengthText : '您最大能输入的长度为12!',
minLength : 8 ,
minLengthText : '您最小必须输入的长度为8!'
},{
id : 'pwd',
inputType:'password',
width:150,
fieldLabel : '确认密码',
vtype:"password",//自定义的验证类型
vtypeText:"两次密码不一致！",
confirmTo:"people.oppass",//要比较的另外一个的组件的id
allowBlank : false,// 该选项值不允许为空
blankText : "不能为空，请填写!"
}],
buttons : [{
text : '添加',
type:'submit',
id:'addbut',
handler : function() {
if(addPeopleform.form.isValid()){
Ext.getCmp('addbut').disabled = true;
addPeopleform.form.doAction('submit', {
url : 'addPeople.action',//请求action名称
method : 'post', //请求类型
params : '', //参数列表
success : function(form, action) { //成功响应后执行的方法
// document.location='mian.jsp'; //页面跳转
Ext.Msg.alert('操作结果',action.result.message);
Ext.getCmp('addPeopleWindow').close();
Ext.getCmp('grid').getStore().reload()
},failure : function(form,action) {
// 登录失败，将提交按钮重新设为可操作
Ext.getCmp('addbut').disabled = false;
Ext.Msg.alert('操作结果', action.result.message);
}
});
}
}
},{
text : '重置',
handler : function() {
addPeopleform.form.reset();
//Ext.getCmp('addbut').disabled = false;
}
}]
})
//end addPeopleform
页面pagmodel对象
import java.util.Date;
public class People {
private Long id;
private String opcname;
private String oldpwd;
private String opname;
private String oppass;
private Date fcd;
private String fcp;
private Date lud;
private String lup;
private Long showod;
private String vFlag;
gets...
sets...
在action中定义此页面模型对象 并生成get.set方法后程序将自动将页面表单控件name属性对应的字段数据填充到此对象中
说明 此例在s2s2.5h3环境中
[解决办法]
如果是json类型，记得好像要转化为ext可识别的类型，有个函数，记不清名字了。然后在传入
[解决办法]
如果使用.net的话,可以使用
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
js.DeserializeObject("[{json:data}]");
也可以使用其他开源或第三方工具来序列化/反序列化.