【发布时间】：2013-12-30 13:53:26
【问题描述】：
我是 ExtJS 4 的新手，有时会在学习曲线上苦苦挣扎。我已经按照 sencha 网站上关于 MVC 概念的文档了解了我的应用程序的基本结构，但是我很难确定在哪里/如何实现某些组件/处理程序/侦听器，因为我对这个框架还不太了解。
所以，这是我的问题....（是的，我确实看过关于 SO 的其他帖子，但我认为此时我太愚蠢了，无法识别和应用类似的海报可能会遇到的问题来解决我的问题）
如何将网格中的日期字段绑定到选定的日期选择器日期，反之亦然？如果我在我的日期选择器中选择一个日期，我想让我的网格从我的数据库中加载相关的行。如果我在网格中选择一行，我希望看到日期选择器反映所选行中的日期。
有人可以告诉我我应该采取的方法吗？我看过一些代码示例，但我没有清楚地看到明显的首选方法或应该完成的方式。如果有人可以给我一个链接，我会很乐意学习。
这是我在 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 = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];
Ext.应用程序（{ 需要：['Ext.container.Viewport']， 名称：“上午”， appFolder: '应用程序', 控制器：['用户']，
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',
}
]
}
]
});
}
});
在视口中更新日期选择器：
另外一个注意事项是，我注意到 JSON 数据包中包含日期的属性属性，即使您没有建议对商店进行更改。我注意到您提供的链接中可能存在错误？如果我设置为 false 或将其完全从我的商店中删除，它具有相同的行为并包含在我的 JSON 数据包中。
我还需要对网址进行编码吗？当我单击网格中的一行并点击更新按钮时，我在服务器端接收到网格行，其中似乎已经是由 extjs 编码的 url？
Ext.Loader.setConfig({enabled:true});
// 这个数组用于测试。 dateArray = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];
Ext.应用程序（{ 需要：['Ext.container.Viewport']， 名称：“上午”， appFolder: '应用程序', 控制器：['用户']，
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',
}
]
}
]
});
}
});
【问题讨论】：