普通HTML的input调用Ext js DatePicker的实现方法

    最近的项目里，统一使用了Ext js的控件库，自己也是刚刚接触Ext js，大部分的时间都要看API文档了，呵呵，这几天在要求使用普通的HTML的input来调用Ext js的DatePicker控件，在网上查了一下，没有什么太好的解决方案，由于自己动手写了一个，主要的思路就是在input的onclick事件时，调用Ext js DatePicker的show事件，并自己处理一些显示及它事件，下边贴出代码，写得比较急，很多地方还可以优化，呵呵

 

代码

ExtendDatePicker = function (target) {
    var datePickerContainer = null;                 //DatePicker容器
    var datePickerContainerID = null;               //DatePickerID
    var isCreate = false;                           //是否已建立DatePicker
    var datePicker = null;                          //datePicker对象
    var target = target;                            //赋值对象
    var divElement;                                 //层对象

    Ext.get(target).on("click", showDatePicker);
    datePickerContainerID = target + "_datePickerContainer_extjs";

    function showDatePicker() {
        if (datePicker === null) {
            if (datePickerContainer === null) {
                getContainer();

            }

            datePicker = new Ext.DatePicker({
                showToday: false
            });

            divElement = Ext.get(datePickerContainerID);
            divElement.applyStyles("position:absolute");
            divElement.applyStyles("z-index:99999");
            datePicker.render(datePickerContainerID);
            datePicker.on('select', selectEvent);
        }

        setPosition();

        if (Ext.get(target).getAttribute("value") !== "") {
            try {
                datePicker.setValue(Date.parseDate(Ext.get(target).getValue(), "m/d/Y"));
            }
            catch (err) {
                alert("invalid date format");
            }
        }

        Ext.getDoc().on("mousedown", closeEvent);
        Ext.EventManager.on(window, 'resize', setPosition);
        datePicker.show();
    }

    function closeEvent(doc, sender) {
        if (sender === undefined
            || sender === null
            || !(sender.getAttribute("id") === target
            || sender === datePickerContainer
            || findChild(datePickerContainer, sender))) {
            datePicker.hide();
            Ext.getDoc().un("mousedown", closeEvent);
            Ext.EventManager.un(window, 'resize', setPosition);
        }
    }

    function selectEvent(sender, e) {
        document.getElementById(target).value = e.format("m/d/Y");
        datePicker.hide();
    }

    function getContainer() {
        datePickerContainer = document.createElement("div");
        document.body.appendChild(datePickerContainer);

        datePickerContainer.setAttribute("id", datePickerContainerID);
        datePickerContainer.setAttribute("name", datePickerContainerID);
    }

    function setPosition() {
        var targetElement = Ext.get(target);
        if (Ext.getBody().getHeight() - targetElement.getHeight() - targetElement.getY() < 165) {
            divElement.setY(targetElement.getY() - 165);
        }
        else {
            divElement.setY(targetElement.getY() + targetElement.getHeight());
        }

        divElement.setX(targetElement.getX());
        divElement.applyStyles("width:9px");        //让层有宽度
    }
}

function findChild(docElement, sourceElement) {
    if (docElement === sourceElement) {
        return true;
    }
    else {
        if (docElement.childNodes.length > 0) {
            for (var i = 0; i < docElement.childNodes.length; i++) {
                if (findChild(docElement.childNodes[i], sourceElement) == true) {
                    return true;
                }
            }
        }
    }

    return false;
}