ExtJS生成日历组件

news2025/1/9 2:23:11

文章目录

      • 1.添加日历组件代码
      • 2.引入日历组件,创建了补签和取消签到,以及翻页显示的事件

1.添加日历组件代码

首先找到自己项目中对应的Ext的目录,并将日历组件添加到calendar这个目录下,我的是KwDatePicker.js
在这里插入图片描述
日历组件代码如下:

Ext.define('Ext.calendar.KwDatePicker', {
    extend: "Ext.picker.Date",
    alias: "widget.kwdatepicker",
    width: 242,
    numWeeks: 6, //每屏要显示的周数

    renderTpl: [
        '<div id="{id}-innerEl" data-ref="innerEl">',
        '<div class="{baseCls}-header">',
        '<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="button" title="{prevText}"></div>',
        '<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month" role="heading">{%this.renderMonthBtn(values, out)%}</div>',
        '<div id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="button" title="{nextText}"></div>',
        '</div>',
        '<table role="grid" id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" {%',
        // If the DatePicker is focusable, make its eventEl tabbable.
        // Note that we're looking at the `focusable` property because
        // calling `isFocusable()` will always return false at that point
        // as the picker is not yet rendered.
        'if (values.$comp.focusable) {out.push("tabindex=\\\"0\\\"");}',
        '%} cellspacing="0">',
        '<thead><tr role="row">',
        '<th role="columnheader" class="x-datepicker-column-header" aria-label="{.}">',
        '<div role="presentation" class="x-datepicker-week"></div>',
        '</th>',
        '<tpl for="dayNames">',
        '<th role="columnheader" class="{parent.baseCls}-column-header" aria-label="{.}">',
        '<div role="presentation" class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
        '</th>',
        '</tpl>',
        '</tr></thead>',
        '<tbody><tr role="row">',
        '<tpl for="days">',
        '{#:this.isEndOfWeek}',
        '{#:this.isBeginOfWeek}',
        '<td role="gridcell">',
        '<div hidefocus="on" class="{parent.baseCls}-date"></div>',
        '</td>',
        '</tpl>',
        '</tr></tbody>',
        '</table>',
        '<tpl if="showToday">',
        '<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
        '</tpl>',
        '</div>',
        {
            firstInitial: function (value) {
                return Ext.picker.Date.prototype.getDayInitial(value);
            },
            isEndOfWeek: function (value) {
                // convert from 1 based index to 0 based
                // by decrementing value once.
                value--;
                var end = value % 7 === 0 && value !== 0;
                return end ? '</tr><tr role="row">' : '';
            },
            isBeginOfWeek: function (value) {
                var end = (value === 1 || (value - 1) % 7 === 0);
                return end ? '<td role="weekcell"><div hidefocus="on" class="x-datepicker-week"></div></td>' : '';

            },
            renderTodayBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
            },
            renderMonthBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
            }
        }
    ],
    fullUpdate: function (date) {
        var me = this;
        me.callParent(arguments);

        var weekTextNodes = me.weekTextNodes;
        var firstDateOfMonth = Ext.Date.getFirstDateOfMonth(date); //获取当月第一天日期
        //var firstDayOfMonth = Ext.Date.getFirstDayOfMonth(date); //获取当月第一天星期 0-6
        //var firstWeekOfMonth = Ext.Date.getWeekOfYear(firstDateOfMonth); //当月第一天的周数

        for (j = 0; j < me.numWeeks; j++) {
            var weekNum = Ext.Date.getWeekOfYear(new Date(firstDateOfMonth.getTime() + j * 7 * 24 * 60 * 60 * 1000));
            weekTextNodes[j].innerHTML = weekNum.toString();
        }
    },
    onRender: function (container) {
        var me = this;
        me.callParent(arguments);

        me.cells = me.eventEl.select('tbody td[role="gridcell"]');
        me.textNodes = me.eventEl.query('tbody td[role="gridcell"] div');

        me.weekCells = me.eventEl.select('tbody td[role="weekcell"]');
        me.weekTextNodes = me.eventEl.query('tbody td[role="weekcell"] div');

        me.eventEl.set({'aria-labelledby': me.monthBtn.id});
        me.mon(me.eventEl, {
            scope: me,
            mousewheel: me.handleMouseWheel,
            click: {
                fn: me.handleDateClick,
                delegate: 'div.' + me.baseCls + '-date'
            }
        });
    }
});

