2018-08-01

研究Ext tooltip 在不指定id的情况下的实现

tooltip 这个东西是绑定在Ext组件的el上面的。所以在使用tooltip的时候基本上在targget的时候都会指定id。但是如果不使用id的话,应当能获取到对应组件的el。示例代码如下:

Ext.define('Learn.home.LearnFormAutoLine',{
    extend:'Ext.form.Panel',//集成form.Panel，使用默认的layout:anchor
    title:'测试panel',
    width:750,
    height:500,
    layout: "column",
    items:[],
    fieldDefaults:{
        labelWidth:70,
        labelAlign:"right"
    },
    initComponent:function(){
        var me = this;
        me.callParent();
        var fields = this.initFileds();
        Ext.each(fields,function(field){
            me.add(field);
        });
    },
    initBbar:function(){
        var buttons = [];
        var setButton ={
            xtype:'container',
            width:100,
            height:40,
            style:'backgroud:url(image/buttonground-blue.png) no-repeat;font-size:20px;color:white;margin-right:40px;padding-left:30px;cursor:pointer',
            html:'设置'
        };
        var printButton = {
            xtype:'container',
            width:100,
            height:40,
            style:'backgroud:url(image/buttonground-blue.png) no-repeat;font-size:20px;color:white;margin-right:40px;padding-left:30px;cursor:pointer',
            html:'打印二维码'
        };
        buttons.push(setButton);
        buttons.push(printButton);
        return buttons;
    },
    initFileds:function(){
        var filelds = [];
        var userNameFiled = {
            xtype:'textfield',
            name:'name',
            fieldLabel:'姓名',
            height:20,    
            columnWidth:'.30',
            width:'100%',
            margin:'10 0 0 10',
            tooltip:{
                anchor: 'bottom',
                anchorOffset: 100,
                trackMouse: true,
                items: [{
                    xtype: 'container',
                    width: 120,
                    height: 20,
                    html: '姓名'
                }]
            }
            
        };
        var userNameEnFiled = {
            columnWidth:'.30',
            xtype:'textfield',
            name:'enName',
            fieldLabel:'英文名',
            height:20,
            width:'100%',
            margin:'10 0 0 10',
            tooltip:{
                anchor: 'bottom',
                anchorOffset: 100,
                trackMouse: true,
                items: [{
                    xtype: 'container',
                    width: 120,
                    height: 20,
                    html: '英文名'
                }]
            }
        };    
        var userPassPortFiled = {
            xtype:'textfield',
            name:'passport',
            fieldLabel:'护照号',
            columnWidth:'.30',
            height:20,
            width:'100%',
            margin:'10 0 0 10',
            tooltip:{
                anchor: 'bottom',
                anchorOffset: 100,
                trackMouse: true,
                items: [{
                    xtype: 'container',
                    width: 120,
                    height: 20,
                    html: '护照号'
                }]
            }
        };
        var outControyFiled = {
            xtype:'textfield',
            name:'outControy',
            fieldLabel:'出访国家',
            columnWidth:'.30',
            height:20,
            width:'100%',
            margin:'10 0 0 10',
            tooltip:{
                anchor: 'bottom',
                anchorOffset: 100,
                trackMouse: true,
                items: [{
                    xtype: 'container',
                    width: 120,
                    height: 20,
                    html: '出访国家'
                }]
            }
        };
        var newOutControyFiled = {
            xtype:'textfield',
            name:'newOutControy',
            fieldLabel:'出访国家',
            columnWidth:1,
            height:20,
            width:'100%',
            margin:'10 0 0 10',
            tooltip:{
                anchor: 'bottom',
                anchorOffset: 100,
                trackMouse: true,
                items: [{
                    xtype: 'container',
                    width: 120,
                    height: 20,
                    html: '出访国家'
                }]
            }
        };
        filelds.push(userNameFiled);
        filelds.push(userNameEnFiled);
        filelds.push(userPassPortFiled);
        filelds.push(outControyFiled);
        filelds.push(newOutControyFiled);
        return filelds;
    },
    listeners: {
        afterrender: function() {
            Ext.each(this.items.items, function (field) {
                Ext.create('Ext.tip.ToolTip', Ext.applyIf(field.tooltip, {target: field.getEl()}));
            });
        }
    }
});

