首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > JAVA > Java Web开发 >

EXTJS grid修改后用户信息后,页面没有显示修改后的数据 ?

2013-11-15 
EXTJSgrid修改后用户信息后,页面没有显示修改后的数据 ?? 求救接触Extjs 有差不多有一个月了,一直有个问题

EXTJS grid修改后用户信息后,页面没有显示修改后的数据 ?? 求救
接触Extjs 有差不多有一个月了,一直有个问题不能解决,使用grid 显示用户信息列表,当点击修改的时候弹出一个窗体表单显示用户资料,修改完毕以后关闭窗体,但是此时我想让grid里面的数据加载显示修改后的信息,无法实现。 请求前辈们 帮帮忙 !  感激不尽

这是JSON数据源加载的代码。

//创建数据源,从后台读取数据
var itemsPerPage = 18;
var startTime;
var endTime;
var mob;
var userName;

var storeList = Ext.create('Ext.data.JsonStore', {
fields : [ "id", "userName", "userPassword", 'mob', 'uLevel',
'status', 'province', 'city', 'address', 'company',
'customerNature', 'besinessType', 'tel', 'wechat', 'qq',
'email', 'addTime', 'identifier' ],
pageSize : itemsPerPage,
autoLoad : false,
proxy : {
type : 'ajax',
url : 'searchUser',
reader : {
totalProperty : "totalCount", // 数据记录总数,分页需要  
root : "data", // 数据记录数组节点
type : 'json'
}
}
});
//绑定一次加载之前传递查询参数
storeList.on("beforeload", function() {
Ext.apply(storeList.proxy.extraParams, {
startTime : dateFormat(startTime),
endTime : dateFormat(endTime),
mob : mob,
userName : userName
});
});
//加载数据
storeList.reload({
start : 0,
limit : itemsPerPage
});//不要忘记reload()

这里是grid的代码
//创建表格
var record_start = 0; //定义行号
var gridUser = new Ext.grid.Panel({
id : 'girlUserPanel',
height : 480,
store : storeList,
stripeRows : true,
multiSelect : true,
selModel : selModel,
columns : [
new Ext.grid.RowNumberer({
header : "序号",
width : 40,
renderer : function(value, metadata, record, rowIndex) {
return ((storeList.currentPage - 1) * itemsPerPage)
+ record_start + 1 + rowIndex; //实现行号的显示
}
}), {
text : '用户名',
dataIndex : 'userName'
}, {
text : '密码',
dataIndex : 'userPassword'
}, {
text : '手机',
dataIndex : 'mob'
}, {
text : '权限',
dataIndex : 'uLevel'
}, {
text : '状态',
dataIndex : 'status'
}, {
text : '省份',
dataIndex : 'province'
}, {
text : '城市',
dataIndex : 'city'
}, {
text : '地址',
dataIndex : 'address'
}, {
text : '单位',
dataIndex : 'company'
}, {
text : '客户性质',
dataIndex : 'customerNature'
}, {
text : '业务类型',
dataIndex : 'besinessType'
}, {
text : '电话',
dataIndex : 'tel'
}, {
text : '微信',
dataIndex : 'wechat'
}, {
text : 'QQ',
dataIndex : 'qq'
}, {
text : '邮箱',
dataIndex : 'email'
}, {
text : '创建时间',
dataIndex : 'addTime'
}, {
text : '标识符',
dataIndex : 'identifier'
} ],
bbar : new Ext.PagingToolbar({
id : 'pagingToolbar',
store : storeList,
displayInfo : true,
beforePageText : "第",
afterPageText : "/ {0}页",
firstText : "首页",
prevText : "上一页",
nextText : "下一页",
lastText : "尾页",
displayMsg : "当前显示记录从 {0} - {1} 总 {2} 条记录",
emptyMsg : "没有相关记录!"
}),
tbar : [ '姓名:', {
xtype : 'textfield',
id : 'keyword',
name : 'userName',
dataIndex : 'userName'
}, '手机:', {
xtype : 'textfield',
id : 'mob',
name : 'mob',
dataIndex : 'mob'
}, '日期:', {
xtype : 'datefield',
format : 'Y-m-d', //显示出来的效果
name : 'startDate',
id : 'startTime',
dataIndex : 'startTime',
editable : true,
selectOnFocus : true
}, '至', {
xtype : 'datefield',
format : 'Y-m-d', //显示出来的效果
name : 'endDate',
id : 'endTime',
dataIndex : 'endTime',
editable : true,
selectOnFocus : true
}, '-', {
text : '查询',
handler : function() {
startTime = Ext.getCmp('startTime').getValue();
endTime = Ext.getCmp('endTime').getValue();


mob = Ext.getCmp('mob').getValue();
userName = Ext.getCmp('keyword').getValue();
storeList.reload({
params : {
startTime : dateFormat(startTime),
endTime : dateFormat(endTime),
mob : mob,
userName : userName,
start : 0,
limit : itemsPerPage
}
});
}
}, {
xtype : "tbfill"
}, '-', {
text : '修改',
tooltip : '修改一条数据',
//iconCls : 'option',
id : 'tbar1',
disabled : true,
handler : function() {
modify();
}
}, '-', {
text : '删除',
tooltip : '删除数据',
id : 'tbar2',
disabled : true,
//iconCls : 'remove',
handler : function() {
del();
}
} ]
});

var tabPanel = Ext.getCmp("tab_user/list.jsp");
tabPanel.add(gridUser);//添加该panel  
});



这是修改用户资料的form表单代码 。