Ext.define("KwDateField", {
    extend: "Ext.form.field.Date",
    alias: "widget.kwdatefield",

    createPicker: function () {
        var me = this,
            format = Ext.String.format;

        // Create floating Picker BoundList. It will acquire a floatParent by looking up
        // its ancestor hierarchy (Pickers use their pickerField property as an upward link)
        // for a floating component.
        return new KwDatePicker({
            pickerField: me,
            floating: true,
            focusable: false, // Key events are listened from the input field which is never blurred
            hidden: true,
            minDate: me.minValue,
            maxDate: me.maxValue,
            disabledDatesRE: me.disabledDatesRE,
            disabledDatesText: me.disabledDatesText,
            disabledDays: me.disabledDays,
            disabledDaysText: me.disabledDaysText,
            format: me.format,
            showToday: me.showToday,
            startDay: me.startDay,
            minText: format(me.minText, me.formatDate(me.minValue)),
            maxText: format(me.maxText, me.formatDate(me.maxValue)),
            listeners: {
                scope: me,
                select: me.onSelect
            },
            keyNavConfig: {
                esc: function () {
                    me.collapse();
                }
            }
        });
    }
});


2.引入日历组件,创建了补签和取消签到,以及翻页显示的事件

var calendar = Ext.create('Ext.calendar.KwDatePicker', {
									width: 500,
									height: 400,
									store: {
										fields: ['date'],
										data: dateString.map(function(date) {
											return { date: date}; //date是向后端发送请求返回给前端的数据
										})
									}
								});
								calendar.on({
									//当前月份
									afterrender: function() {
										// 页面加载后执行一次样式更新
										updateCellStyles();

										// 翻页: 获取日历组件的前一个月和后一个月按钮
										var prevBtn = calendar.prevEl;
										var nextBtn = calendar.nextEl;

										prevBtn.on('click', function() {
											updateCellStyles();
										});

										nextBtn.on('click', function() {
											updateCellStyles();
										});
									},
									//补签/取消签到
									select: function(calendar, date, cell, e) {
										var formattedDate = Ext.Date.format(date, 'Y-m-d');
										if (dateString.includes(formattedDate)) {
											// 用户已经签到,需要取消签到
											cancelSign(memberId, formattedDate);
										} else {
											// 用户未签到,需要补签
											makeUpSign(memberId, formattedDate);
										}
									}
								});
								var window = Ext.create('Ext.window.Window', {
									title: '签到日历',
									layout: 'fit',
									items: [calendar],
									width: 500,
									height: 400,
									modal: true,
									listeners: {
										close: function () {
											window.destroy();
										}
									}
								});
								window.show();
							//更新日期的显示
							function updateCellStyles() {
									Ext.Ajax.request({
										url: 'api/member/sign',
										method: 'POST',
										params: {
											memberId: memberId
										},
										success: function (response, opts) {
											var data=Ext.decode(response.responseText);
											var dateValue = data.list.map(item => new Date(item.createtime));
											var value = dateValue.map(date => Ext.Date.format(date, 'Y-m-d'));
											setTimeout(function() {
												var cells = calendar.eventEl.select('tbody td[role="gridcell"]');
												cells.each(function(cell) {
													var dateText = cell.down('.x-datepicker-date').dom.dateValue;
													var dateObj = new Date(dateText);
													var formattedDate = Ext.Date.format(dateObj, 'Y-m-d');
													var isIncluded = value.includes(formattedDate);
													if (isIncluded) {
														cell.down('.x-datepicker-date').dom.style.color = 'black';
													} else {
														cell.down('.x-datepicker-date').dom.style.color = '#cbcbcb';
													}
												});
											}, 1000);
										}
									});
								};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1986792.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python six模块是什么

