Gridview ExtJS4.Grid在使用DatePicker-NewbieQ进行筛选后未刷新
当我在我的日期选择器中单击一个日期时,我可以看到请求被发送到我的服务器,查询被执行,结果集被返回,但我的网格似乎没有被刷新。。。。?!?!我一直在努力学习MVC模式框架,我无法相信学习曲线。似乎最简单的事情并不容易做到,当搜索网络时,也有类似的帖子,但每一个帖子都与我试图做的有点不同,或者海报的代码在不同的地方,或者他们没有使用MVC模式。。。。。胡说八道 第一次访问我的服务器,用查询填充我的存储,然后网格就成功了——没有问题。在这一点上,如果我从日期选择器中选择了一个日期,则会调用DB,并将请求与我的JSON数据包一起发送回来——这没有问题。我验证了第一个请求中的JSON数据包与第二个和后续请求相匹配,并且在使用chrome控制台和网络工具进行验证时,所有内容都处于检查状态 非常感谢您的帮助。提前谢谢 用户商店: 日期存储: 用户型号: 日期型号: 网格面板: 控制器: JSON数据包:Gridview ExtJS4.Grid在使用DatePicker-NewbieQ进行筛选后未刷新,gridview,extjs,datepicker,Gridview,Extjs,Datepicker,当我在我的日期选择器中单击一个日期时,我可以看到请求被发送到我的服务器,查询被执行,结果集被返回,但我的网格似乎没有被刷新。。。。?!?!我一直在努力学习MVC模式框架,我无法相信学习曲线。似乎最简单的事情并不容易做到,当搜索网络时,也有类似的帖子,但每一个帖子都与我试图做的有点不同,或者海报的代码在不同的地方,或者他们没有使用MVC模式。。。。。胡说八道 第一次访问我的服务器,用查询填充我的存储,然后网格就成功了——没有问题。在这一点上,如果我从日期选择器中选择了一个日期,则会调用DB,并将请
我刚刚快速给出了一个ExtJS 4.2 MVC应用程序的简单示例,该应用程序基于过滤器字段重新加载网格 您也可以发布JSON响应吗?可能是你的代码+JSON数据?我添加了我的JSON数据包。我还没有使用小提琴,所以我需要看看如何使用。好的,我终于得到了一个工作示例。。。你可以访问它。在阅读了您的示例之后,我想知道问题是否是因为您的
网格面板
和分页工具栏
使用了两个不同的存储。。。因为您正在传递字符串值。实际上,我会尝试创建一个存储并将其存储在一个变量中,然后将同一个变量提供给网格的存储和分页工具栏的存储。另外,如果您查看,store属性不带字符串。此外,我没有看到您的日期
型号和日期
商店的代码。。。我就是那个瞎子吗?不,你不是瞎子。。。。我刚刚添加了日期模型和存储。我正在看你关于绳子的建议。但我不确定我是否理解。我知道我使用的是同一个“用户”存储,但我应该如何使用var?我不确定我是否理解何时使用var以及何时不使用var。我认为这与现在的实例化有关,而不是用户需要时。这当然过于简化了。
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync:true,
pageSize:50,
proxy:
{
type: 'ajax',
api:
{
read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
},
reader:
{
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty : 'dataset',
remoteFilter : true
},
listeners:
{
// stuff goes here
},
}
Ext.define('AM.store.dates', {
extend: 'Ext.data.Store',
model: 'AM.model.date',
autoLoad: true,
autoSync:true,
pageSize:1000,
proxy:
{
type: 'ajax',
api:
{
read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
},
reader:
{
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty : 'dataset',
remoteFilter : true
},
listeners:
{
// stuff goes here
}
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: [
{name: 'message_id',type: 'textfield'},
{name: 'recip_email',type: 'textfield'},
{name: 'unix_time_stamp',type:'datefield', dateFormat: 'Y-m-d H:i:s'}
]
});
Ext.define('AM.model.date', {
extend: 'Ext.data.Model',
fields: [
{name: 'message_id',type: 'textfield'},
{name: 'recip_email',type: 'textfield'},
{name: 'unix_time_stamp',type:'datefield', dateFormat: 'Y-m-d H:i:s'}
]
});
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 1})],
dockedItems: [{ xtype: 'pagingtoolbar',
store: 'Users',
dock: 'bottom',
displayMsg: 'Displaying Records {0} - {1} of {2}',
displayInfo: true}],
initComponent: function() {
this.columns = [
Ext.create('Ext.grid.RowNumberer',
{
resizable: true,
resizeHandles:'all',
align: 'center',
minWidth: 35,
maxWidth:50
}),
{
header: 'Name',
dataIndex: 'message_id',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Email',
dataIndex: 'recip_email',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Date Time',
dataIndex: 'unix_time_stamp',
width: 120,
menuDisabled:true,
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
field:{ xtype:'datefield',
editor: new Ext.form.DateField({format: 'Y-m-d'}) }
}];
this.callParent(arguments);
}
});
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores:['Users', 'dates'],
models:['User', 'date'],
views: ['user.List','user.Edit'],
init: function() {
Ext.getStore('dates').addListener('load',this.ondatesStoreLoad, this);
this.control(
{
'viewport > userlist':
{
itemdblclick: this.editUser,
},
'useredit button[action=save]':
{
click: this.updateUser
}
});
},
// ---------- handler Function declarations -------------
ondatesStoreLoad: function(me,records,success)
{
// ------ Gets the dates from dates store and loads an array
var store = this.getStore('dates');
sendDataArray = [];
store.each(function(record){
var recordArray = [record.get("unix_time_stamp")];
sendDataArray.push(recordArray);
});
// ------ Set DatePicker here --------//
var dtFld = Ext.ComponentQuery.query('#datePickerFld')[0];
//dtFld.setDisabledDates(["^(?!"+sendDataArray.join("|")+").*$"]);
dtFld.setMaxDate(new Date());
var wstPnlReg = Ext.ComponentQuery.query('#westPanelRegion')[0];
wstPnlReg.show();
var ctrPnlReg = Ext.ComponentQuery.query('#centerPanelRegion')[0];
ctrPnlReg.show();
},
editUser: function(grid, record)
{
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateUser: function(button)
{
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
this.getUsersStore().sync();
},
});
{"success":true,"data":[{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:05","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:06","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:07","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:07","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:08","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:09","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:09","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:09","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:09","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:09","recip_email":"test@aol.com"}],"dataset":10}