//创建修改用户资料的表单Panel
var modifyPanel = new Ext.form.Panel({
frame : true,
width : 800,
height : 470,
defaultType : 'textfield',
bodyPadding : 5,
items : [ {
xtype : 'container',
layout : 'column',
items : [
{
xtype : 'container',
columnWidth : .5,
items : [ {
xtype : 'textfield',
fieldLabel : '用户名',
width : 300,
name : 'userName'
}, {
xtype : 'textfield',
fieldLabel : '密码',
name : 'userPassword',
width : 300,
anchor : '96%'
}, {
xtype : 'textfield',
fieldLabel : '手机',
width : 300,
name : 'mob',
anchor : '96%'
}, {
xtype : 'combo',
store : [ [ '一般', '一般' ], [ '会员', '会员' ] ],
editable : false,
width : 300,
fieldLabel : '权限',
allowBlank : false,
blankText : '权限不能为空',
name : 'uLevel',
anchor : '96%'
}, {
xtype : 'combo',
store : [ [ '正式', '正式' ], [ '未认证', '未认证' ] ],
editable : false,
width : 300,
blankText : '状态不能为空',
fieldLabel : '状态',
allowBlank : false,
name : 'status',
anchor : '96%'
}, {
xtype : 'textfield',
fieldLabel : '省份',
width : 300,
name : 'province',
anchor : '96%'
}, {
xtype : 'textfield',
fieldLabel : '城市',
width : 300,
name : 'city',
anchor : '96%'
}, {
xtype : 'textfield',
fieldLabel : '地址',
width : 300,
name : 'address',
anchor : '96%'
}, {
xtype : 'textfield',
fieldLabel : '公司',
width : 300,
name : 'company',
anchor : '96%'
} ]
},
{
xtype : 'container',
columnWidth : .5,
items : [
{
xtype : 'combo',
store : [ [ '中介', '中介' ], [ '企业', '企业' ] ],
editable : false,
width : 300,
fieldLabel : '客户性质',
name : 'customerNature',
anchor : '100%'
},
{
xtype : 'combo',
store : [ [ '带票', '带票' ],
[ '小票买断', '小票买断' ],
[ '带票当天', '带票当天' ],
[ '大票买断', '大票买断' ],
[ '大票买断当天', '大票买断当天' ],
[ '大票买断带票', '大票买断带票' ],
[ '查复或买断', '查复或买断' ],
[ '买断进然后卖断出', '买断进然后卖断出' ],
[ '查复或买断', '查复或买断' ],
[ '小票买断大票买断', '小票买断大票买断' ] ],
editable : false,
width : 300,
triggerAction : 'all',
fieldLabel : '业务类型',
name : 'besinessType',
anchor : '100%'
}, {
xtype : 'textfield',
fieldLabel : '电话',
width : 300,
name : 'tel',
anchor : '100%'
}, {
xtype : 'textfield',
fieldLabel : '微信',


width : 300,
name : 'wechat',
anchor : '100%'
}, {
xtype : 'textfield',
fieldLabel : 'QQ',
name : 'qq',
width : 300,
anchor : '100%'
}, {
xtype : 'textfield',
fieldLabel : 'Email',
width : 300,
name : 'email',
anchor : '100%'
}, {
xtype : 'datefield',
format : 'Y-m-d', //显示出来的效果
fieldLabel : '关注时间',
name : 'addTime',
width : 300,
editable : false,
allowBlank : false,
anchor : '100%'
}, {
xtype : 'textfield',
fieldLabel : '标识符',
name : 'identifier',
width : 300,
allowBlank : false,
anchor : '100%'
} ]
} ]
} ],

buttons : [ {
text : '保存',
handler : function() {
modifyPanel.getForm().submit({
url : 'updateUser',
params : {
id : userId
},
method : "post",
waitMsg : "正在提交数据...",
success : function(c, d) {
Ext.Msg.alert("操作信息", "成功信息保存!");
newFormWin.close();
},    
failure : function(c, d) {
Ext.MessageBox.show({
title : "操作信息",
msg : "信息保存出错!",
buttons : Ext.MessageBox.OK,
icon : "ext-mb-error"
});
}
});
}
}, {
text : '重置',
handler : function() {
modifyPanel.getForm().reset();
}
} ]
})
var newFormWin;
//创建一个窗体显示用户资料的修改
var winModify = function() {
modifyPanel.getForm().reset();
newFormWin = new Ext.window.Window({
title : '修改用户信息',
layout : 'fit',
resizable : false,
closable : true,
closeAction : 'hide',
modal : true,
items : modifyPanel
});
newFormWin.show('');
}



 
//修改用户信息的方法 
function modify() {
var record = Ext.getCmp('girlUserPanel').getSelectionModel()
.getSelection();
winModify();
userId = record[0].get('id');
modifyPanel.form.load({
url : 'loadUser?id=' + record[0].get('id'),
waitMsg : '正在载入数据',
failure : function() {
Ext.Msg.alert('提示', '载入数据失败');
},
success : function() {
//Ext.Msg.alert('载入成功!');
}
});
}
EXTJS grid刷新 grid加载 from表单
[解决办法]
Ext.get('girlUserPanel').store.reload();  //保存成功后让数据 重新加载  。 但是无效
这句错了。

如果仔细看extjs的api文档会发现,properties里并没有store。
也就是说,这个属性不是直接暴露出来的。
但是有getStore方法,
因此,修改为  Ext.get('girlUserPanel').getStore().reload(); 才对
此外,可以把这句放到alert 成功前面。反正是reload是异步的,用户确定后刚好可以看结果。

热点排行