Question

使用自定义日期选择器为复选框下拉过滤器中的extjs商店数据分配日期范围（今天，本周，本月，下周，下个月，选择日期）。

我的代码Click here：

以下是我的设计屏幕：

如何将日期范围映射到数据存储

以下是时间帧过滤器的代码：

var today = "2018-02-04T07:00:00.0000000";

Ext.define('TimeComboCheckbox', {
    extend: 'Ext.form.field.ComboBox',
    xtype: 'timecombocheckbox',
    fieldLabel: 'Time Frame',
    labelAlign: 'right',
    displayField: 'datelable',
    tpl: new Ext.XTemplate('<tpl for=".">', '<div class="x-boundlist-item">', '<input type="radio" {checked} />', '{datelable}', '</div>', '</tpl>'),
    store: Ext.create('Ext.data.Store', {
        fields: ['datelable', 'value', {
            dateselect: 'checked',
            defaultValue: 'All time'
        }],
        data: [{
            datelable: "All time"
        }, {
            datelable: "Today",
            dateselect: today
        }, {
            datelable: "This week",
            dateselect: "2"
        }, {
            datelable: "This month",
            dateselect: "3"
        }, {
            datelable: "Next week",
            dateselect: "4"
        }, {
            datelable: "Next month",
            dateselect: "5"
        }, {
            datelable: "Select Timne",
            dateselect: "6"
        }]
    }),
    queryMode: 'local',
    listeners: {
        select: function(combo, rec) {
            rec.set('checked', 'checked');
        },
        beforedeselect: function(combo, rec) {
            rec.set('checked', '');
        }
    }
});

以下是数据存储的代码：

Ext.define('GridStore', {
    extend: 'Ext.data.Store',
    alias: 'store.gridstore',
    autoLoad: true,
    fields: [{
        name: 'mapStatus',
        mapping: 'Status',
    }, {
        name: 'mapStartDate',
        mapping: 'StartDate',
    }],
    proxy: {
        type: 'ajax',
        url: 'https://company.plutora.com/Releases/GetUserReleaseActivities?_dc=1528795158971',
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    }
});

以下是网格表的代码：

Ext.create({
    xtype: 'grid',
    renderTo: Ext.get(Ext.query(getdom)),
    store: {
        type: 'gridstore'
    },
    height: 400,
    width: '100%',

    tbar: [{
        xtype: 'statuscombocheckbox',
        listeners: {
            select: function(combo, rec) {
                var store = combo.up('grid').getStore();
                store.clearFilter();
                if (rec.get('name').toLowerCase() !== 'all statuses') {
                    store.filter('mapStatus', rec.get('name').toLowerCase());
                }
            }
        }
    }, {
        xtype: 'timecombocheckbox',
        listeners: {
            select: function(combo, rec) {
                var store = combo.up('grid').getStore();
                store.clearFilter();
                if (rec.get('dateselect').toLowerCase() !== 'all time') {
                    store.filter('mapStartDate', rec.get('dateselect'));
                }
            }
        }
    }],

    columns: [{
        text: 'Status',
        width: '8%',
        dataIndex: 'Status',
        renderer: function(value, meta, isxpired) {
            var overdue = isxpired.data.Expired;
            var Status = value;
            if (overdue == true) {
                meta.style = "background-color:red; margin: 5px; border-radius: 4px; color: #fff; line-height: 14px; text-align: center;";
                return "Overdue";
            } else {
                if (Status == "1") {
                    meta.style = "background-color:#f2f2f2; margin: 5px; border-radius: 4px; color: #000; line-height: 14px; text-align: center;";
                    return "Not Started";
                } else if (Status == "2") {
                    meta.style = "background-color:#fc0; margin: 5px; border-radius: 4px; color: #000; line-height: 14px; text-align: center;";
                    return "In Progress";
                } else if (Status == "3") {
                    meta.style = "background-color:#009900; margin: 5px; border-radius: 4px; color: #fff;color: #fff; line-height: 14px; text-align: center;";
                    return "Completed";
                } else if (Status == 4) {
                    meta.style = "background-color:#3be6b2; margin: 5px; border-radius: 4px; color: #000; line-height: 14px; text-align: center;";
                    return "N/A";
                }
            }
        }
    }, {
        text: 'TITLE',
        width: '49%',
        dataIndex: 'Title',
        items: [{
            xtype: 'textfield',
            name: 'searchstring',
            emptyText: '',
            width: '100%',
            enableKeyEvents: true,
            listeners: {
                keyup: function(form, e) {
                    var grid = form.up('grid');
                    grid.getStore().addFilter({
                        property: 'Title',
                        value: form.getValue()
                    });
                }
            }
        }]
    }, {
        text: 'RELEASE ID',
        dataIndex: 'ReleaseId',
        width: '10%',
        items: [{
            xtype: 'textfield',
            name: 'searchstring',
            emptyText: '',
            width: '100%',
            enableKeyEvents: true,
            listeners: {
                keyup: function(form, e) {
                    var grid = form.up('grid');
                    grid.getStore().addFilter({
                        property: 'ReleaseId',
                        value: form.getValue()
                    });
                }
            }
        }]
    }, {
        text: 'START DATE',
        dataIndex: 'StartDate',
        width: '15%',
        type: 'date',
        renderer: function(value, meta, isexpired) {
            var StartDate = new Date(value).toLocaleString('en-US', {
                hour12: true
            })
            return StartDate;
        },
        items: [{
            xtype: 'textfield',
            name: 'searchstring',
            emptyText: '',
            width: '100%',
            enableKeyEvents: true,
            listeners: {
                keyup: function(form, e) {
                    var grid = form.up('grid');
                    grid.getStore().addFilter({
                        property: 'StartDate',
                        value: form.getValue()
                    });
                }
            }
        }]
    }, {
        text: 'DUE DATE',
        dataIndex: 'DueDate',
        width: '15%',
        type: 'date',
        renderer: function(value, meta, isexpired) {
            var overdue = isexpired.data.Expired;
            var DueDate = new Date(value).toLocaleString('en-US', {
                hour12: true
            })
            if (overdue == true) {
                meta.style = "color: red;";
            } else {
                meta.style = "color: #000;";
            }
            return DueDate;
        },
        items: [{
            xtype: 'textfield',
            name: 'searchstring',
            emptyText: '',
            width: '100%',
            enableKeyEvents: true,
            listeners: {
                keyup: function(form, e) {
                    var grid = form.up('grid');
                    grid.getStore().addFilter({
                        property: 'DueDate',
                        value: form.getValue()
                    });
                }
            }
        }]
    }, ],
    selModel: {
        selType: 'checkboxmodel',
        mode: 'SIMPLE'
    }
})

如何使用自定义日期选择器将日期范围（今天，本周，本月，选择日期）分配给复选框下拉过滤器中的extjs存储数据

0 个答案: