ExtJS 4.2 Date组件扩展:添加清除按钮

ExtJS中除了提供丰富的组件外,我们还可以扩展他的组件。

在这里,我们将在Date日期组件上添加一个【清除】按钮,用于此组件已选中值的清除。

目录

1. Date组件介绍

2. 主要代码说明

3. 代码与在线演示

1. Date组件介绍

这里的Date组件全称为 Ext.form.field.Date,为form表单一个组件。

查看Ext.form.field.Date的源代码的得知需要 Ext.picker.Date

Ext.picker.Date是一个日期选择器,包含了日期选中、渲染布局等等,也正是我们需要修改的文件。

2. 主要代码说明

Date组件原先就包括了一个【今天】按钮,可根据此按钮在Ext.picker.Date的创建方式来创建一个【清除】按钮。

2.1 创建一个js文件,用以覆盖Ext.picker.Date

Ext.define(‘Js.ux.DatePicker‘, {
    override: ‘Ext.picker.Date‘
    ...
}

2.2 renderTpl属性

说明:renderTpl表示一个组件的渲染模板,在【今天】按钮后面渲染【清除】按钮。

2.3 beforeRender方法

说明:在此方法中初始化【清除】按钮。

beforeRender: function () {
    var me = this;
    me.callParent();
    // 创建按钮
    me.clearBtn = new Ext.button.Button({
        ownerCt: me,
        ownerLayout: me.getComponentLayout(),
        text: ‘清除‘,
        tooltip: ‘清除日期‘,
        tooltipType: ‘title‘,
        handler: me.selectClear,
        scope: me
    });
}

  

2.4 selectClear方法

说明:此方法表示点击【清除】按钮执行的内容。

selectClear: function () {
    var me = this,
        btn = me.clearBtn,
        handler = me.handler;

    if (btn && !btn.disabled) {
        me.setValue(‘‘);
        me.fireEvent(‘select‘, me, me.value);
        if (handler) {
            handler.call(me.scope || me, me, me.value);
        }
        me.onSelect();
    }
    return me;
}

  

3. 代码与在线演示

3.1 完整代码

在ExtJS文件后面引入此文件即可:

/*!
* 在原有的Date组件上添加【清除】按钮
*/
Ext.define(‘Js.ux.DatePicker‘, {
    override: ‘Ext.picker.Date‘,
    renderTpl: [
        ‘<div id="{id}-innerEl" role="grid">‘,
            ‘<div role="presentation" class="{baseCls}-header">‘,
                 // the href attribute is required for the :hover selector to work in IE6/7/quirks
                ‘<a id="{id}-prevEl" class="{baseCls}-prev {baseCls}-arrow" href="#" role="button" title="{prevText}" hidefocus="on" ></a>‘,
                ‘<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>‘,
                 // the href attribute is required for the :hover selector to work in IE6/7/quirks
                ‘<a id="{id}-nextEl" class="{baseCls}-next {baseCls}-arrow" href="#" role="button" title="{nextText}" hidefocus="on" ></a>‘,
            ‘</div>‘,
            ‘<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">‘,
                ‘<thead role="presentation"><tr role="row">‘,
                    ‘<tpl for="dayNames">‘,
                        ‘<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">‘,
                            ‘<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>‘,
                        ‘</th>‘,
                    ‘</tpl>‘,
                ‘</tr></thead>‘,
                ‘<tbody role="presentation"><tr role="row">‘,
                    ‘<tpl for="days">‘,
                        ‘{#:this.isEndOfWeek}‘,
                        ‘<td role="gridcell" id="{[Ext.id()]}">‘,
                            // the href attribute is required for the :hover selector to work in IE6/7/quirks
                            ‘<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>‘,
                        ‘</td>‘,
                    ‘</tpl>‘,
                ‘</tr></tbody>‘,
            ‘</table>‘,
            ‘<tpl if="showToday">‘,
                ‘<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">‘,
                    ‘{%this.renderTodayBtn(values, out)%}‘,
                    ‘{%this.renderClearBtn(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">‘ : ‘‘;
            },
            renderTodayBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
            },
            renderMonthBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
            },
            renderClearBtn: function (values, out) { // 清除按钮
                Ext.DomHelper.generateMarkup(values.$comp.clearBtn.getRenderTree(), out);
            }
        }
    ],

    beforeRender: function () {
        var me = this;
        me.callParent();
        // 创建按钮
        me.clearBtn = new Ext.button.Button({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            text: ‘清除‘,
            tooltip: ‘清除日期‘,
            tooltipType: ‘title‘,
            handler: me.selectClear,
            scope: me
        });
    },

    // Do the job of a container layout at this point even though we are not a Container.
    // TODO: Refactor as a Container.
    finishRenderChildren: function () {
        var me = this;
        me.callParent();
        me.clearBtn.finishRender();
    },

    /**
    * Sets the value of the date field
    * @param {Date} value The date to set
    * @return {Ext.picker.Date} this
    */
    setValue: function (value) {
        if (value == ‘‘) {
            this.value = value;
        } else {
            this.value = Ext.Date.clearTime(value, true);
            return this.update(this.value);
        }
    },

    /**
    * 清除按钮点击
    */
    selectClear: function () {
        var me = this,
            btn = me.clearBtn,
            handler = me.handler;

        if (btn && !btn.disabled) {
            me.setValue(‘‘);
            me.fireEvent(‘select‘, me, me.value);
            if (handler) {
                handler.call(me.scope || me, me, me.value);
            }
            me.onSelect();
        }
        return me;
    },

    beforeDestroy: function () {
        var me = this;
        if (me.rendered) {
            Ext.destroy(
                me.clearBtn
            );
        }
        me.callParent();
    },
});

