我是ExtJS 4的新手，并且有时会在学习曲线上挣扎。我已经关注了sencha网站上关于我的应用程序基本结构的MVC概念的文档，但是我很难确定在哪里/如何实现某些组件/处理程序/监听器，因为我还没有完全感觉到这个框架工作。
所以，这是我的问题....（是的，我确实看了其他关于SO的帖子，但我认为在这一点上我太愚蠢了，无法识别和应用类似的海报可能会解决我的问题）< / p>
如何将网格中的日期字段绑定到所选的日期选择器日期，反之亦然？如果我在日期选择器中选择日期，我希望我的网格加载来自我的数据库的相关行。如果我在网格中选择一行，我希望看到日期选择器反映所选行中的日期。
有人能给我一个关于我应该采取的方法的叙述吗？我已经看到了一些代码示例，但我没有清楚地看到一个明显的首选方法或应该如何完成。如果有人可以给我看一个链接，我会很乐意学习。
这是我在SO上发表的第一篇文章，所以请原谅我所缺乏的礼仪以及其他烦人的事情。提前谢谢！
商店：
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'
}}
}）;
模型：
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'}
]
}）;
查看：
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('m/d/Y'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'm/d/y'}) }
}];
this.callParent(arguments);
},
}）;
视口：
Ext.Loader.setConfig({enabled:true});
//此数组用于测试。 dateArray = [“2013年12月14日”，“2013年12月16日”，“2013年12月18日”，“2013年12月20日”];
Ext.application（{ 要求：['Ext.container.Viewport']， 名称：'AM'， appFolder：'app'， 控制器：['用户']，
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:
[
{
region: 'center',
//layout:'fit',
title:'The Title',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items:
[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
// Ext.Msg.alert(record.data.message_id, record.data.recip_email +'<br> ' + record.data.unix_time_stamp);
}
}
}]
},
{
region: 'west',
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:
[
{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
title: 'mydate',
minDate: new Date('12/15/2013'),
maxDate: new Date(),
// Disable dates is set to invert dates in array
disabledDates:["^(?!"+dateArray.join("|")+").*$"],
// disabledDates:["^("+dateArray.join("|")+").*$"],
handler: function(picker, date)
{
// do something with the selected date
Ext.Msg.alert('date picker example in init2.js');
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}
]
}
]
});
}
}）;
在视口中更新到Datepicker：
另外需要注意的是，我注意到JSON数据包中的属性属性包含了日期，即使没有建议您对商店进行更改。我注意到你提供的链接可能有错误？如果我设置为false或从我的商店中完全删除它，它具有相同的行为，并包含在我的JSON数据包中。
我还需要对网址进行编码吗？当我点击我的网格中的一行并点击更新按钮时，我在服务器端重新显示网格行，看起来可能是由extjs编码的网址？
Ext.Loader.setConfig({enabled:true});
//此数组用于测试。 dateArray = [“2013年12月14日”，“2013年12月16日”，“2013年12月18日”，“2013年12月20日”];
Ext.application（{ 要求：['Ext.container.Viewport']， 名称：'AM'， appFolder：'app'， 控制器：['用户']，
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:
[
{
region: 'center',
//layout:'fit',
title:'The Title',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items:
[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
// Ext.Msg.alert(record.data.message_id, record.data.recip_email +'<br> ' + record.data.unix_time_stamp);
}
}
}]
},
{
region: 'west',
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:
[
{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
minDate: new Date('12/15/2013'),
maxDate: new Date(),
// Disable dates is set to invert dates in array
disabledDates:["^(?!"+dateArray.join("|")+").*$"],
// disabledDates:["^("+dateArray.join("|")+").*$"],
handler: function(picker, date)
{
// do something with the selected date
// Ext.Msg.alert('date picker example in init2.js' + '<br>' + Ext.Date.format(date,'m/d/Y'));
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y'));
// store.proxy.extraParams = { key:'test'};
store.load();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}
]
}
]
});
}
}）;
答案 0 :(得分：0)
如果要在服务器端按日期选择器中的选定日期过滤网格中显示的记录，请尝试过滤网格的存储。
在商店配置中，您需要将remoteFilter配置属性设置为true。然后，商店代理会自动将过滤器参数添加到商店加载数据请求中。此外，如果您只有此商店的一个实例，请添加到配置唯一storeId。
在datepicker处理程序中，您需要将商店过滤器设置为所选日期：
handler: function(picker, date)
{
// get store by unique storeId
var store = Ext.getStore('storeId');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", date);
}
然后在服务器端，您需要解析并处理过滤器参数。