ExtJS 4.2-将日期选择器绑定到网格-新手Q
我是ExtJS4新手，有时在学习曲线上挣扎。我遵循了sencha网站上关于MVC概念的文档，了解了我的应用程序的基本结构，但是我很难确定在何处/如何实现某些组件/处理程序/侦听器，因为我还不太了解这个框架 所以，我的问题是。。。。（是的，我确实看过其他关于SO的帖子，但我认为在这一点上，我太愚蠢了，无法识别和应用类似的海报来解决我的问题） 如何将网格中的日期字段绑定到选定的日期选择器日期，反之亦然？如果我在日期选择器中选择了一个日期，我想让网格从数据库中加载相关行。如果我在网格中选择一行，我希望看到日期选择器反映所选行中的日期 有人能告诉我应该采取的方法吗？我已经看到了一些代码示例，但我没有清楚地看到一个明显的首选方法或应该采用的方式。如果有人可以给我看的链接，我会很乐意学习 这是我在上的第一篇帖子，所以请原谅我缺乏的任何礼节以及其他烦人的事情。提前谢谢 商店：ExtJS 4.2-将日期选择器绑定到网格-新手Q,extjs,extjs4.2,Extjs,Extjs4.2,我是ExtJS4新手，有时在学习曲线上挣扎。我遵循了sencha网站上关于MVC概念的文档，了解了我的应用程序的基本结构，但是我很难确定在何处/如何实现某些组件/处理程序/侦听器，因为我还不太了解这个框架 所以，我的问题是。。。。（是的，我确实看过其他关于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.Loader.setConfig({enabled:true});
Ext.Loader.setConfig({enabled:true});
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',
}
]
}
]
});
}
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',
}
]
}
]
});
}
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',
}
]
}
]
});
}
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',
}
]
}
]
});
}
launch:function（）{
Ext.create（'Ext.container.Viewport'{
布局：“边框”，
项目：
[
{
地区：'中心'，
//布局：'适合'，
标题：'标题'，
xtype:'tabpanel'，//tabpanel本身没有标题
activeTab:0，//默认情况下第一个选项卡处于活动状态
项目：
[{
xtype:'用户列表'，
听众：
{
选择：功能（选择模型、记录、索引、选项）
{
//对所选日期执行某些操作
//Ext.Msg.alert（record.data.message_id，record.data.recip_email+'
'+record.data.unix_时间戳）；
}
}
}]
},
{
地区：'西部'，
布局：'适合'，
xtype:'tabpanel'，
活动选项卡：0，
可折叠：错误，
split:false，
标题：“标题”，
宽度：178，
最大宽度：400，
身高：100，
身高：100，
项目：
[
{
标题：“表1”，
xtype:“面板”，
项目：
[{
xtype:'日期选择器'，
minDate：新日期（'12/15/2013'），
maxDate:新日期（），
//禁用日期设置为反转数组中的日期
disabledDates:[“^（？！+dateArray.join（“|”）+”.*$”]，
//disabledDates:[“^（“+dateArray.join（“|”）+”.*$”]，
处理程序：函数（选择器，日期）
{
//对所选日期执行某些操作
//Ext.Msg.alert（'init2.js'+'
'+Ext.date.format（date，'m/d/Y'）中的日期选择器示例）；
log（'init2.js'+Ext.date.format（date，'m/d/Y'）中的日期选择器示例）；
//按唯一的storeId获取存储
var store=Ext.getStore（“用户”）；
//清除电流滤波器
store.clearFilter（true）；
//过滤器存储
store.filter（“unix_time_stamp”，Ext.Date.format（Date，'m/d/Y'））；
//store.proxy.extraParams={key:'test'}；
store.load（）；
}
}]
},
{
标题：“表2”，
html:“可以动态添加ers-其他ers可以动态添加”，
}
]
}
]
});
}
})；如果要在服务器端的日期选择器中按所选日期筛选网格中显示的记录，请尝试筛选网格的存储 在存储配置中，您需要将config属性设置为
truedatepickerhandler: 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);
}
然后在服务器端，您需要解析和处理筛选器参数。谢谢Akatum。看起来我需要添加store.Load（）以将请求发送到服务器端？我将更新我的OP并添加新的日期选择器代码片段。如果您的存储配置了
remoteFilter:trueLoad（）