six模块是Python2和3兼容性库&#xff0c;它是为了解决Python2和Python3代码兼容性而产生的&#xff0c;众所周知Python2和Python3版本的分裂给Python开发者们带来了很大的烦恼&#xff0c;为了使代码同时兼容两个版本&#xff0c;往往要增加大量的代码&#xff0c;典型的就有u…

著名人工智能新经济数字经济新能源新质生产力讲师培训师教授专家唐兴通分享人工智能社会学商业模式创新人工智能就业工作与教育学习出海跨境数字化转型数字营销数字销售

添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 2024 年是人工智能在工作中真正应用的一年。根据微软和领英进行的调查&#xff08;2024年5月&#xff09;&#xff0c;在过去六个月中&#xff0c;生成式人工智能的使用量几乎翻了一番&#xff0c;全球75%的…

领夹麦克风哪个品牌音质最好?八月领夹式麦克风排行榜

随着移动互联技术的飞速发展&#xff0c;视频内容的消费与创作正以前所未有的速度增长。从直播带货的兴起&#xff0c;到短视频平台的火爆&#xff0c;音频质量作为内容体验的重要组成部分&#xff0c;越来越受到创作者的重视。在这一背景下&#xff0c;无线领夹麦克风凭借其小…

6-8 残差网络(ResNet)

随着我们设计越来越深的网络&#xff0c;深刻理解“新添加的层如何提升神经网络的性能”变得至关重要。更重要的是设计网络的能力&#xff0c;在这种网络中&#xff0c;添加层会使网络更具表现力&#xff0c; 为了取得质的突破&#xff0c;我们需要一些数学基础知识。 残差网络…

Web端高效元件库——高端元件,匠心设计

原型设计&#xff0c;不仅是产品从构想到落地不可或缺的桥梁&#xff0c;更是深化用户体验优化策略的核心环节。Axure&#xff0c;作为原型设计领域的领航者&#xff0c;凭借其卓越的交互设计引擎与无与伦比的灵活性&#xff0c;赢得了产品设计师们的广泛赞誉&#xff0c;成为他…

NiFi :1 初识这把“十年一剑”的利器

--->更多内容&#xff0c;请移步“鲁班秘笈”&#xff01;&#xff01;<--- “现在AI和数据处理密不可分&#xff0c;80%的企业可以利用Apache NiFi轻松解决复杂的数据问题&#xff0c;快速完成场景建设。犹如花上百来块钱在家享受一顿不亚于五星级西餐厅的法式大餐。对…

非负数、0和正数 限制最大值且保留两位小数在elementpuls表单中正则验证

一、结构 <el-form-item label="单价:" prop="price"><el-inputv-model.trim="formData.price"placeholder="请输入"@blur="formMethod.fixTwo"><template #append>(元)</template></el-input…

电源芯片测试系统NSAT2000对比传统ATE测试软件有哪些优势?

随着近几年电源芯片的研究和发展&#xff0c;电源芯片向着高度的集成化、智能化的趋势发展&#xff0c;电源芯片想不过去有了更全面的功能&#xff0c;更稳定可靠的优势。相应的市场中电源芯片的测试系统同样也百花齐放&#xff0c;各类ATE测试软件层出不穷。其中纳米软件的NSA…

系统出现高CPU可能风险因素整理

文章目录 死循环无限递归序列化加解密正则表达式计算密集型任务大流量Full GC资源竞争/死锁I/O阻塞外部接口调用 死循环 死循环是最常见的原因之一。当代码中存在无穷循环&#xff08;例如在多线程环境下的HashMap线程不安全问题或分页查询条件不明确导致的无限循环&#xff0…

C++分析红黑树

目录 红黑树介绍 红黑树的性质与平衡控制关系 红黑树节点的插入 情况1&#xff1a;不需要调整 情况2&#xff1a;uncle节点为红色 情况3&#xff1a;uncle节点为黑色 总结与代码实现 红黑树的删除&#xff08;待实现&#xff09; 红黑树的效率 红黑树介绍 红黑树是第二种平衡二…

