这是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('载入成功！');
}
});
}
9 个解决方案
#1
论坛上关于est的问题没人鸟啊
#2
为何？ 你试过啦 ？
#3
原理数据有没有重新load 一遍。
#4
类似重新load下grid的数据。
var button = Ext.get('xxx');
button.on('click', function(){
grid.store.reload();
//store.reload();
});
#5
当我再次点击查询的时候它是显示修改后的数据， 但是我想让它自动更新。
buttons : [ {
text : '保存',
handler : function() {
modifyPanel.getForm().submit({
url : 'updateUser',
params : {
id : userId
},
method : "post",
waitMsg : "正在提交数据...",
success : function(c, d) {
Ext.Msg.alert("操作信息", "成功信息保存！");
Ext.get('girlUserPanel').store.reload(); //保存成功后让数据 重新加载 。 但是无效
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();
}
} ]
#6
Ext.get('girlUserPanel').store.reload(); //保存成功后让数据 重新加载 。 但是无效
这句错了。
如果仔细看extjs的api文档会发现，properties里并没有store。
也就是说，这个属性不是直接暴露出来的。
但是有getStore方法，
因此，修改为 Ext.get('girlUserPanel').getStore().reload(); 才对
此外，可以把这句放到alert 成功前面。反正是reload是异步的，用户确定后刚好可以看结果。
这句错了。
如果仔细看extjs的api文档会发现，properties里并没有store。
也就是说，这个属性不是直接暴露出来的。
但是有getStore方法，
因此，修改为 Ext.get('girlUserPanel').getStore().reload(); 才对
此外，可以把这句放到alert 成功前面。反正是reload是异步的，用户确定后刚好可以看结果。
#7
在回调函数中 关闭窗口前 直接reload下就行了
success : function(c, d) {
Ext.Msg.alert("操作信息", "成功信息保存！");
storeList.reload();
newFormWin.close();
},
#8
问题解决了， 谢谢6楼的 。
#9
异步同步的问题哦
#1
论坛上关于est的问题没人鸟啊
#2
为何？ 你试过啦 ？
#3
原理数据有没有重新load 一遍。
#4
类似重新load下grid的数据。
var button = Ext.get('xxx');
button.on('click', function(){
grid.store.reload();
//store.reload();
});
#5
当我再次点击查询的时候它是显示修改后的数据， 但是我想让它自动更新。
buttons : [ {
text : '保存',
handler : function() {
modifyPanel.getForm().submit({
url : 'updateUser',
params : {
id : userId
},
method : "post",
waitMsg : "正在提交数据...",
success : function(c, d) {
Ext.Msg.alert("操作信息", "成功信息保存！");
Ext.get('girlUserPanel').store.reload(); //保存成功后让数据 重新加载 。 但是无效
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();
}
} ]
#6
Ext.get('girlUserPanel').store.reload(); //保存成功后让数据 重新加载 。 但是无效
这句错了。
如果仔细看extjs的api文档会发现，properties里并没有store。
也就是说，这个属性不是直接暴露出来的。
但是有getStore方法，
因此，修改为 Ext.get('girlUserPanel').getStore().reload(); 才对
此外，可以把这句放到alert 成功前面。反正是reload是异步的，用户确定后刚好可以看结果。
这句错了。
如果仔细看extjs的api文档会发现，properties里并没有store。
也就是说，这个属性不是直接暴露出来的。
但是有getStore方法，
因此，修改为 Ext.get('girlUserPanel').getStore().reload(); 才对
此外，可以把这句放到alert 成功前面。反正是reload是异步的，用户确定后刚好可以看结果。
#7
在回调函数中 关闭窗口前 直接reload下就行了
success : function(c, d) {
Ext.Msg.alert("操作信息", "成功信息保存！");
storeList.reload();
newFormWin.close();
},
#8
问题解决了， 谢谢6楼的 。
#9
异步同步的问题哦