为想添加提示信息的文本框增加tooltip 配置项

        var newOutControyFiled = {
            xtype:'textfield',
            name:'newOutControy',
            fieldLabel:'出访国家',
            columnWidth:1,
            height:20,
            width:'100%',
            margin:'10 0 0 10',
            tooltip:{
                anchor: 'bottom',
                anchorOffset: 100,
                trackMouse: true,
                items: [{
                    xtype: 'container',
                    width: 120,
                    height: 20,
                    html: '出访国家'
                }]
            }
        };

为整个表单增加渲染完成后的事件,为具有tooltip的item增加Ext.tip.toolTip

    listeners: {
        afterrender: function() {
            Ext.each(this.items.items, function (field) {
                Ext.create('Ext.tip.ToolTip', Ext.applyIf(field.tooltip, {target: field.getEl()}));
            });
        }
    }

sqlServer、oracle中时间相差天数（不需要计算时分秒）比较的操作

两类数据库中获取当天(00:00:00)

1. sqlServer获取方式

convert(varchar(10),GETDATE(),20)

对于sql中的GETDATE(),进行说明,此函数获取到的时间格式如下:

select GETDATE();

输出结果:2018-08-02 10:51:04.783

而我们执行刚开始时说的那条语句

select convert(varchar(10),GETDATE(),20)

输出结果：2018-08-02

由此可以看出获取系统时间是携带时分秒，以及后续的毫秒。
而我们今天是那一天不需要关注时分秒的话就需要进行转换了。（当然转换后得到的是一个字符串）;
那么我们如何再得到一个时间呢？也是有方法的。

select convert(datetime,convert(varchar(10),GETDATE(),20))

我们执行下上面的sql。

输出结果: 2018-08-02 00:00:00.000

这样的话我们就得到了一个不需要关心时分秒的当天了

我们尝试比较两个时间相差几天,在sqlServer中相差天数是使用下面的函数进行比较的

DATEDIFF(day,startdate,enddate)

我们从数据库中得到一个存在数据的表,然后我们执行相差天数的查询

SELECT i9999,DATEDIFF(day,CreateTime,GETDATE()) as '相差天数' FROM UsrA04 WHERE A0100='00000009' AND CreateUserName='su'  ORDER BY I9999 DESC

然后我们得到了如下的结果

虽然GETDATE()获取到的时间是带时分秒的,但sqlServer也给处理掉了,也就是sqlServer在比较天数时会自动忽略掉时分秒。以两个时间的零时零分零秒来进行判断的。

2. oracle 获取方式

select sysdate from dual

我们执行上面的语句得到以下的输出结果：

输出结果：2018/8/2 16:17:25

同样的oracle获取到时间也是带着时分秒的，我们同样希望忽略掉时分秒怎么办呢？
当然oracle也给提供了日期的格式化转换成日期字符串

select to_char(sysdate,'YYYY.MM.dd') from dual

我们执行上面的语句,得到如下输出结果

输出结果:2018.08.02

同样我们得到的是一个字符串,我们需要把他转换成日期格式,因此sql转换成:

select to_date(to_char(sysdate,'YYYY.MM.dd'),'YYYY.MM.dd') from dual

我们执行上面的sql,得到如下的输出结果

输出结果: 2018/8/2

此时的输出结果是一个日期类型
同样我们也做一个实验，我们从数据库中拿出一个存在数据的表

我们现在进行时间比较看看相差几天。oracle进行比对使用的方法是如下直接使用两个日期相减即可

select (sysdate - createtime) as 相差天数,i9999 from UsrA04

我们执行上述sql,得到的结果如下表所示

我们惊奇的发现,oracle在计算的时候竟然携带了时分秒。因此我们在进行oracle数据判断的相差天数时需要忽略时分秒的。因此sql需要更换成如下所示

select (to_date(to_char(sysdate,'YYYY.MM.dd'),'YYYY.MM.dd') - to_date(to_char(createtime,'YYYY.MM.dd'),'YYYY.MM.dd')) as 相差天数,i9999 from UsrA04

我们执行上面的sql,得到的结果如下表所示

我们发现忽略掉时分秒以后,相差天数达到了我们的需要。