e6.利用 docker 快速部署自动化运维平台

利用 docker 快速部署自动化运维平台 1. 安装docker2. 拉取镜像3. 启动容器4. 初始化5. 访问测试 Spug 面向中小型企业设计的轻量级无 Agent 的自动化运维平台&#xff0c;整合了主机管理、主机批量执行、主 机在线终端、文件在线上传下载、应用发布部署、在线任务计划、配置中…

基于tcp,html,数据库的在线信息查询系统项目总结

1.项目背景 在线信息查询系统是一种可用于检索和展示各种信息的计算机程序或平台。主要特点包括&#xff1a; 用户接口&#xff1a;通常提供友好的界面&#xff0c;用户可以方便地输入查询条件。 数据存储&#xff1a;系统往往连接到数据库&#xff0c;存储大量信息&#xf…

几个g视频能压缩成几百mb吗?分享5种视频压缩方法

现如今&#xff0c;高清视频已成为我们日常生活和工作中的重要组成部分。然而&#xff0c;随着视频分辨率和时长的增加&#xff0c;文件体积也随之膨胀&#xff0c;给存储和传输带来了巨大挑战。这时候就需要给视频进行压缩处理&#xff0c;下面给大家分享5种视频压缩方法&…

数据标注在不同行业领域的典型应用场景

数据标注产业通过提供高质量的训练和评测数据集&#xff0c;助力人工智能技术在各领域的应用和发展。 1、科学研究 生物医学&#xff1a;标注病理切片、细胞图像、基因组数据&#xff0c;用于疾病诊断和新药研发的模型训练。地球科学&#xff1a;标注卫星图像、遥感数据&…

什么牌子的超声波清洗机好用又实惠?推荐选购这几个品牌

眼镜在日常佩戴中容易变脏&#xff0c;如果不注意清洁和保养&#xff0c;长时间下来不仅会影响镜片的清晰度&#xff0c;还可能对眼部健康和视力产生负面影响。因此&#xff0c;定期清洁眼镜是非常必要的。与传统手洗方法相比&#xff0c;现在有一种更便捷的选择——超声波清洗…

NUXTJS + pm2 部署开源电商PC商城

为了符合各种服务器场景&#xff0c;使用pm2 部署 PC 商城如下 注意&#xff1a;对比package.json代码修改配置即可&#xff0c;如果2024年5月之后下载的代码可以直接用命令启动 服务器安装node pm2 如已安装跳过此章节 在 CentOS 上安装 Node.js 和 PM2 的步骤如下&#xff1…

知识图谱学习总结

1 知识图谱的介绍 知识图谱&#xff0c;是结构化的语义知识库&#xff0c;用于迅速描述物理世界中的概念及其相互关系&#xff0c;通过知识图谱能够将Web上的信息、数据以及链接关系聚集为知识&#xff0c;使信息资源更易于计算、理解以及评价&#xff0c;并能实现知识的快速响…

链表是个好东西

链表和数组的区别 数组存放数据的地址是连续的&#xff0c;且增加&#xff0c;删除数据需要把后面的数据给挪位置 而链表存放数据的地址是随机的&#xff0c;他有一个指针指向下一个地址&#xff0c;增加&#xff0c;删除数据仅仅将指针指向给修改了即可 结构体用指针变量名访…

CLion运行C++程序

CLion运行C程序 MacBook Linux Windows C和C开发工具介绍 CLion安装和运行C程序 CLion设置 新建C项目 运行Hello world 点击执行,如图 或使用命令执行 #默认会生成a.out可执行文件 g main.cpp #执行 ./a.out#-o指定生成的文件名,比如: abc g main.cpp -o abc#执行./abc.o…

【vulnhub】Basic Pentesting :2靶机

靶机安装 下载地址&#xff1a;https://download.vulnhub.com/basicpentesting/basic_pentesting_2.tar.gz 运行环境&#xff1a;Virtual Box 注意&#xff1a;启动之后如果ip扫描不到&#xff0c;那就关闭之后&#xff0c;重新生成一个新的MAC网段 信息收集 靶机IP扫描 ne…