3.2 运行图

3.3 在线演示

在线演示http://www.akmsg.com/ExtJS/index.html#App.Demo.DateExtendTab

==================================系列文章==========================================

本篇文章:7.9 ExtJS 4.2 Date组件扩展:添加清除按钮

Web开发之路系列文章

时间: 10-12

ExtJS 4.2 Date组件扩展:添加清除按钮的相关文章

ZKEACMS 模板组件扩展

前言 如果你还不知道ZKEACMS,不妨先了解一下. ASP.NET MVC 开源建站系统 ZKEACMS 推荐,从此网站“拼”起来 官方地址:http://www.zkea.net/zkeacms 下载地址:https://github.com/SeriaWei/ASP.NET-MVC-CMS/releases GitHub:https://github.com/SeriaWei/ASP.NET-MVC-CMS 开源中国社区:http://git.oschina.net/seriawei/AS

Primitive: Cacls.exe组件未添加导致部分软件无法在XP Embedded上安装

编译好XP Embedded,在目标机上顺利通过了FBA.安装好驱动,却发现有一款软件(我的目标机唯一需要装的就是这个东西)一直无法安装,提示cacls失败. 估计是什么组件没添加吧,首先怀疑是Windows Installer的问题,检查后发现组件已添加,而且msi格式的安装包可以正常运行:这个软件的安装包是用Installshield制作的,怀疑是不是Installshield的什么运行库不对?在目标机上装了Installshield,结果还是不能装这款软件:反编译了这款软件的安装脚本set

从头认识Spring-3.8 简单的AOP日志实现(注解版)-扩展添加检查订单功能,以便记录并检測输入的參数

这一章节我们讨论一下扩展添加检查订单功能,以便记录并检測输入的參数. 1.domain 蛋糕类: package com.raylee.my_new_spring.my_new_spring.ch03.topic_1_8; public class Cake { private String name = ""; public String getName() { return name; } public void setName(String name) { this.name =

给easyui datebox扩展一个清空按钮

/** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; (function ($) { var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: function (target) { return $(target).datebox("options").cleanText }, handler

【博客美化】07.添加打赏按钮

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 [博客美化]07.添加打赏按钮 1.添加打赏按钮 进入自己的博客园->设置,将以下html代码添加到“页首Html代码” <!--打赏 Start--> <script> window.tctipConfig = { staticP

代码添加一个按钮及监听方法

有时候无法从控件中拖拽一个按钮到storyboard,必须用编写代码方式添加按钮: 1 - (void)viewDidLoad 2 { 3 [super viewDidLoad]; 4 // Do any additional setup after loading the view, typically from a nib. 5 //计算出展示表情区域的宽和 展示区距顶部的高度+10个偏移量 6 //添加按钮 9 //创建button 10 addBtn = [[UIButton alloc

仿新浪微博IOS客户端(v5.2.8)——自定义UITabBar替换系统默认的(添加“+”号按钮)

转载请标明出处:http://blog.csdn.net/android_ls/article/details/45896395 声明:仿新浪微博项目,所用所有图片资源都来源于官方新浪微博IOS客户端,编写本应用的目的在于学习交流,如涉及侵权请告知,我会及时换掉用到的相关图片. 自定义UITabBar替换系统默认的,目的是为了在UITabBar中间位置添加一个"+号按钮",下面我们来聊聊具体的实现. 1.自定义WBTabBar,让其继承自UITabBar,代码如下: // // WBT

[转]UITextField常用属性归纳:文本框样式、文字样式、键盘样式、左右视图样式、清除按钮设置等

(1)可以根据需要设置文本框的样式(包括形状.边框颜色.背景等). (2)可以根据需要设置文字显示样式(包括输入密码时的密文显示.文字横向居中.纵向居中上下.输入的文字是否首席木大写.文字超过后是否缩小还是向右滚动等). (3)可以根据需要设置各种不同的键盘样式(只有数字.只有字母等等). (4)还有inputView可以弹出一个视图,用于取代弹出键盘,暂时不知道什么用处,但貌似可以用得地方很多啊. (5)还有return的样式设置,可以设置为Google也可以设置为Go和Search等更形象的

为Windows窗口标题栏添加新按钮

为Windows窗口标题栏添加新按钮 对于我们熟悉的标准windows窗口来讲,标题栏上一般包含有3个按钮,即最大化按钮,最小化按钮和关闭按钮.你想不想在Windows的窗口标题栏上添加一个新的自定义按钮,满足你的个性化需求,从而也使自己的窗口更具特色呢? 下面我们就讨论一下在delphi中如何给窗口的标题栏上添加新的按钮. 一.实现起来要定义以下过程: 1. 定义DrawCaptButton过程,这个过程的功能是在指定的位置画出按钮. 在过程中要使用win32函数GetSystemMetric

利用WordPress自定义字段为文章添加下载按钮

树经常要上传一些资源来给大家分享,但是每次都要手动加链接,关联图片,十分麻烦,于是就利用了一下wordpress的自定义字段功能来自动添加下载按钮下面就来说说怎么实现这个功能吧~其实方法很简单,利用的就是下面这一段代码 <?php if(get_post_meta($post->ID, "download", $single = true) != ""){ ?> <div id="download"> <a h