最近的项目里，统一使用了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;
} 
