[color=red][url]http://virgos.iteye.com/category/31862?show_full=true[/url][/color]
Ext官方中文教程列表
特别鸣谢：Ext中文站整理、维护
注意：转载文章,请保留原始链接和署名
我认为学习EXT开发最好的方法是，在真正开发之前，掌握好高级JavaScript知识，
就像鱼儿游在水里一样对JS运用自如。
自己可以创建JavaScript的类、明白类原型（class's prototype）的原理，
和明白函数的作用域都是有益的帮助。
明白Ajax为什么要异步方式也是其中的一个知识点。
论坛上50％所提出的问题很大原因是对JavaScript知识不牢固所至，而不是EXT API的问题。
当真正开始用EXT做开发了，那么安装目录下examples/*的文件夹超过70个例子便是研究的好对象，
这些例子为你展示了你日后将会使用的大多数技巧或方法。
接着，最好就是先拿examples/*的文件夹中例子练一练手，做一些简单、轻型的小项目。
如果直接拿EXT结合到程序去开发，很可能你会因为越来越复杂的问题泥足深陷。
把每一项的 知识点/技巧 都做成可单独运行文件，这样以便你以后参考，还有一个好处是，可以发到论坛上，然后我们放到examples/*的文件夹，以便我们的测试并协助你。
如果能按照以上的建议去做，我相信这是一个很好的累积。而且按照我的角度看，整个UI就是这样一点一点构建起来。
入门:
Tutorial:EXT简介
extjs.com/learn/Tutorial:Introduction_to_Ext_2.0_(Chinese)
Tutorial:Ext 2简述
[url]extjs.com/learn/Ext_2_Overview_(Chinese) [/url]
Tutorial:EXT新手建议
extjs.com/learn/Tutorial:EXT新手建议
Tutorial:怎么轻松地进入Ext的世界?
extjs.com/learn/Tutorial:Playing_With_Ext_The_Easy_Way_(Chinese)
Tutorial:Javascript中的作用域（scope）是什么?(一)
extjs.com/learn/Tutorial:What_is_that_Scope_all_about_(Chinese)
Tutorial:Javascript中的作用域（scope）是什么?(二)
extjs.com/learn/What_is_that_Scope_all_about2_(Chinese)
Manual:Ext源码概述
extjs.com/learn/Manual:Ext_Source_Overview_(Chinese)
Manual:Ext与RESTful Web Services
extjs.com/learn/Manual:RESTful_Web_Services_(Chinese)
程序设计:
Tutorial:如何合理地规划一个应用程序
extjs.com/learn/Tutorial:Application_Layout_for_Beginners_(Chinese)
Tutorial:如何本地化ext的教程
extjs.com/learn/Tutorial:Localizing_Ext_(Chinese)
Tutorial:xtype的含义
extjs.com/learn/Tutorial:Xtype_defined_(Chinese)
Tutorial:扩展Ext中的组件
extjs.com/learn/Manual:Component:Extending_Ext_Components(Chinese)
Tutorial:扩展与插件之间的区别
extjs.com/learn/Manual:Component:Extension_or_Plugin_zh-CN
Tutorial:Ext组件的复用
extjs.com/learn/Manual:Component:Extending_Ext_Components(Chinese)
Tutorial:从源码生成Ext
[url]extjs.com/learn/Tutorial:Building_Ext_From_Source_(Chinese)
[/url]基础用法:
Tutorial:DomQuery基础
extjs.com/learn/Tutorial:DomQuery_Basics(Chinese)
Tutorial:Ext中的事件
extjs.com/learn/Tutorial:Events_Explained_(Chinese)
Tutorial:简述模板
extjs.com/learn/Tutorial:Getting_Started_with_Templates_(Chinese)
Tutorial:模板（Templates）的函数
extjs.com/learn/Tutorial:Utilizing_Format_Features_of_Templates_(Chinese)
Manual:事件的处理
extjs.com/learn/Manual:Intro:Event_Handling_cn
Manual:Ext中的继承
extjs.com/learn/Manual:Intro:Inheritance_(Chinese)
Manual:Ext的类设计
extjs.com/learn/Manual:Intro:Class_Design_cn
Manual:Ajax通讯
extjs.com/learn/Manual:Core:Ext.Ajax_(Chinese)
Manual:JSON处理方法
extjs.com/learn/Manual:Core:Working_with_JSON_(Chinese)
Manual:函数的原型扩展
extjs.com/learn/Manual:Utilities:Function_(Chinese)
组件的使用:
Tutorial:Tab标签页
extjs.com/learn/Tutorial:TabPanel_Basics_(Chinese)
Tutorial:Ext 1.x中的布局
extjs.com/learn/Tutorial:Using_Layouts_with_Ext_-_Part_1_(Chinese)
Tutorial:Grid组件初学
extjs.com/learn/Tutorial:Beginning_Using_the_Grid_Component_(Chinese)
Tutorial:Grid的数据分页
extjs.com/learn/Tutorial:Basics_of_Paging_With_the_Grid_Component_(Chinese)
Tutorial:Ext菜单器件
extjs.com/learn/Tutorial:Ext_Menu_Widget_(Chinese)
Tutorial:表单组件初学
extjs.com/learn/Tutorial:Getting_Started_with_Forms_(Chinese)
Tutorial:表单组件初学(二)
extjs.com/learn/Tutorial:Loading_Data_Into_and_Submitting_a_Form_(Chinese)
Manual:Cookie的存储
extjs.com/learn/Manual:Core:State_(Chinese)
YUI-Ext(Ext前身)的相关文章
Tutorial:EXT新手建议：建立自己的工具箱（Toolkit）
extjs.com/learn/Tutorial:EXT新手建议
Tutorial:如何用YUI轻松做JavaScript动画
extjs.com/learn/Tutorial:如何用YUI轻松做JavaScript动画
Tutorial:轻松三步，搞掂内存泄漏
extjs.com/learn/Tutorial:轻松三步，搞掂内存泄漏
Tutorial:用YUI-EXT创建Ajax Feed-viewer
extjs.com/learn/Tutorial:用YUI-EXT创建Ajax_Feed-viewer
Tutorial:使用DomHelper 创建元素的DOM、HTML片断和模版
[url]extjs.com/learn/Tutorial:使用DomHelper 创建元素的DOM、HTML片断和模版[/url]
Tutorial:EXT设计模式初学习
extjs.com/learn/Tutorial:EXT设计模式初学习
Tutorial:预览 ：增强版的拖放和新增的TreePanel
extjs.com/learn/Tutorial:预览_：增强版的拖放和新增的TreePanel
Tutorial:创建一个可复用的AJAX对话框--一个完成好的例子
extjs.com/learn/Tutorial:创建一个可复用的AJAX对话框--一个完成好的例子
Tutorial:创建YUI的Grid
extjs.com/learn/Tutorial:创建YUI的Grid
Tutorial:Grid 调用远程数据
[url]extjs.com/learn/Tutorial:Grid 调用远程数据[/url]
Tutorial:为Yahoo! UI Extensions Grid增加内置的可编辑器
[url]extjs.com/learn/Tutorial:为Yahoo! UI Extensions Grid增加内置的可编辑器[/url]
Tutorial:Ext.MasterTemplates 入手
[url]extjs.com/learn/Tutorial:Ext.MasterTemplates 入手[/url]
Tutorial:像了解爱人一样了解ExtJs
extjs.com/learn/Tutorial:像了解爱人一样了解ExtJs
Tutorial:JSON和浏览器安全
extjs.com/learn/Tutorial:JSON和浏览器安全
Tutorial:JavaScript的一种模组模式
extjs.com/learn/Tutorial:JavaScript的一种模组模式
Tutorial:关于JavaScript的 貌似类（pseudo-classes）－－－－不吐不快
[url]extjs.com/learn/Tutorial:关于JavaScript的 貌似类（pseudo-classes）－－－－不吐不快 [/url]
Tutorial:Application Layout 程式開發入門介紹
[url]extjs.com/learn/Tutorial:Application Layout 程式開發入門介紹[/url]
Tutorial:如何建立一個可以Disable/Editable的Editor gird
[url]extjs.com/learn/Tutorial:如何建立一個可以Disable/Editable的Editor gird[/url]
* 09:56
* 浏览 (839)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-12-09
缩略显示
JavaScript实现双击编辑
关键字: javascript 双击编辑
其实就是元素的替代
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>无标题文档</title>
<style>
input.a {border:1px solid #fff;background:#fff;}
input.b {border:1px solid #369;background:#fff;}
</style>
</head>
<body>
<input type="text" id="test" readonly value="这里是标题" class="a" />
<input type="submit" id="submit" value="修改" style="display:none;" />
<input type="text" id="ttt" readOnly value="这里测试2" class="a"/>
<script type="text/javascript">
var test = document.getElementById("test");
var mysubmit = document.getElementById("submit");
test.ondblclick = function(){
this.readOnly = false;
this.className = "b";
mysubmit.style.display = "";
}
mysubmit.onclick = function(){
test.readOnly = true;
test.className = "a";
this.style.display = "none";
}
var ttt = document.getElementById("ttt");
ttt.ondblclick = function(){
this.readOnly = false;
this.className = "b";
}
ttt.onblur = function(){
this.readOnly = true;
this.className = "a";
}
</script>
</body></html>
* 19:20
* 浏览 (1089)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-12-09
缩略显示
JavaScript时间选择控件
关键字: javascript 时间 控件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="ProgId" content="VisualStudio.HTML">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<script language="javascript">
/**
*本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。
*tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。
*使用方法：
* (1)只选择日期 <input type="text" name="date" readOnly onClick="setDay(this);">
* (2)选择日期和小时 <input type="text" name="dateh" readOnly onClick="setDayH(this);">
* (3)选择日期和小时及分钟 <input type="text" name="datehm" readOnly onClick="setDayHM(this);">
*设置参数的方法
* (1)设置日期分隔符 setDateSplit(strSplit);默认为"-"
* (2)设置日期与时间之间的分隔符 setDateTimeSplit(strSplit);默认为" "
* (3)设置时间分隔符 setTimeSplit(strSplit);默认为":"
* (4)设置(1),(2),(3)中的分隔符 setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
* (5)设置开始和结束年份 setYearPeriod(intDateBeg,intDateEnd)
*说明：
* 默认返回的日期时间格式如同：2005-02-02 08:08
*/
//------------------ 样式定义 ---------------------------//
//功能按钮同样样式
var s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";
//翻年、月等的按钮
var s_tiannet_turn = "width:28px;" + s_tiannet_turn_base;
//关闭、清空等按钮样式
var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base;
//年选择下拉框
var s_tiannet_select = "width:64px;display:none;";
//月、时、分选择下拉框
var s_tiannet_select2 = "width:46px;display:none;";
//日期选择控件体的样式
var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +
"border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";
//显示日的td的样式
var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";
//字体样式
var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";
//链接的样式
var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";
//横线
var s_tiannet_line = "border-bottom:1 solid #6699CC";
//------------------ 变量定义 ---------------------------//
var tiannetYearSt = 1950;//可选择的开始年份
var tiannetYearEnd = 2010;//可选择的结束年份
var tiannetDateNow = new Date();
var tiannetYear = tiannetDateNow.getFullYear(); //定义年的变量的初始值
var tiannetMonth = tiannetDateNow.getMonth()+1; //定义月的变量的初始值
var tiannetDay = tiannetDateNow.getDate();
var tiannetHour = 8;//tiannetDateNow.getHours();
var tiannetMinute = 0;//tiannetDateNow.getMinutes();
var tiannetArrDay=new Array(42); //定义写日期的数组
var tiannetDateSplit = "-"; //日期的分隔符号
var tiannetDateTimeSplit = " "; //日期与时间之间的分隔符
var tiannetTimeSplit = ":"; //时间的分隔符号
var tiannetOutObject; //接收日期时间的对象
var arrTiannetHide = new Array();//被强制隐藏的标签
var m_bolShowHour = false;//是否显示小时
var m_bolShowMinute = false;//是否显示分钟
var m_aMonHead = new Array(12); //定义阳历中每个月的最大天数
m_aMonHead[0] = 31; m_aMonHead[1] = 28; m_aMonHead[2] = 31; m_aMonHead[3] = 30; m_aMonHead[4] = 31; m_aMonHead[5] = 30;
m_aMonHead[6] = 31; m_aMonHead[7] = 31; m_aMonHead[8] = 30; m_aMonHead[9] = 31; m_aMonHead[10] = 30; m_aMonHead[11] = 31;
// ---------------------- 用户可调用的函数 -----------------------------//
//用户主调函数－只选择日期
function setDay(obj){
tiannetOutObject = obj;
//如果标签中有值，则将日期初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue);
}
tiannetPopCalendar();
}
//用户主调函数－选择日期和小时
function setDayH(obj){
tiannetOutObject = obj;
m_bolShowHour = true;
//如果标签中有值，则将日期和小时初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(0,10));
var hour = strValue.substring(11,13);
if( hour < 10 ) tiannetHour = hour.substring(1,2);
}
tiannetPopCalendar();
}
//用户主调函数－选择日期和小时及分钟
function setDayHM(obj){
tiannetOutObject = obj;
m_bolShowHour = true;
m_bolShowMinute = true;
//如果标签中有值，则将日期和小时及分钟初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(0,10));
var time = strValue.substring(11,16);
var arr = time.split(tiannetTimeSplit);
tiannetHour = arr[0];
tiannetMinute = arr[1];
if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);
if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2);
}
tiannetPopCalendar();
}
//设置开始日期和结束日期
function setYearPeriod(intDateBeg,intDateEnd){
tiannetYearSt = intDateBeg;
tiannetYearEnd = intDateEnd;
}
//设置日期分隔符。默认为"-"
function setDateSplit(strDateSplit){
tiannetDateSplit = strDateSplit;
}
//设置日期与时间之间的分隔符。默认为" "
function setDateTimeSplit(strDateTimeSplit){
tiannetDateTimeSplit = strDateTimeSplit;
}
//设置时间分隔符。默认为":"
function setTimeSplit(strTimeSplit){
tiannetTimeSplit = strTimeSplit;
}
//设置分隔符
function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
tiannetDateSplit(strDateSplit);
tiannetDateTimeSplit(strDateTimeSplit);
tiannetTimeSplit(strTimeSplit);
}
//设置默认的日期。格式为：YYYY-MM-DD
function setDefaultDate(strDate){
tiannetYear = strDate.substring(0,4);
tiannetMonth = strDate.substring(5,7);
tiannetDay = strDate.substring(8,10);
}
//设置默认的时间。格式为：HH24:MI
function setDefaultTime(strTime){
tiannetHour = strTime.substring(0,2);
tiannetMinute = strTime.substring(3,5);
}
// ---------------------- end 用户可调用的函数 -----------------------------//
//------------------ begin 页面显示部分 ---------------------------//
var weekName = new Array("日","一","二","三","四","五","六");
document.write('<div id="divTiannetDate" style="'+s_tiannet_body+'" style="本日历选择控件由tiannet根据前人经验完善而成！">');
document.write('<div align="center" id="divTiannetDateText" Author="tiannet" style="padding-top:2px;">');
document.write('<span id="tiannetYearHead" Author="tiannet" style="'+s_tiannet_font+'" '+
'οnclick="spanYearCEvent();"> 年</span>');
document.write('<select id="selTianYear" style="'+s_tiannet_select+'" Author="tiannet" '+
' onChange="tiannetYear=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetYearHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=tiannetYearSt;i <= tiannetYearEnd;i ++){
document.writeln('<option value="' + i + '">' + i + '年</option>');
}
document.write('</select>');
document.write('<span id="tiannetMonthHead" Author="tiannet" style="'+s_tiannet_font+'" '+
'οnclick="spanMonthCEvent();"> 月</span>');
document.write('<select id="selTianMonth" style="'+s_tiannet_select2+'" Author="tiannet" '+
'onChange="tiannetMonth=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetMonthHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=1;i <= 12;i ++){
document.writeln('<option value="' + i + '">' + i + '月</option>');
}
document.write('</select>');
//document.write('</div>');
//document.write('<div align="center" id="divTiannetTimeText" Author="tiannet">');
document.write('<span id="tiannetHourHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
'οnclick="spanHourCEvent();"> 时</span>');
document.write('<select id="selTianHour" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
' onChange="tiannetHour=this.value;tiannetWriteHead();document.all.tiannetHourHead.style.display=\'\';' +
'this.style.display=\'none\';">');
for(var i=0;i <= 23;i ++){
document.writeln('<option value="' + i + '">' + i + '时</option>');
}
document.write('</select>');
document.write('<span id="tiannetMinuteHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
'οnclick="spanMinuteCEvent();"> 分</span>');
document.write('<select id="selTianMinute" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
' onChange="tiannetMinute=this.value;tiannetWriteHead();document.all.tiannetMinuteHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=0;i <= 59;i ++){
document.writeln('<option value="' + i + '">' + i + '分</option>');
}
document.write('</select>');
document.write('</div>');
//输出一条横线
document.write('<div style="'+s_tiannet_line+'"></div>');
document.write('<div align="center" id="divTiannetTurn" style="border:0;" Author="tiannet">');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="年↑" title="上一年" onClick="tiannetPrevYear();">');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="年↓" title="下一年" onClick="tiannetNextYear();"> ');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="月↑" title="上一月" onClick="tiannetPrevMonth();">');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="月↓" title="下一月" onClick="tiannetNextMonth();">');
document.write('</div>');
//输出一条横线
document.write('<div style="'+s_tiannet_line+'"></div>');
document.write('<table border=0 cellspacing=0 cellpadding=0 bgcolor=white onselectstart="return false">');
document.write(' <tr style="background-color:#2650A6;font-size:10pt;color:white;height:22px;" Author="tiannet">');
for(var i =0;i < weekName.length;i ++){
//输出星期
document.write('<td width="21" align="center" Author="tiannet">' + weekName[i] + '</td>');
}
document.write(' </tr>');
document.write('</table>');
//输出天的选择
document.write('<table border=0 cellspacing=1 cellpadding=0 bgcolor=white onselectstart="return false">');
var n = 0;
for (var i=0;i<5;i++) {
document.write (' <tr align=center id="trTiannetDay' + i + '" >');
for (var j=0;j<7;j++){
document.write('<td align="center" id="tdTiannetDay' + n + '" '+
'onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
n ++;
}
document.write (' </tr>');
}
document.write (' <tr align=center id="trTiannetDay5" >');
document.write('<td align="center" id="tdTiannetDay35" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
document.write('<td align="center" id="tdTiannetDay36" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
document.write('<td align="right" colspan="5"><a href="javascript:tiannetClear();" style="' + s_tiannet_link + '">清空</a>'+
' <a href="javascript:tiannetHideControl();" style="' + s_tiannet_link + '">关闭</a>' +
' <a href="javascript:tiannetSetValue(true);" style="' + s_tiannet_link + '">确定</a> ' +
'</td>');
document.write (' </tr>');
document.write('</table>');
document.write('</div>');
//------------------ end 页面显示部分 ---------------------------//
//------------------ 显示日期时间的span标签响应事件 ---------------------------//
//单击年份span标签响应
function spanYearCEvent(){
hideElementsById(new Array("selTianYear","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetYearHead","selTianMonth","selTianHour","selTianMinute"),true);
}
//单击月份span标签响应
function spanMonthCEvent(){
hideElementsById(new Array("selTianMonth","tiannetYearHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetMonthHead","selTianYear","selTianHour","selTianMinute"),true);
}
//单击小时span标签响应
function spanHourCEvent(){
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("selTianHour"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetHourHead","selTianYear","selTianMonth","selTianMinute"),true);
}
//单击分钟span标签响应
function spanMinuteCEvent(){
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("selTianMinute"),false);
hideElementsById(new Array("tiannetMinuteHead","selTianYear","selTianMonth","selTianHour"),true);
}
//根据标签id隐藏或显示标签
function hideElementsById(arrId,bolHide){
var strDisplay = "";
if(bolHide) strDisplay = "none";
for(var i = 0;i < arrId.length;i ++){
var obj = document.getElementById(arrId[i]);
obj.style.display = strDisplay;
}
}
//------------------ end 显示日期时间的span标签响应事件 ---------------------------//
//判断某年是否为闰年
function isPinYear(year){
var bolRet = false;
if (0==year%4&&((year%100!=0)||(year%400==0))) {
bolRet = true;
}
return bolRet;
}
//得到一个月的天数，闰年为29天
function getMonthCount(year,month){
var c=m_aMonHead[month-1];
if((month==2)&&isPinYear(year)) c++;
return c;
}
//重新设置当前的日。主要是防止在翻年、翻月时，当前日大于当月的最大日
function setRealDayCount() {
if( tiannetDay > getMonthCount(tiannetYear,tiannetMonth) ) {
//如果当前的日大于当月的最大日，则取当月最大日
tiannetDay = getMonthCount(tiannetYear,tiannetMonth);
}
}
//在个位数前加零
function addZero(value){
if(value < 10 ){
value = "0" + value;
}
return value;
}
//取出空格
function tiannetTrim(str) {
return str.replace(/(^\s*)|(\s*$)/g,"");
}
//为select创建一个option
function createOption(objSelect,value,text){
var option = document.createElement("OPTION");
option.value = value;
option.text = text;
objSelect.options.add(option);
}
//往前翻 Year
function tiannetPrevYear() {
if(tiannetYear > 999 && tiannetYear <10000){tiannetYear--;}
else{alert("年份超出范围（1000-9999）！");}
tiannetSetDay(tiannetYear,tiannetMonth);
//如果年份小于允许的最小年份，则创建对应的option
if( tiannetYear < tiannetYearSt ) {
tiannetYearSt = tiannetYear;
createOption(document.all.selTianYear,tiannetYear,tiannetYear + "年");
}
checkSelect(document.all.selTianYear,tiannetYear);
tiannetWriteHead();
}
//往后翻 Year
function tiannetNextYear() {
if(tiannetYear > 999 && tiannetYear <10000){tiannetYear++;}
else{alert("年份超出范围（1000-9999）！");return;}
tiannetSetDay(tiannetYear,tiannetMonth);
//如果年份超过允许的最大年份，则创建对应的option
if( tiannetYear > tiannetYearEnd ) {
tiannetYearEnd = tiannetYear;
createOption(document.all.selTianYear,tiannetYear,tiannetYear + "年");
}
checkSelect(document.all.selTianYear,tiannetYear);
tiannetWriteHead();
}
//选择今天
function tiannetToday() {
tiannetYear = tiannetDateNow.getFullYear();
tiannetMonth = tiannetDateNow.getMonth()+1;
tiannetDay = tiannetDateNow.getDate();
tiannetSetValue(true);
//tiannetSetDay(tiannetYear,tiannetMonth);
//selectObject();
}
//往前翻月份
function tiannetPrevMonth() {
if(tiannetMonth>1){tiannetMonth--}else{tiannetYear--;tiannetMonth=12;}
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth);
tiannetWriteHead();
}
//往后翻月份
function tiannetNextMonth() {
if(tiannetMonth==12){tiannetYear++;tiannetMonth=1}else{tiannetMonth++}
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth);
tiannetWriteHead();
}
//向span标签中写入年、月、时、分等数据
function tiannetWriteHead(){
document.all.tiannetYearHead.innerText = tiannetYear + "年";
document.all.tiannetMonthHead.innerText = tiannetMonth + "月";
if( m_bolShowHour ) document.all.tiannetHourHead.innerText = " "+tiannetHour + "时";
if( m_bolShowMinute ) document.all.tiannetMinuteHead.innerText = tiannetMinute + "分";
tiannetSetValue(false);//给文本框赋值，但不隐藏本控件
}
//设置显示天
function tiannetSetDay(yy,mm) {
setRealDayCount();//设置当月真实的日
tiannetWriteHead();
var strDateFont1 = "", strDateFont2 = "" //处理日期显示的风格
for (var i = 0; i < 37; i++){tiannetArrDay[i]=""}; //将显示框的内容全部清空
var day1 = 1;
var firstday = new Date(yy,mm-1,1).getDay(); //某月第一天的星期几
for (var i = firstday; day1 < getMonthCount(yy,mm)+1; i++){
tiannetArrDay[i]=day1;day1++;
}
//如果用于显示日的最后一行的第一个单元格的值为空，则隐藏整行。
//if(tiannetArrDay[35] == ""){
// document.all.trTiannetDay5.style.display = "none";
//} else {
// document.all.trTiannetDay5.style.display = "";
//}
for (var i = 0; i < 37; i++){
var da = eval("document.all.tdTiannetDay"+i) //书写新的一个月的日期星期排列
if (tiannetArrDay[i]!="") {
//判断是否为周末，如果是周末，则改为红色字体
if(i % 7 == 0 || (i+1) % 7 == 0){
strDateFont1 = "<font color=#f0000>"
strDateFont2 = "</font>"
} else {
strDateFont1 = "";
strDateFont2 = ""
}
da.innerHTML = strDateFont1 + tiannetArrDay[i] + strDateFont2;
//如果是当前选择的天，则改变颜色
if(tiannetArrDay[i] == tiannetDay ) {
da.style.backgroundColor = "#CCCCCC";
} else {
da.style.backgroundColor = "#EFEFEF";
}
da.style.cursor="hand"
} else {
da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"
}
}//end for
tiannetSetValue(false);//给文本框赋值，但不隐藏本控件
}//end function tiannetSetDay
//根据option的值选中option
function checkSelect(objSelect,selectValue) {
var count = parseInt(objSelect.length);
if( selectValue < 10 && selectValue.toString().length == 2) {
selectValue = selectValue.substring(1,2);
}
for(var i = 0;i < count;i ++){
if(objSelect.options[i].value == selectValue){
objSelect.selectedIndex = i;
break;
}
}//for
}
//选中年、月、时、分等下拉框
function selectObject(){
//如果年份小于允许的最小年份，则创建对应的option
if( tiannetYear < tiannetYearSt ) {
for( var i = tiannetYear;i < tiannetYearSt;i ++ ){
createOption(document.all.selTianYear,i,i + "年");
}
tiannetYearSt = tiannetYear;
}
//如果年份超过允许的最大年份，则创建对应的option
if( tiannetYear > tiannetYearEnd ) {
for( var i = tiannetYearEnd+1;i <= tiannetYear;i ++ ){
createOption(document.all.selTianYear,i,i + "年");
}
tiannetYearEnd = tiannetYear;
}
checkSelect(document.all.selTianYear,tiannetYear);
checkSelect(document.all.selTianMonth,tiannetMonth);
if( m_bolShowHour ) checkSelect(document.all.selTianHour,tiannetHour);
if( m_bolShowMinute ) checkSelect(document.all.selTianMinute,tiannetMinute);
}
//给接受日期时间的控件赋值
//参数bolHideControl - 是否隐藏控件
function tiannetSetValue(bolHideControl){
var value = "";
if( !tiannetDay || tiannetDay == "" ){
tiannetOutObject.value = value;
return;
}
var mm = tiannetMonth;
var day = tiannetDay;
if( mm < 10 && mm.toString().length == 1) mm = "0" + mm;
if( day < 10 && day.toString().length == 1) day = "0" + day;
value = tiannetYear + tiannetDateSplit + mm + tiannetDateSplit + day;
if( m_bolShowHour ){
var hour = tiannetHour;
if( hour < 10 && hour.toString().length == 1 ) hour = "0" + hour;
value += tiannetDateTimeSplit + hour;
}
if( m_bolShowMinute ){
var minute = tiannetMinute;
if( minute < 10 && minute.toString().length == 1 ) minute = "0" + minute;
value += tiannetTimeSplit + minute;
}
tiannetOutObject.value = value;
//document.all.divTiannetDate.style.display = "none";
if( bolHideControl ) {
tiannetHideControl();
}
}
//是否显示时间
function showTime(){
if( !m_bolShowHour && m_bolShowMinute){
alert("如果要选择分钟，则必须可以选择小时！");
return;
}
hideElementsById(new Array("tiannetHourHead","selTianHour","tiannetMinuteHead","selTianMinute"),true);
if( m_bolShowHour ){
//显示小时
hideElementsById(new Array("tiannetHourHead"),false);
}
if( m_bolShowMinute ){
//显示分钟
hideElementsById(new Array("tiannetMinuteHead"),false);
}
}
//弹出显示日历选择控件，以让用户选择
function tiannetPopCalendar(){
//隐藏下拉框，显示相对应的head
hideElementsById(new Array("selTianYear","selTianMonth","selTianHour","selTianMinute"),true);
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead","tiannetHourHead","tiannetMinuteHead"),false);
tiannetSetDay(tiannetYear,tiannetMonth);
tiannetWriteHead();
showTime();
var dads = document.all.divTiannetDate.style;
var iX, iY;
var h = document.all.divTiannetDate.offsetHeight;
var w = document.all.divTiannetDate.offsetWidth;
//计算left
if (window.event.x + h > document.body.offsetWidth - 10 )
iX = window.event.x - h - 5 ;
else
iX = window.event.x + 5;
if (iX <0)
iX=0;
//计算top
iY = window.event.y;
if (window.event.y + w > document.body.offsetHeight - 10 )
iY = document.body.scrollTop + document.body.offsetHeight - w - 5 ;
else
iY = document.body.scrollTop +window.event.y + 5;
if (iY <0)
iY=0;
dads.left = iX;
dads.top = iY;
tiannetShowControl();
selectObject();
}
//隐藏日历控件(同时显示被强制隐藏的标签)
function tiannetHideControl(){
document.all.divTiannetDate.style.display = "none";
tiannetShowObject();
arrTiannetHide = new Array();//将被隐藏的标签对象清空
}
//显示日历控件(同时隐藏会遮挡的标签)
function tiannetShowControl(){
document.all.divTiannetDate.style.display = "";
tiannetHideObject("Select");
tiannetHideObject("OBJECT");
}
//根据标签名称隐藏标签。如会遮住控件的select，object
function tiannetHideObject(strTagName) {
x = document.all.divTiannetDate.offsetLeft;
y = document.all.divTiannetDate.offsetTop;
h = document.all.divTiannetDate.offsetHeight;
w = document.all.divTiannetDate.offsetWidth;
for (var i = 0; i < document.all.tags(strTagName).length; i++)
{
var obj = document.all.tags(strTagName)[i];
if (! obj || ! obj.offsetParent)
continue;
// 获取元素对于BODY标记的相对坐标
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objHeight = obj.offsetHeight;
var objWidth = obj.offsetWidth;
var objParent = obj.offsetParent;
while (objParent.tagName.toUpperCase() != "BODY"){
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
//alert("控件左端:" + x + "select左端" + (objLeft + objWidth) + "控件底部:" + (y+h) + "select高:" + objTop);
var bolHide = true;
if( obj.style.display == "none" || obj.style.visibility == "hidden" || obj.getAttribute("Author") == "tiannet" ){
//如果标签本身就是隐藏的，则不需要再隐藏。如果是控件中的下拉框，也不用隐藏。
bolHide = false;
}
if( ( (objLeft + objWidth) > x && (y + h + 20) > objTop && (objTop+objHeight) > y && objLeft < (x+w) ) && bolHide ){
//arrTiannetHide.push(obj);//记录被隐藏的标签对象
arrTiannetHide[arrTiannetHide.length] = obj;
obj.style.visibility = "hidden";
}
}
}
//显示被隐藏的标签
function tiannetShowObject(){
for(var i = 0;i < arrTiannetHide.length;i ++){
//alert(arrTiannetHide[i]);
arrTiannetHide[i].style.visibility = "";
}
}
//初始化日期。
function tiannetInitDate(strDate){
var arr = strDate.split(tiannetDateSplit);
tiannetYear = arr[0];
tiannetMonth = arr[1];
tiannetDay = arr[2];
}
//清空
function tiannetClear(){
tiannetOutObject.value = "";
tiannetHideControl();
}
//任意点击时关闭该控件
function document.onclick(){
with(window.event.srcElement){
if (tagName != "INPUT" && getAttribute("Author") != "tiannet")
tiannetHideControl();
}
}
//按ESC键关闭该控件
function document.onkeypress(){
if( event.keyCode == 27 ){
tiannetHideControl();
}
}
</script>
</head>
<body>
(1)只选择日期 <input type="text" name="date" readOnly onClick="setDay(this);"><br/>
(2)选择日期和小时 <input type="text" name="dateh" readOnly onClick="setDayH(this);"><br/>
(3)选择日期和小时及分钟 <input type="text" name="datehm" readOnly onClick="setDayHM(this);">
</body>
</html>
event.srcElement
IE专有：取得当前点击的对象而不必传入参数，getAttribute用于取得自定义对象
<script>
function x()
{
alert(event.srcElement.getAttribute('dd'))
}
</script>
<div οnclick=x() dd='自定义值1'>【点我测试】</div>
//等效于下面的
<div οnclick=alert(this.getAttribute('dd')) dd='自定义值2'>【点我测试】</div>
document.all的意思是文档的所有元素，也就是说它包含了当前网页的所有元素。它是以数组的形式保存元素的属性的，所以我们可以用 document.all["元素名"].属性名="属性值"来动态改变元素的属性。用这条语句，可以做出许许多多动态网页效果，如：动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等。你简直可以动态控制所有网页元素。
<script language="JavaScript">
function cardClick(cardID){
var obj;
for (var i=1;i<7;i++){
obj=document.all("card"+i);
obj.style.backgroundColor="#3A6EA5";
obj.style.color="#FFFFFF";
}
obj=document.all("card"+cardID);
obj.style.backgroundColor="#FFFFFF";
obj.style.color="#3A6EA5";
for (var i=1;i<7;i++){
obj=document.all("content"+i);
obj.style.display="none";
}
obj=document.all("content"+cardID);
obj.style.display="";
}
</script>
* 15:42
* 浏览 (1314)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-12-08
缩略显示
ExtJS学习笔记 layout的9种样式风格总结
文章分类:Java编程
extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。
# [list] absolute
顾名思义，在容器内部，根据指定的坐标定位显示
# accordion
这个是最容易记的，手风琴效果
Ext.OnReady(function(){
var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
{
renderTo:'paneldiv',
title:'容器组件',
layout:'accordion',
width:500,
height:200,
layoutConfig:{animate:false},
items:[
{title:'元素1',html:''},
{title:'元素2',html:''},
{title:'元素3',html:''},
{title:'元素4',html:''}
]
}
);
});
# anchor
这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
Ext.onReady(function() {
var panel1 = new Ext.Panel({
title: "panel1",
height: 100,
anchor: '-50',
html: "高度等于100，宽度=容器宽度-50"
});
var panel2 = new Ext.Panel({
title: "panel2",
height: 100,
anchor: '50%',
html: "高度等于100,宽度=容器宽度的50%"
});
var panel3 = new Ext.Panel({
title: "panel3",
anchor: '-10, -250',
html: "宽度=容器宽度-10,高度=容器宽度-250"
});
var win = new Ext.Window({
title: "Anchor Layout",
height: 400,
width: 400,
plain: true,
layout: 'anchor',
items: [panel1, panel2,panel3]
});
win.show();
});
# border
将容器分为五个区域:east,south,west,north,center
Ext.onReady(function() {
var button = Ext.get('show-btn');
var win;
button.on('click', function() {
//创建TabPanel
var tabs = new Ext.TabPanel({
region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
margins: '3 3 3 0',
activeTab: 0,
defaults: {
autoScroll: true
},
items: [{
title: 'Bogus Tab',
html: "第一个Tab的内容."
}, {
title: 'Another Tab',
html: "我是另一个Tab"
}, {
title: 'Closable Tab',
html: "这是一个可以关闭的Tab",
closable: true
}]
});
//定义一个Panel
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west', //放在西边，即左侧
split: true,
width: 200,
collapsible: true, //允许伸缩
margins: '3 0 3 3',
cmargins: '3 3 3 3'
});
//如果窗口第一次被打开时才创建
if (!win) {
win = new Ext.Window({
title: 'Layout Window',
closable: true,
width: 600,
height: 350,
border : false,
plain: true,
layout: 'border',
closeAction:'hide',
items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
});
}
win.show(button);
});
});
# card
像安装向导一样，一张一张显示
Ext.onReady(function() {
var i = 0;
var navHandler = function(direction) {
if (direction == -1) {
i--;
if (i < 0) { i = 0; }
}
if (direction == 1) {
i++;
if (i > 2) { i = 2; return false; }
}
var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
if (i == 0) {
btnBack.disabled = true;
}
else {
btnBack.disabled = false;
}
if (i == 2) {
btnNext.value = "完成";
btnNext.disabled = true;
}
else {
btnNext.value = "下一步";
btnNext.disabled = false;
}
card.getLayout().setActiveItem(i);
};
var card = new Ext.Panel({
width: 200,
height: 200,
title: '注册向导',
layout: 'card',
activeItem: 0, // make sure the active item is set on the container config!
bodyStyle: 'padding:15px',
defaults: {
border: false
},
bbar: [
{
id: 'move-prev',
text: '上一步',
handler: navHandler.createDelegate(this, [-1])
},
'->',
{
id: 'move-next',
text: '下一步',
handler: navHandler.createDelegate(this, [1])
}
],
items: [{
id: 'card-0',
html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
}, {
id: 'card-1',
html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
}, {
id: 'card-2',
html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: "container"
});
});
# column
把整个容器看成一列,然后向容器放入子元素时
Ext.onReady(function() {
var win = new Ext.Window({
title: "Column Layout",
height: 300,
width: 400,
plain: true,
layout: 'column',
items: [{
title:"width=50%",
columnWidth:0.5,
html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
height:200
},
{
title:"width=250px",
width: 200,
height:100,
html:"固定宽度为250px"
}
]
});
win.show();
});
# fit
一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
Ext.OnReady(function(){
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'容器组件',
layout:'fit',
width:500,
height:100,
items:[
{title:'子元素1'},
{title:'子元素2'},
{title:'子元素3'},
{title:'子元素4'},
{title:'子元素5'}
]
}
);
});
# form
是一种专门用于管理表单中输入字段的布局
Ext.onReady(function() {
var win = new Ext.Window({
title: "form Layout",
height: 150,
width: 230,
plain: true,
bodyStyle: 'padding:15px',
items:
{
xtype: "form",
labelWidth: 30,
defaultType: "textfield",
frame:true,
items:
[
{
fieldLabel:"姓名",
name:"username",
allowBlank:false
},
{
fieldLabel:"呢称",
name:"nickname"
},
{
fieldLabel: "生日",
xtype:'datefield',
name: "birthday",
width:127
}
]
}
});
win.show();
});
# table
按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列
Ext.onReady(function(){
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'容器组件',
layout:'table',
width:500,
height:200,
layoutConfig:{columns:3},//将父容器分成3列
items:[
{title:'元素1',html:'ssssssssss',rowspan:2,height:100},
{title:'元素2',html:'dfffsddsdfsdf',colspan:2},
{title:'元素3',html:'sdfsdfsdf'},
{title:'元素4',html:''}
]
}
);
});
[/list] .
* 17:09
* 浏览 (14588)
* 评论 (4)
* 分类: JS
* 收藏Spinner
2008-12-05
缩略显示
ExtJS学习笔记二 Tree的Treepanel使用
文章分类:Java编程
最近学习extjs发现了一个问题，extjs是一个JavaScript的框架，属于前端页面上的，所有完全可以和后天的语言分离，大家在extjs的官方例子中可以看到都是html的格式。也就是说和后台结合的话也是按照某种方式传输数据，干什么又加上各种语言的各种框架。简单问题复杂化。
现在通过例子说明一下。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Virgo_S</title>
<link rel="stylesheet" type="text/css" href="extjs/ext-all.css"/>
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var Tree = Ext.tree;
//定义根节点的Loader
var treeloader=new Tree.TreeLoader({
dataUrl:'TreeServlet' //指定的URL
});
//异步加载根节点
var rootnode=new Tree.AsyncTreeNode({
id:'1',
text:'目录树根节点'
});
var treepanel = new Tree.TreePanel({
//renderTo:"tree_div",
//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
el:'tree', //填充区域
rootVisible:true, //隐藏根节点
border:true, //边框
animate:true, //动画效果
autoScroll:true, //自动滚动
enableDD:false, //节点是否可以拖拽
containerScroll:true,
//root:rotnode, //两种设置root节点的方法，
//一种配置root，另一种就是setRootNode
loader:treeloader
});
//设置根节点
//treepanel.setRootNode(rootnode);
//响应事件，传递node参数
treepanel.render();
rootnode.expand(false,false);
});
</script>
</head>
<body>
<div id="tree" style="height:500px;width:500px;"></div>
</body>
</html>
这里说明几点问题：
1.treepanel在render（渲染，呈现）之前一定要有root（根）节点。可以通过配置root属性和setRootNode方法来实现。
2.loader配置选项需要一个Ext.tree.TreeLoader的对象。
3.treeloader是通过一种懒方式，从指定的url加载treenode的子节点。这里要注意的地方就是，结合第一，二条，一定要有root节点，loader配置的treeloader对象加载的是treenode的子节点，所以一定要设置一个root节点
4.就是响应返回的是一个JavaScript数组，例如
[{
id: 1,
text: 'A leaf Node',
leaf: true
},{
id: 2,
text: 'A folder Node',
children: [{
id: 3,
text: 'A child Node',
leaf: true
}]
}]
我的后台是用Java写的一个servlet：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String str = "[{'cls':'folder','id':10,'leaf':false,'children':[{'cls':'file','id':11,'leaf':true,'children':null,'text':'S600'},{'cls':'file','id':12,'leaf':true,'children':null,'text':'SLK200'}],'text':'Benz'}]";
response.getWriter().write(str.toString());
}
静态树
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Virgo_S</title>
<link rel="stylesheet" type="text/css" href="extjs/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//定义树的跟节点
var root=new Ext.tree.TreeNode({
id:"root",//根节点id
text:"我是树根"
});
//定义树节点
var c1=new Ext.tree.TreeNode({
id:'c1',//子结点id
text:'大儿子'
});
var c2=new Ext.tree.TreeNode({
id:'c2',
text:'小儿子'
});
var c22=new Ext.tree.TreeNode({
id:'c22',
text:'大孙子'
});
root.appendChild(c1);//为根节点增加子结点c1
root.appendChild(c2);//为c1增加子节点c2，相信你已经找到规律了吧^_^
c1.appendChild(c22);//为c1增加子节点c22
//生成树形面板
var tree=new Ext.tree.TreePanel({
renderTo:"tree",
root:root,//定位到根节点
animate:true,//开启动画效果
enableDD:false,//不允许子节点拖动
border:false,//没有边框
rootVisible:false//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
});
});
</script>
</head>
<body>
<div id="tree" style="height: 500px; width: 500px;"></div>
</body>
</html>
* 11:04
* 浏览 (3842)
* 评论 (1)
* 分类: JS
* 收藏Spinner
2008-12-02
缩略显示
extjs学习资源
文章分类:Java编程
ExtJs官方网
http://www.extjs.com/
ExtJS我的程序人生
http://www.cnblogs.com/wenjl520/category/159631.html?Show=All
ExtJs中文站
http://www.ajaxjs.com/examples/
一起EXT论坛
http://www.17ext.com/
EXT新手建议
http://www.iteye.com/topic/179990
Meetrice EXT JS 编程资料馆
http://www.cnblogs.com/meetrice/category/137349.html
Justin Blog
http://blog.csdn.net/huoyanxueren/archive/2008/07.aspx
小肖的专栏
http://blog.csdn.net/impeller/category/361408.aspx
谦虚的天下
http://www.cnblogs.com/qianxudetianxia/tag/ExtJs2%ef%bf%a50/
小庄
http://www.cnblogs.com/xiaozhuang/archive/2007/12/07/987087.html
* 16:49
* 浏览 (402)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-12-02
缩略显示
extjs的Tooltips与QuickTips
文章分类:Java编程
ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的。
QuickTips代码示例：只需要加入Ext.QuickTips.init(); 就可以在html页面中使用。html页面 可以通过：
<input type="button" value="OK" ext:qtitle="Test" ext:qtip="Test Content!">
我们可以看到下面的效果：
你也可以自定义这些QuickTips的属性：
Ext.apply(Ext.QuickTips.getQuickTip(), {
//maxWidth: 200,
//minWidth: 100,
//showDelay: 50,
//trackMouse: true,
//hideDelay: true,
//closable: true,
//autoHide: false,
//draggable: true,
dismissDelay: 0
});
---------------这段代码测试不成功，请高手指点---------------------
Ext.ToolTip代码：
new Ext.ToolTip({
target: 'tip1',
html: 'test tooltip'
});
在html页面中加入：
<a id=tip1 href="">11</a>
就可以看到下面的效果：
可以通过ToolTip设置图层自动ajax加载页面，代码：
new Ext.ToolTip({
target: 'ajax-tip',
width: 200,
autoLoad: {url: 'test/1.jsp'}
});
在html页面中加入：
<a id=ajax-tip href="">ajaxtip</a>
就可以看到下面的效果：
打开的层可以关闭，代码：
new Ext.ToolTip({
target: 'close-tip',
html: 'test close',
title: 'test',
autoHide: false,
closable: true,
draggable:true
});
在html页面中加入：
<a id='close-tip href="">'closetip</a>
就可以看到下面的效果：
打开的层随鼠标移动，代码：
new Ext.ToolTip({
target: 'track-tip',
title: 'Mouse Track',
width:200,
html: 'This tip will follow the mouse while it is over the element',
trackMouse:true,
dismissDelay: 15000
});
在html页面中加入:
<a id=track-tip href="">tracktip</a>
就可以看到下面的效果：
转自：http://www.yangxinyong.com/blog/entry/2008_08_20_42_extjsjc-TooltipsyQuickTips.html
* 16:03
* 浏览 (1616)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-11-26
缩略显示
ExtJS学习笔记一 ExtJS开发环境的配置
文章分类:Java编程
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="../ExtJS/ext-lang-zh_CN.js"></script> //中文映射
三个基本引入文件。其中ext-all.css里面图片的默认路径是resources/images文件下的所有图片和文件夹。
ext-all.js是extjs的核心库。
开启ext自带的debug功能
把ext-all.js换成ext-all-debug.js就可以了。
Ext.log('这是测试');就可以了。
关于on的使用：
on('事件名称','函数')中的事件名称，就是帮助文档中所对应的事件名称。
adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js换成adapter /jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype- adapter.js等。
* ExtJS.rar (1.1 MB)
* 下载次数: 335
* Ext2.2docs.rar (2.4 MB)
* 下载次数: 63
* 11:03
* 浏览 (1372)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-10-28
缩略显示
自定义对象
关键字: 自定义对象 js
一，概述
在Java语言中，我们可以定义自己的类，并根据这些类创建对象来使用，在Javascript中，我们也可以定义自己的类，例如定义User类、Hashtable类等等。
目前在Javascript中，已经存在一些标准的类，例如Date、Array、RegExp、String、Math、Number等等，这为我们编程提供了许多方便。但对于复杂的客户端程序而言，这些还远远不够。
与Java不同，Java2提供给我们的标准类很多，基本上满足了我们的编程需求，但是Javascript提供的标准类很少，许多编程需求需要我们自己去实现，例如Javascript没有哈西表Hashtable，这样的话在处理键值方面就很不方便。
因此，我个人认为一个完整的Javascript对象视图应该如下：
二，基本概念
1，自定义对象。
根据JS的对象扩展机制，用户可以自定义JS对象，这与Java语言有类似的地方。
与自定义对象相对应的是JS标准对象，例如Date、Array、Math等等。
2，原型（prototype）
在JS中，这是一种创建对象属性和方法的方式，通过prototype可以为对象添加新的属性和方法。
通过prototype我们可以为JS标准对象添加新的属性和方法，例如对于String对象，我们可以为其添加一个新的方法trim（）。
与严格的编程语言（例如Java）不同，我们可以在运行期间为JS对象动态添加新的属性。
三，语法规则
1，对象创建方式
1）对象初始化器方式
格式：objectName = {property1:value1, property2:value2,…, propertyN:valueN}
property是对象的属性
value则是对象的值，值可以是字符串、数字或对象三者之一
例如： var user={name:“user1”,age:18}；
var user={name:“user1”,job:{salary:3000,title:programmer}
以这种方式也可以初始化对象的方法，例如：
var user={name:“user1”,age:18,getName:function(){
return this.name;
}
}
后面将以构造函数方式为重点进行讲解，包括属性和方法的定义等等，也针对构造函数的方式进行讲解。
2）构造函数方式
编写一个构造函数，并通过new方式来创建对象，构造函数本可以带有构造参数
例如：
function User(name,age){
this.name=name;
this.age=age;
this.canFly=false;
}
var use=new User();
2，定义对象属性
1）JS中可以为对象定义三种类型的属性：私有属性、实例属性和类属性，与Java类似，私有属性只能在对象内部使用，实例属性必须通过对象的实例进行引用，而类属性可以直接通过类名进行引用。
2）私有属性定义
私有属性只能在构造函数内部定义与使用。
语法格式：var propertyName=value；
例如：
function User(age){
this.age=age;
var isChild=age<12;
this.isLittleChild=isChild;
}
var user=new User(15);
alert(user.isLittleChild);//正确的方式
alert(user.isChild);//报错：对象不支持此属性或方法
3）实例属性定义，也存在两种方式：
prototype方式，语法格式：functionName.prototype.propertyName=value
this方式，语法格式：this.propertyName=value，注意后面例子中this使用的位置
上面中value可以是字符创、数字和对象。
例如：
function User(){ }
User.prototype.name=“user1”;
User.prototype.age=18;
var user=new User();
alert(user.age);
—————————————–
function User(name,age,job){
this.name=“user1”;
this.age=18;
this.job=job;
}
alert(user.age);
3）类属性定义
语法格式：functionName.propertyName=value
例如：
function User(){ }
User.MAX_AGE=200;
User.MIN_AGE=0;
alert(User.MAX_AGE);
参考JS标准对象的类属性：
Number.MAX_VALUE //最大数值 Math.PI //圆周率
4）对于属性的定义，除了上面较为正规的方式外，还有一种非常特别的定义方式，语法格式： obj[index]=value
例子：
function User(name){
this.name=name;
this.age=18;
this[1]=“ok”;
this[200]=“year”;
}
var user=new User(“user1”);
alert(user[1]);
在上面例子中，要注意：不同通过this[1]来获取age属性，也不能通过this[0]来获取name属性，即通过index方式定义的必须使用index方式来引用，而没有通过index方式定义的，必须以正常方式引用
3，定义对象方法
1）JS中可以为对象定义三种类型的方法：私有方法、实例方法和类方法，与Java类似：
私有方法只能在对象内部使用
实例方法必须在对象实例化后才能使用
类方法可以直接通过类名去使用
注意：方法的定义不能通过前面所说的index方式进行。
2）定义私有方法
私有方法必须在构造函数体内定义，而且只能在构造函数体内使用。
语法格式：function methodName(arg1,…,argN){ }
例如：
function User(name){
this.name=name;
function getNameLength(nameStr){
return nameStr.length;
}
this.nameLength=getNameLength(this.name);
}
3）定义实例方法，目前也可以使用两种方式：
prototype方式，在构造函数外使用，语法格式：
functionName.prototype.methodName=method;
或者
functionName.prototype.methodName=function(arg1,…,argN){};
this方式，在构造函数内部使用，语法格式：
this.methodName=method;
或者
this.methodName=function(arg1,…,argN){};
上面的语法描述中，method是外部已经存在的一个方法，methodName要定义的对象的方法，意思就是将外部的一个方法直接赋给对象的某个方法。
以function(arg1,…,argN){}的方式定义对象方法是开发人员应该掌握的。
定义实例方法的一些例子：例子1
function User(name){
this.name=name;
this.getName=getUserName;
this.setName=setUserName;
}
function getUserName(){
return this.name;
}
Function setUserName(name){
this.name=name;
}
定义实例方法的一些例子：例子2
function User(name){
this.name=name;
this.getName=function(){
return this.name;
};
this.setName=function(newName){
this.name=newName;
};
}
定义实例方法的一些例子：例子3
function User(name){
this.name=name;
}
User.prototype.getName=getUserName;
User.prototype.setName=setUserName();
function getUserName(){
return this.name;
}
Function setUserName(name){
this.name=name;
}
定义实例方法的一些例子：例子4
function User(name){
this.name=name;
}
User.prototype.getName=function(){
return this.name;
};
User.prototype.setName=function(newName){
this.name=newName;
};
4）定义类方法
类方法需要在构造函数外面定义，可以直接通过构造函数名对其进行引用。
语法格式：
functionName.methodName=method;
或者
functionName.methodName=function(arg1,…,argN){};
例子：
function User(name){
this.name=name;
}
User.getMaxAge=getUserMaxAge;
function getUserMaxAge(){
return 200;
}
或者
User.getMaxAge=function(){return 200;};
alert(User.getMaxAge());
4，属性与方法的引用
1）从可见性上说：
私有属性与方法，只能在对象内部引用。
实例属性与方法，可以在任何地方使用，但必须通过对象来引用。
类属性与方法，可以在任何地方使用，但不能通过对象的实例来引用（这与Java不同，在Java中静态成员可以通过实例来访问）。
2）从对象层次上说：
与Java bean的引用类似，可以进行深层次的引用。
几种方式：
简单属性：obj.propertyName
对象属性：obj.innerObj.propertyName
索引属性：obj.propertyName[index]
对于更深层次的引用与上面类似。
3）从定义方式上说：
通过index方式定义的属性，必须通过index方式才能引用。
通过非index方式定义的属性，必须通过
Ext官方中文教程列表
特别鸣谢：Ext中文站整理、维护
注意：转载文章,请保留原始链接和署名
我认为学习EXT开发最好的方法是，在真正开发之前，掌握好高级JavaScript知识，
就像鱼儿游在水里一样对JS运用自如。
自己可以创建JavaScript的类、明白类原型（class's prototype）的原理，
和明白函数的作用域都是有益的帮助。
明白Ajax为什么要异步方式也是其中的一个知识点。
论坛上50％所提出的问题很大原因是对JavaScript知识不牢固所至，而不是EXT API的问题。
当真正开始用EXT做开发了，那么安装目录下examples/*的文件夹超过70个例子便是研究的好对象，
这些例子为你展示了你日后将会使用的大多数技巧或方法。
接着，最好就是先拿examples/*的文件夹中例子练一练手，做一些简单、轻型的小项目。
如果直接拿EXT结合到程序去开发，很可能你会因为越来越复杂的问题泥足深陷。
把每一项的 知识点/技巧 都做成可单独运行文件，这样以便你以后参考，还有一个好处是，可以发到论坛上，然后我们放到examples/*的文件夹，以便我们的测试并协助你。
如果能按照以上的建议去做，我相信这是一个很好的累积。而且按照我的角度看，整个UI就是这样一点一点构建起来。
入门:
Tutorial:EXT简介
extjs.com/learn/Tutorial:Introduction_to_Ext_2.0_(Chinese)
Tutorial:Ext 2简述
[url]extjs.com/learn/Ext_2_Overview_(Chinese) [/url]
Tutorial:EXT新手建议
extjs.com/learn/Tutorial:EXT新手建议
Tutorial:怎么轻松地进入Ext的世界?
extjs.com/learn/Tutorial:Playing_With_Ext_The_Easy_Way_(Chinese)
Tutorial:Javascript中的作用域（scope）是什么?(一)
extjs.com/learn/Tutorial:What_is_that_Scope_all_about_(Chinese)
Tutorial:Javascript中的作用域（scope）是什么?(二)
extjs.com/learn/What_is_that_Scope_all_about2_(Chinese)
Manual:Ext源码概述
extjs.com/learn/Manual:Ext_Source_Overview_(Chinese)
Manual:Ext与RESTful Web Services
extjs.com/learn/Manual:RESTful_Web_Services_(Chinese)
程序设计:
Tutorial:如何合理地规划一个应用程序
extjs.com/learn/Tutorial:Application_Layout_for_Beginners_(Chinese)
Tutorial:如何本地化ext的教程
extjs.com/learn/Tutorial:Localizing_Ext_(Chinese)
Tutorial:xtype的含义
extjs.com/learn/Tutorial:Xtype_defined_(Chinese)
Tutorial:扩展Ext中的组件
extjs.com/learn/Manual:Component:Extending_Ext_Components(Chinese)
Tutorial:扩展与插件之间的区别
extjs.com/learn/Manual:Component:Extension_or_Plugin_zh-CN
Tutorial:Ext组件的复用
extjs.com/learn/Manual:Component:Extending_Ext_Components(Chinese)
Tutorial:从源码生成Ext
[url]extjs.com/learn/Tutorial:Building_Ext_From_Source_(Chinese)
[/url]基础用法:
Tutorial:DomQuery基础
extjs.com/learn/Tutorial:DomQuery_Basics(Chinese)
Tutorial:Ext中的事件
extjs.com/learn/Tutorial:Events_Explained_(Chinese)
Tutorial:简述模板
extjs.com/learn/Tutorial:Getting_Started_with_Templates_(Chinese)
Tutorial:模板（Templates）的函数
extjs.com/learn/Tutorial:Utilizing_Format_Features_of_Templates_(Chinese)
Manual:事件的处理
extjs.com/learn/Manual:Intro:Event_Handling_cn
Manual:Ext中的继承
extjs.com/learn/Manual:Intro:Inheritance_(Chinese)
Manual:Ext的类设计
extjs.com/learn/Manual:Intro:Class_Design_cn
Manual:Ajax通讯
extjs.com/learn/Manual:Core:Ext.Ajax_(Chinese)
Manual:JSON处理方法
extjs.com/learn/Manual:Core:Working_with_JSON_(Chinese)
Manual:函数的原型扩展
extjs.com/learn/Manual:Utilities:Function_(Chinese)
组件的使用:
Tutorial:Tab标签页
extjs.com/learn/Tutorial:TabPanel_Basics_(Chinese)
Tutorial:Ext 1.x中的布局
extjs.com/learn/Tutorial:Using_Layouts_with_Ext_-_Part_1_(Chinese)
Tutorial:Grid组件初学
extjs.com/learn/Tutorial:Beginning_Using_the_Grid_Component_(Chinese)
Tutorial:Grid的数据分页
extjs.com/learn/Tutorial:Basics_of_Paging_With_the_Grid_Component_(Chinese)
Tutorial:Ext菜单器件
extjs.com/learn/Tutorial:Ext_Menu_Widget_(Chinese)
Tutorial:表单组件初学
extjs.com/learn/Tutorial:Getting_Started_with_Forms_(Chinese)
Tutorial:表单组件初学(二)
extjs.com/learn/Tutorial:Loading_Data_Into_and_Submitting_a_Form_(Chinese)
Manual:Cookie的存储
extjs.com/learn/Manual:Core:State_(Chinese)
YUI-Ext(Ext前身)的相关文章
Tutorial:EXT新手建议：建立自己的工具箱（Toolkit）
extjs.com/learn/Tutorial:EXT新手建议
Tutorial:如何用YUI轻松做JavaScript动画
extjs.com/learn/Tutorial:如何用YUI轻松做JavaScript动画
Tutorial:轻松三步，搞掂内存泄漏
extjs.com/learn/Tutorial:轻松三步，搞掂内存泄漏
Tutorial:用YUI-EXT创建Ajax Feed-viewer
extjs.com/learn/Tutorial:用YUI-EXT创建Ajax_Feed-viewer
Tutorial:使用DomHelper 创建元素的DOM、HTML片断和模版
[url]extjs.com/learn/Tutorial:使用DomHelper 创建元素的DOM、HTML片断和模版[/url]
Tutorial:EXT设计模式初学习
extjs.com/learn/Tutorial:EXT设计模式初学习
Tutorial:预览 ：增强版的拖放和新增的TreePanel
extjs.com/learn/Tutorial:预览_：增强版的拖放和新增的TreePanel
Tutorial:创建一个可复用的AJAX对话框--一个完成好的例子
extjs.com/learn/Tutorial:创建一个可复用的AJAX对话框--一个完成好的例子
Tutorial:创建YUI的Grid
extjs.com/learn/Tutorial:创建YUI的Grid
Tutorial:Grid 调用远程数据
[url]extjs.com/learn/Tutorial:Grid 调用远程数据[/url]
Tutorial:为Yahoo! UI Extensions Grid增加内置的可编辑器
[url]extjs.com/learn/Tutorial:为Yahoo! UI Extensions Grid增加内置的可编辑器[/url]
Tutorial:Ext.MasterTemplates 入手
[url]extjs.com/learn/Tutorial:Ext.MasterTemplates 入手[/url]
Tutorial:像了解爱人一样了解ExtJs
extjs.com/learn/Tutorial:像了解爱人一样了解ExtJs
Tutorial:JSON和浏览器安全
extjs.com/learn/Tutorial:JSON和浏览器安全
Tutorial:JavaScript的一种模组模式
extjs.com/learn/Tutorial:JavaScript的一种模组模式
Tutorial:关于JavaScript的 貌似类（pseudo-classes）－－－－不吐不快
[url]extjs.com/learn/Tutorial:关于JavaScript的 貌似类（pseudo-classes）－－－－不吐不快 [/url]
Tutorial:Application Layout 程式開發入門介紹
[url]extjs.com/learn/Tutorial:Application Layout 程式開發入門介紹[/url]
Tutorial:如何建立一個可以Disable/Editable的Editor gird
[url]extjs.com/learn/Tutorial:如何建立一個可以Disable/Editable的Editor gird[/url]
* 09:56
* 浏览 (839)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-12-09
缩略显示
JavaScript实现双击编辑
关键字: javascript 双击编辑
其实就是元素的替代
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>无标题文档</title>
<style>
input.a {border:1px solid #fff;background:#fff;}
input.b {border:1px solid #369;background:#fff;}
</style>
</head>
<body>
<input type="text" id="test" readonly value="这里是标题" class="a" />
<input type="submit" id="submit" value="修改" style="display:none;" />
<input type="text" id="ttt" readOnly value="这里测试2" class="a"/>
<script type="text/javascript">
var test = document.getElementById("test");
var mysubmit = document.getElementById("submit");
test.ondblclick = function(){
this.readOnly = false;
this.className = "b";
mysubmit.style.display = "";
}
mysubmit.onclick = function(){
test.readOnly = true;
test.className = "a";
this.style.display = "none";
}
var ttt = document.getElementById("ttt");
ttt.ondblclick = function(){
this.readOnly = false;
this.className = "b";
}
ttt.onblur = function(){
this.readOnly = true;
this.className = "a";
}
</script>
</body></html>
* 19:20
* 浏览 (1089)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-12-09
缩略显示
JavaScript时间选择控件
关键字: javascript 时间 控件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="ProgId" content="VisualStudio.HTML">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<script language="javascript">
/**
*本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。
*tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。
*使用方法：
* (1)只选择日期 <input type="text" name="date" readOnly onClick="setDay(this);">
* (2)选择日期和小时 <input type="text" name="dateh" readOnly onClick="setDayH(this);">
* (3)选择日期和小时及分钟 <input type="text" name="datehm" readOnly onClick="setDayHM(this);">
*设置参数的方法
* (1)设置日期分隔符 setDateSplit(strSplit);默认为"-"
* (2)设置日期与时间之间的分隔符 setDateTimeSplit(strSplit);默认为" "
* (3)设置时间分隔符 setTimeSplit(strSplit);默认为":"
* (4)设置(1),(2),(3)中的分隔符 setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
* (5)设置开始和结束年份 setYearPeriod(intDateBeg,intDateEnd)
*说明：
* 默认返回的日期时间格式如同：2005-02-02 08:08
*/
//------------------ 样式定义 ---------------------------//
//功能按钮同样样式
var s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";
//翻年、月等的按钮
var s_tiannet_turn = "width:28px;" + s_tiannet_turn_base;
//关闭、清空等按钮样式
var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base;
//年选择下拉框
var s_tiannet_select = "width:64px;display:none;";
//月、时、分选择下拉框
var s_tiannet_select2 = "width:46px;display:none;";
//日期选择控件体的样式
var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +
"border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";
//显示日的td的样式
var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";
//字体样式
var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";
//链接的样式
var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";
//横线
var s_tiannet_line = "border-bottom:1 solid #6699CC";
//------------------ 变量定义 ---------------------------//
var tiannetYearSt = 1950;//可选择的开始年份
var tiannetYearEnd = 2010;//可选择的结束年份
var tiannetDateNow = new Date();
var tiannetYear = tiannetDateNow.getFullYear(); //定义年的变量的初始值
var tiannetMonth = tiannetDateNow.getMonth()+1; //定义月的变量的初始值
var tiannetDay = tiannetDateNow.getDate();
var tiannetHour = 8;//tiannetDateNow.getHours();
var tiannetMinute = 0;//tiannetDateNow.getMinutes();
var tiannetArrDay=new Array(42); //定义写日期的数组
var tiannetDateSplit = "-"; //日期的分隔符号
var tiannetDateTimeSplit = " "; //日期与时间之间的分隔符
var tiannetTimeSplit = ":"; //时间的分隔符号
var tiannetOutObject; //接收日期时间的对象
var arrTiannetHide = new Array();//被强制隐藏的标签
var m_bolShowHour = false;//是否显示小时
var m_bolShowMinute = false;//是否显示分钟
var m_aMonHead = new Array(12); //定义阳历中每个月的最大天数
m_aMonHead[0] = 31; m_aMonHead[1] = 28; m_aMonHead[2] = 31; m_aMonHead[3] = 30; m_aMonHead[4] = 31; m_aMonHead[5] = 30;
m_aMonHead[6] = 31; m_aMonHead[7] = 31; m_aMonHead[8] = 30; m_aMonHead[9] = 31; m_aMonHead[10] = 30; m_aMonHead[11] = 31;
// ---------------------- 用户可调用的函数 -----------------------------//
//用户主调函数－只选择日期
function setDay(obj){
tiannetOutObject = obj;
//如果标签中有值，则将日期初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue);
}
tiannetPopCalendar();
}
//用户主调函数－选择日期和小时
function setDayH(obj){
tiannetOutObject = obj;
m_bolShowHour = true;
//如果标签中有值，则将日期和小时初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(0,10));
var hour = strValue.substring(11,13);
if( hour < 10 ) tiannetHour = hour.substring(1,2);
}
tiannetPopCalendar();
}
//用户主调函数－选择日期和小时及分钟
function setDayHM(obj){
tiannetOutObject = obj;
m_bolShowHour = true;
m_bolShowMinute = true;
//如果标签中有值，则将日期和小时及分钟初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(0,10));
var time = strValue.substring(11,16);
var arr = time.split(tiannetTimeSplit);
tiannetHour = arr[0];
tiannetMinute = arr[1];
if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);
if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2);
}
tiannetPopCalendar();
}
//设置开始日期和结束日期
function setYearPeriod(intDateBeg,intDateEnd){
tiannetYearSt = intDateBeg;
tiannetYearEnd = intDateEnd;
}
//设置日期分隔符。默认为"-"
function setDateSplit(strDateSplit){
tiannetDateSplit = strDateSplit;
}
//设置日期与时间之间的分隔符。默认为" "
function setDateTimeSplit(strDateTimeSplit){
tiannetDateTimeSplit = strDateTimeSplit;
}
//设置时间分隔符。默认为":"
function setTimeSplit(strTimeSplit){
tiannetTimeSplit = strTimeSplit;
}
//设置分隔符
function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
tiannetDateSplit(strDateSplit);
tiannetDateTimeSplit(strDateTimeSplit);
tiannetTimeSplit(strTimeSplit);
}
//设置默认的日期。格式为：YYYY-MM-DD
function setDefaultDate(strDate){
tiannetYear = strDate.substring(0,4);
tiannetMonth = strDate.substring(5,7);
tiannetDay = strDate.substring(8,10);
}
//设置默认的时间。格式为：HH24:MI
function setDefaultTime(strTime){
tiannetHour = strTime.substring(0,2);
tiannetMinute = strTime.substring(3,5);
}
// ---------------------- end 用户可调用的函数 -----------------------------//
//------------------ begin 页面显示部分 ---------------------------//
var weekName = new Array("日","一","二","三","四","五","六");
document.write('<div id="divTiannetDate" style="'+s_tiannet_body+'" style="本日历选择控件由tiannet根据前人经验完善而成！">');
document.write('<div align="center" id="divTiannetDateText" Author="tiannet" style="padding-top:2px;">');
document.write('<span id="tiannetYearHead" Author="tiannet" style="'+s_tiannet_font+'" '+
'οnclick="spanYearCEvent();"> 年</span>');
document.write('<select id="selTianYear" style="'+s_tiannet_select+'" Author="tiannet" '+
' onChange="tiannetYear=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetYearHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=tiannetYearSt;i <= tiannetYearEnd;i ++){
document.writeln('<option value="' + i + '">' + i + '年</option>');
}
document.write('</select>');
document.write('<span id="tiannetMonthHead" Author="tiannet" style="'+s_tiannet_font+'" '+
'οnclick="spanMonthCEvent();"> 月</span>');
document.write('<select id="selTianMonth" style="'+s_tiannet_select2+'" Author="tiannet" '+
'onChange="tiannetMonth=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetMonthHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=1;i <= 12;i ++){
document.writeln('<option value="' + i + '">' + i + '月</option>');
}
document.write('</select>');
//document.write('</div>');
//document.write('<div align="center" id="divTiannetTimeText" Author="tiannet">');
document.write('<span id="tiannetHourHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
'οnclick="spanHourCEvent();"> 时</span>');
document.write('<select id="selTianHour" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
' onChange="tiannetHour=this.value;tiannetWriteHead();document.all.tiannetHourHead.style.display=\'\';' +
'this.style.display=\'none\';">');
for(var i=0;i <= 23;i ++){
document.writeln('<option value="' + i + '">' + i + '时</option>');
}
document.write('</select>');
document.write('<span id="tiannetMinuteHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
'οnclick="spanMinuteCEvent();"> 分</span>');
document.write('<select id="selTianMinute" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
' onChange="tiannetMinute=this.value;tiannetWriteHead();document.all.tiannetMinuteHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=0;i <= 59;i ++){
document.writeln('<option value="' + i + '">' + i + '分</option>');
}
document.write('</select>');
document.write('</div>');
//输出一条横线
document.write('<div style="'+s_tiannet_line+'"></div>');
document.write('<div align="center" id="divTiannetTurn" style="border:0;" Author="tiannet">');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="年↑" title="上一年" onClick="tiannetPrevYear();">');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="年↓" title="下一年" onClick="tiannetNextYear();"> ');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="月↑" title="上一月" onClick="tiannetPrevMonth();">');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="月↓" title="下一月" onClick="tiannetNextMonth();">');
document.write('</div>');
//输出一条横线
document.write('<div style="'+s_tiannet_line+'"></div>');
document.write('<table border=0 cellspacing=0 cellpadding=0 bgcolor=white onselectstart="return false">');
document.write(' <tr style="background-color:#2650A6;font-size:10pt;color:white;height:22px;" Author="tiannet">');
for(var i =0;i < weekName.length;i ++){
//输出星期
document.write('<td width="21" align="center" Author="tiannet">' + weekName[i] + '</td>');
}
document.write(' </tr>');
document.write('</table>');
//输出天的选择
document.write('<table border=0 cellspacing=1 cellpadding=0 bgcolor=white onselectstart="return false">');
var n = 0;
for (var i=0;i<5;i++) {
document.write (' <tr align=center id="trTiannetDay' + i + '" >');
for (var j=0;j<7;j++){
document.write('<td align="center" id="tdTiannetDay' + n + '" '+
'onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
n ++;
}
document.write (' </tr>');
}
document.write (' <tr align=center id="trTiannetDay5" >');
document.write('<td align="center" id="tdTiannetDay35" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
document.write('<td align="center" id="tdTiannetDay36" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
document.write('<td align="right" colspan="5"><a href="javascript:tiannetClear();" style="' + s_tiannet_link + '">清空</a>'+
' <a href="javascript:tiannetHideControl();" style="' + s_tiannet_link + '">关闭</a>' +
' <a href="javascript:tiannetSetValue(true);" style="' + s_tiannet_link + '">确定</a> ' +
'</td>');
document.write (' </tr>');
document.write('</table>');
document.write('</div>');
//------------------ end 页面显示部分 ---------------------------//
//------------------ 显示日期时间的span标签响应事件 ---------------------------//
//单击年份span标签响应
function spanYearCEvent(){
hideElementsById(new Array("selTianYear","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetYearHead","selTianMonth","selTianHour","selTianMinute"),true);
}
//单击月份span标签响应
function spanMonthCEvent(){
hideElementsById(new Array("selTianMonth","tiannetYearHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetMonthHead","selTianYear","selTianHour","selTianMinute"),true);
}
//单击小时span标签响应
function spanHourCEvent(){
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("selTianHour"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetHourHead","selTianYear","selTianMonth","selTianMinute"),true);
}
//单击分钟span标签响应
function spanMinuteCEvent(){
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("selTianMinute"),false);
hideElementsById(new Array("tiannetMinuteHead","selTianYear","selTianMonth","selTianHour"),true);
}
//根据标签id隐藏或显示标签
function hideElementsById(arrId,bolHide){
var strDisplay = "";
if(bolHide) strDisplay = "none";
for(var i = 0;i < arrId.length;i ++){
var obj = document.getElementById(arrId[i]);
obj.style.display = strDisplay;
}
}
//------------------ end 显示日期时间的span标签响应事件 ---------------------------//
//判断某年是否为闰年
function isPinYear(year){
var bolRet = false;
if (0==year%4&&((year%100!=0)||(year%400==0))) {
bolRet = true;
}
return bolRet;
}
//得到一个月的天数，闰年为29天
function getMonthCount(year,month){
var c=m_aMonHead[month-1];
if((month==2)&&isPinYear(year)) c++;
return c;
}
//重新设置当前的日。主要是防止在翻年、翻月时，当前日大于当月的最大日
function setRealDayCount() {
if( tiannetDay > getMonthCount(tiannetYear,tiannetMonth) ) {
//如果当前的日大于当月的最大日，则取当月最大日
tiannetDay = getMonthCount(tiannetYear,tiannetMonth);
}
}
//在个位数前加零
function addZero(value){
if(value < 10 ){
value = "0" + value;
}
return value;
}
//取出空格
function tiannetTrim(str) {
return str.replace(/(^\s*)|(\s*$)/g,"");
}
//为select创建一个option
function createOption(objSelect,value,text){
var option = document.createElement("OPTION");
option.value = value;
option.text = text;
objSelect.options.add(option);
}
//往前翻 Year
function tiannetPrevYear() {
if(tiannetYear > 999 && tiannetYear <10000){tiannetYear--;}
else{alert("年份超出范围（1000-9999）！");}
tiannetSetDay(tiannetYear,tiannetMonth);
//如果年份小于允许的最小年份，则创建对应的option
if( tiannetYear < tiannetYearSt ) {
tiannetYearSt = tiannetYear;
createOption(document.all.selTianYear,tiannetYear,tiannetYear + "年");
}
checkSelect(document.all.selTianYear,tiannetYear);
tiannetWriteHead();
}
//往后翻 Year
function tiannetNextYear() {
if(tiannetYear > 999 && tiannetYear <10000){tiannetYear++;}
else{alert("年份超出范围（1000-9999）！");return;}
tiannetSetDay(tiannetYear,tiannetMonth);
//如果年份超过允许的最大年份，则创建对应的option
if( tiannetYear > tiannetYearEnd ) {
tiannetYearEnd = tiannetYear;
createOption(document.all.selTianYear,tiannetYear,tiannetYear + "年");
}
checkSelect(document.all.selTianYear,tiannetYear);
tiannetWriteHead();
}
//选择今天
function tiannetToday() {
tiannetYear = tiannetDateNow.getFullYear();
tiannetMonth = tiannetDateNow.getMonth()+1;
tiannetDay = tiannetDateNow.getDate();
tiannetSetValue(true);
//tiannetSetDay(tiannetYear,tiannetMonth);
//selectObject();
}
//往前翻月份
function tiannetPrevMonth() {
if(tiannetMonth>1){tiannetMonth--}else{tiannetYear--;tiannetMonth=12;}
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth);
tiannetWriteHead();
}
//往后翻月份
function tiannetNextMonth() {
if(tiannetMonth==12){tiannetYear++;tiannetMonth=1}else{tiannetMonth++}
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth);
tiannetWriteHead();
}
//向span标签中写入年、月、时、分等数据
function tiannetWriteHead(){
document.all.tiannetYearHead.innerText = tiannetYear + "年";
document.all.tiannetMonthHead.innerText = tiannetMonth + "月";
if( m_bolShowHour ) document.all.tiannetHourHead.innerText = " "+tiannetHour + "时";
if( m_bolShowMinute ) document.all.tiannetMinuteHead.innerText = tiannetMinute + "分";
tiannetSetValue(false);//给文本框赋值，但不隐藏本控件
}
//设置显示天
function tiannetSetDay(yy,mm) {
setRealDayCount();//设置当月真实的日
tiannetWriteHead();
var strDateFont1 = "", strDateFont2 = "" //处理日期显示的风格
for (var i = 0; i < 37; i++){tiannetArrDay[i]=""}; //将显示框的内容全部清空
var day1 = 1;
var firstday = new Date(yy,mm-1,1).getDay(); //某月第一天的星期几
for (var i = firstday; day1 < getMonthCount(yy,mm)+1; i++){
tiannetArrDay[i]=day1;day1++;
}
//如果用于显示日的最后一行的第一个单元格的值为空，则隐藏整行。
//if(tiannetArrDay[35] == ""){
// document.all.trTiannetDay5.style.display = "none";
//} else {
// document.all.trTiannetDay5.style.display = "";
//}
for (var i = 0; i < 37; i++){
var da = eval("document.all.tdTiannetDay"+i) //书写新的一个月的日期星期排列
if (tiannetArrDay[i]!="") {
//判断是否为周末，如果是周末，则改为红色字体
if(i % 7 == 0 || (i+1) % 7 == 0){
strDateFont1 = "<font color=#f0000>"
strDateFont2 = "</font>"
} else {
strDateFont1 = "";
strDateFont2 = ""
}
da.innerHTML = strDateFont1 + tiannetArrDay[i] + strDateFont2;
//如果是当前选择的天，则改变颜色
if(tiannetArrDay[i] == tiannetDay ) {
da.style.backgroundColor = "#CCCCCC";
} else {
da.style.backgroundColor = "#EFEFEF";
}
da.style.cursor="hand"
} else {
da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"
}
}//end for
tiannetSetValue(false);//给文本框赋值，但不隐藏本控件
}//end function tiannetSetDay
//根据option的值选中option
function checkSelect(objSelect,selectValue) {
var count = parseInt(objSelect.length);
if( selectValue < 10 && selectValue.toString().length == 2) {
selectValue = selectValue.substring(1,2);
}
for(var i = 0;i < count;i ++){
if(objSelect.options[i].value == selectValue){
objSelect.selectedIndex = i;
break;
}
}//for
}
//选中年、月、时、分等下拉框
function selectObject(){
//如果年份小于允许的最小年份，则创建对应的option
if( tiannetYear < tiannetYearSt ) {
for( var i = tiannetYear;i < tiannetYearSt;i ++ ){
createOption(document.all.selTianYear,i,i + "年");
}
tiannetYearSt = tiannetYear;
}
//如果年份超过允许的最大年份，则创建对应的option
if( tiannetYear > tiannetYearEnd ) {
for( var i = tiannetYearEnd+1;i <= tiannetYear;i ++ ){
createOption(document.all.selTianYear,i,i + "年");
}
tiannetYearEnd = tiannetYear;
}
checkSelect(document.all.selTianYear,tiannetYear);
checkSelect(document.all.selTianMonth,tiannetMonth);
if( m_bolShowHour ) checkSelect(document.all.selTianHour,tiannetHour);
if( m_bolShowMinute ) checkSelect(document.all.selTianMinute,tiannetMinute);
}
//给接受日期时间的控件赋值
//参数bolHideControl - 是否隐藏控件
function tiannetSetValue(bolHideControl){
var value = "";
if( !tiannetDay || tiannetDay == "" ){
tiannetOutObject.value = value;
return;
}
var mm = tiannetMonth;
var day = tiannetDay;
if( mm < 10 && mm.toString().length == 1) mm = "0" + mm;
if( day < 10 && day.toString().length == 1) day = "0" + day;
value = tiannetYear + tiannetDateSplit + mm + tiannetDateSplit + day;
if( m_bolShowHour ){
var hour = tiannetHour;
if( hour < 10 && hour.toString().length == 1 ) hour = "0" + hour;
value += tiannetDateTimeSplit + hour;
}
if( m_bolShowMinute ){
var minute = tiannetMinute;
if( minute < 10 && minute.toString().length == 1 ) minute = "0" + minute;
value += tiannetTimeSplit + minute;
}
tiannetOutObject.value = value;
//document.all.divTiannetDate.style.display = "none";
if( bolHideControl ) {
tiannetHideControl();
}
}
//是否显示时间
function showTime(){
if( !m_bolShowHour && m_bolShowMinute){
alert("如果要选择分钟，则必须可以选择小时！");
return;
}
hideElementsById(new Array("tiannetHourHead","selTianHour","tiannetMinuteHead","selTianMinute"),true);
if( m_bolShowHour ){
//显示小时
hideElementsById(new Array("tiannetHourHead"),false);
}
if( m_bolShowMinute ){
//显示分钟
hideElementsById(new Array("tiannetMinuteHead"),false);
}
}
//弹出显示日历选择控件，以让用户选择
function tiannetPopCalendar(){
//隐藏下拉框，显示相对应的head
hideElementsById(new Array("selTianYear","selTianMonth","selTianHour","selTianMinute"),true);
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead","tiannetHourHead","tiannetMinuteHead"),false);
tiannetSetDay(tiannetYear,tiannetMonth);
tiannetWriteHead();
showTime();
var dads = document.all.divTiannetDate.style;
var iX, iY;
var h = document.all.divTiannetDate.offsetHeight;
var w = document.all.divTiannetDate.offsetWidth;
//计算left
if (window.event.x + h > document.body.offsetWidth - 10 )
iX = window.event.x - h - 5 ;
else
iX = window.event.x + 5;
if (iX <0)
iX=0;
//计算top
iY = window.event.y;
if (window.event.y + w > document.body.offsetHeight - 10 )
iY = document.body.scrollTop + document.body.offsetHeight - w - 5 ;
else
iY = document.body.scrollTop +window.event.y + 5;
if (iY <0)
iY=0;
dads.left = iX;
dads.top = iY;
tiannetShowControl();
selectObject();
}
//隐藏日历控件(同时显示被强制隐藏的标签)
function tiannetHideControl(){
document.all.divTiannetDate.style.display = "none";
tiannetShowObject();
arrTiannetHide = new Array();//将被隐藏的标签对象清空
}
//显示日历控件(同时隐藏会遮挡的标签)
function tiannetShowControl(){
document.all.divTiannetDate.style.display = "";
tiannetHideObject("Select");
tiannetHideObject("OBJECT");
}
//根据标签名称隐藏标签。如会遮住控件的select，object
function tiannetHideObject(strTagName) {
x = document.all.divTiannetDate.offsetLeft;
y = document.all.divTiannetDate.offsetTop;
h = document.all.divTiannetDate.offsetHeight;
w = document.all.divTiannetDate.offsetWidth;
for (var i = 0; i < document.all.tags(strTagName).length; i++)
{
var obj = document.all.tags(strTagName)[i];
if (! obj || ! obj.offsetParent)
continue;
// 获取元素对于BODY标记的相对坐标
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objHeight = obj.offsetHeight;
var objWidth = obj.offsetWidth;
var objParent = obj.offsetParent;
while (objParent.tagName.toUpperCase() != "BODY"){
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
//alert("控件左端:" + x + "select左端" + (objLeft + objWidth) + "控件底部:" + (y+h) + "select高:" + objTop);
var bolHide = true;
if( obj.style.display == "none" || obj.style.visibility == "hidden" || obj.getAttribute("Author") == "tiannet" ){
//如果标签本身就是隐藏的，则不需要再隐藏。如果是控件中的下拉框，也不用隐藏。
bolHide = false;
}
if( ( (objLeft + objWidth) > x && (y + h + 20) > objTop && (objTop+objHeight) > y && objLeft < (x+w) ) && bolHide ){
//arrTiannetHide.push(obj);//记录被隐藏的标签对象
arrTiannetHide[arrTiannetHide.length] = obj;
obj.style.visibility = "hidden";
}
}
}
//显示被隐藏的标签
function tiannetShowObject(){
for(var i = 0;i < arrTiannetHide.length;i ++){
//alert(arrTiannetHide[i]);
arrTiannetHide[i].style.visibility = "";
}
}
//初始化日期。
function tiannetInitDate(strDate){
var arr = strDate.split(tiannetDateSplit);
tiannetYear = arr[0];
tiannetMonth = arr[1];
tiannetDay = arr[2];
}
//清空
function tiannetClear(){
tiannetOutObject.value = "";
tiannetHideControl();
}
//任意点击时关闭该控件
function document.onclick(){
with(window.event.srcElement){
if (tagName != "INPUT" && getAttribute("Author") != "tiannet")
tiannetHideControl();
}
}
//按ESC键关闭该控件
function document.onkeypress(){
if( event.keyCode == 27 ){
tiannetHideControl();
}
}
</script>
</head>
<body>
(1)只选择日期 <input type="text" name="date" readOnly onClick="setDay(this);"><br/>
(2)选择日期和小时 <input type="text" name="dateh" readOnly onClick="setDayH(this);"><br/>
(3)选择日期和小时及分钟 <input type="text" name="datehm" readOnly onClick="setDayHM(this);">
</body>
</html>
event.srcElement
IE专有：取得当前点击的对象而不必传入参数，getAttribute用于取得自定义对象
<script>
function x()
{
alert(event.srcElement.getAttribute('dd'))
}
</script>
<div οnclick=x() dd='自定义值1'>【点我测试】</div>
//等效于下面的
<div οnclick=alert(this.getAttribute('dd')) dd='自定义值2'>【点我测试】</div>
document.all的意思是文档的所有元素，也就是说它包含了当前网页的所有元素。它是以数组的形式保存元素的属性的，所以我们可以用 document.all["元素名"].属性名="属性值"来动态改变元素的属性。用这条语句，可以做出许许多多动态网页效果，如：动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等。你简直可以动态控制所有网页元素。
<script language="JavaScript">
function cardClick(cardID){
var obj;
for (var i=1;i<7;i++){
obj=document.all("card"+i);
obj.style.backgroundColor="#3A6EA5";
obj.style.color="#FFFFFF";
}
obj=document.all("card"+cardID);
obj.style.backgroundColor="#FFFFFF";
obj.style.color="#3A6EA5";
for (var i=1;i<7;i++){
obj=document.all("content"+i);
obj.style.display="none";
}
obj=document.all("content"+cardID);
obj.style.display="";
}
</script>
* 15:42
* 浏览 (1314)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-12-08
缩略显示
ExtJS学习笔记 layout的9种样式风格总结
文章分类:Java编程
extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。
# [list] absolute
顾名思义，在容器内部，根据指定的坐标定位显示
# accordion
这个是最容易记的，手风琴效果
Ext.OnReady(function(){
var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
{
renderTo:'paneldiv',
title:'容器组件',
layout:'accordion',
width:500,
height:200,
layoutConfig:{animate:false},
items:[
{title:'元素1',html:''},
{title:'元素2',html:''},
{title:'元素3',html:''},
{title:'元素4',html:''}
]
}
);
});
# anchor
这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
Ext.onReady(function() {
var panel1 = new Ext.Panel({
title: "panel1",
height: 100,
anchor: '-50',
html: "高度等于100，宽度=容器宽度-50"
});
var panel2 = new Ext.Panel({
title: "panel2",
height: 100,
anchor: '50%',
html: "高度等于100,宽度=容器宽度的50%"
});
var panel3 = new Ext.Panel({
title: "panel3",
anchor: '-10, -250',
html: "宽度=容器宽度-10,高度=容器宽度-250"
});
var win = new Ext.Window({
title: "Anchor Layout",
height: 400,
width: 400,
plain: true,
layout: 'anchor',
items: [panel1, panel2,panel3]
});
win.show();
});
# border
将容器分为五个区域:east,south,west,north,center
Ext.onReady(function() {
var button = Ext.get('show-btn');
var win;
button.on('click', function() {
//创建TabPanel
var tabs = new Ext.TabPanel({
region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
margins: '3 3 3 0',
activeTab: 0,
defaults: {
autoScroll: true
},
items: [{
title: 'Bogus Tab',
html: "第一个Tab的内容."
}, {
title: 'Another Tab',
html: "我是另一个Tab"
}, {
title: 'Closable Tab',
html: "这是一个可以关闭的Tab",
closable: true
}]
});
//定义一个Panel
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west', //放在西边，即左侧
split: true,
width: 200,
collapsible: true, //允许伸缩
margins: '3 0 3 3',
cmargins: '3 3 3 3'
});
//如果窗口第一次被打开时才创建
if (!win) {
win = new Ext.Window({
title: 'Layout Window',
closable: true,
width: 600,
height: 350,
border : false,
plain: true,
layout: 'border',
closeAction:'hide',
items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
});
}
win.show(button);
});
});
# card
像安装向导一样，一张一张显示
Ext.onReady(function() {
var i = 0;
var navHandler = function(direction) {
if (direction == -1) {
i--;
if (i < 0) { i = 0; }
}
if (direction == 1) {
i++;
if (i > 2) { i = 2; return false; }
}
var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
if (i == 0) {
btnBack.disabled = true;
}
else {
btnBack.disabled = false;
}
if (i == 2) {
btnNext.value = "完成";
btnNext.disabled = true;
}
else {
btnNext.value = "下一步";
btnNext.disabled = false;
}
card.getLayout().setActiveItem(i);
};
var card = new Ext.Panel({
width: 200,
height: 200,
title: '注册向导',
layout: 'card',
activeItem: 0, // make sure the active item is set on the container config!
bodyStyle: 'padding:15px',
defaults: {
border: false
},
bbar: [
{
id: 'move-prev',
text: '上一步',
handler: navHandler.createDelegate(this, [-1])
},
'->',
{
id: 'move-next',
text: '下一步',
handler: navHandler.createDelegate(this, [1])
}
],
items: [{
id: 'card-0',
html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
}, {
id: 'card-1',
html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
}, {
id: 'card-2',
html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: "container"
});
});
# column
把整个容器看成一列,然后向容器放入子元素时
Ext.onReady(function() {
var win = new Ext.Window({
title: "Column Layout",
height: 300,
width: 400,
plain: true,
layout: 'column',
items: [{
title:"width=50%",
columnWidth:0.5,
html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
height:200
},
{
title:"width=250px",
width: 200,
height:100,
html:"固定宽度为250px"
}
]
});
win.show();
});
# fit
一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
Ext.OnReady(function(){
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'容器组件',
layout:'fit',
width:500,
height:100,
items:[
{title:'子元素1'},
{title:'子元素2'},
{title:'子元素3'},
{title:'子元素4'},
{title:'子元素5'}
]
}
);
});
# form
是一种专门用于管理表单中输入字段的布局
Ext.onReady(function() {
var win = new Ext.Window({
title: "form Layout",
height: 150,
width: 230,
plain: true,
bodyStyle: 'padding:15px',
items:
{
xtype: "form",
labelWidth: 30,
defaultType: "textfield",
frame:true,
items:
[
{
fieldLabel:"姓名",
name:"username",
allowBlank:false
},
{
fieldLabel:"呢称",
name:"nickname"
},
{
fieldLabel: "生日",
xtype:'datefield',
name: "birthday",
width:127
}
]
}
});
win.show();
});
# table
按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列
Ext.onReady(function(){
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'容器组件',
layout:'table',
width:500,
height:200,
layoutConfig:{columns:3},//将父容器分成3列
items:[
{title:'元素1',html:'ssssssssss',rowspan:2,height:100},
{title:'元素2',html:'dfffsddsdfsdf',colspan:2},
{title:'元素3',html:'sdfsdfsdf'},
{title:'元素4',html:''}
]
}
);
});
[/list] .
* 17:09
* 浏览 (14588)
* 评论 (4)
* 分类: JS
* 收藏Spinner
2008-12-05
缩略显示
ExtJS学习笔记二 Tree的Treepanel使用
文章分类:Java编程
最近学习extjs发现了一个问题，extjs是一个JavaScript的框架，属于前端页面上的，所有完全可以和后天的语言分离，大家在extjs的官方例子中可以看到都是html的格式。也就是说和后台结合的话也是按照某种方式传输数据，干什么又加上各种语言的各种框架。简单问题复杂化。
现在通过例子说明一下。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Virgo_S</title>
<link rel="stylesheet" type="text/css" href="extjs/ext-all.css"/>
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var Tree = Ext.tree;
//定义根节点的Loader
var treeloader=new Tree.TreeLoader({
dataUrl:'TreeServlet' //指定的URL
});
//异步加载根节点
var rootnode=new Tree.AsyncTreeNode({
id:'1',
text:'目录树根节点'
});
var treepanel = new Tree.TreePanel({
//renderTo:"tree_div",
//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
el:'tree', //填充区域
rootVisible:true, //隐藏根节点
border:true, //边框
animate:true, //动画效果
autoScroll:true, //自动滚动
enableDD:false, //节点是否可以拖拽
containerScroll:true,
//root:rotnode, //两种设置root节点的方法，
//一种配置root，另一种就是setRootNode
loader:treeloader
});
//设置根节点
//treepanel.setRootNode(rootnode);
//响应事件，传递node参数
treepanel.render();
rootnode.expand(false,false);
});
</script>
</head>
<body>
<div id="tree" style="height:500px;width:500px;"></div>
</body>
</html>
这里说明几点问题：
1.treepanel在render（渲染，呈现）之前一定要有root（根）节点。可以通过配置root属性和setRootNode方法来实现。
2.loader配置选项需要一个Ext.tree.TreeLoader的对象。
3.treeloader是通过一种懒方式，从指定的url加载treenode的子节点。这里要注意的地方就是，结合第一，二条，一定要有root节点，loader配置的treeloader对象加载的是treenode的子节点，所以一定要设置一个root节点
4.就是响应返回的是一个JavaScript数组，例如
[{
id: 1,
text: 'A leaf Node',
leaf: true
},{
id: 2,
text: 'A folder Node',
children: [{
id: 3,
text: 'A child Node',
leaf: true
}]
}]
我的后台是用Java写的一个servlet：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String str = "[{'cls':'folder','id':10,'leaf':false,'children':[{'cls':'file','id':11,'leaf':true,'children':null,'text':'S600'},{'cls':'file','id':12,'leaf':true,'children':null,'text':'SLK200'}],'text':'Benz'}]";
response.getWriter().write(str.toString());
}
静态树
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Virgo_S</title>
<link rel="stylesheet" type="text/css" href="extjs/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//定义树的跟节点
var root=new Ext.tree.TreeNode({
id:"root",//根节点id
text:"我是树根"
});
//定义树节点
var c1=new Ext.tree.TreeNode({
id:'c1',//子结点id
text:'大儿子'
});
var c2=new Ext.tree.TreeNode({
id:'c2',
text:'小儿子'
});
var c22=new Ext.tree.TreeNode({
id:'c22',
text:'大孙子'
});
root.appendChild(c1);//为根节点增加子结点c1
root.appendChild(c2);//为c1增加子节点c2，相信你已经找到规律了吧^_^
c1.appendChild(c22);//为c1增加子节点c22
//生成树形面板
var tree=new Ext.tree.TreePanel({
renderTo:"tree",
root:root,//定位到根节点
animate:true,//开启动画效果
enableDD:false,//不允许子节点拖动
border:false,//没有边框
rootVisible:false//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
});
});
</script>
</head>
<body>
<div id="tree" style="height: 500px; width: 500px;"></div>
</body>
</html>
* 11:04
* 浏览 (3842)
* 评论 (1)
* 分类: JS
* 收藏Spinner
2008-12-02
缩略显示
extjs学习资源
文章分类:Java编程
ExtJs官方网
http://www.extjs.com/
ExtJS我的程序人生
http://www.cnblogs.com/wenjl520/category/159631.html?Show=All
ExtJs中文站
http://www.ajaxjs.com/examples/
一起EXT论坛
http://www.17ext.com/
EXT新手建议
http://www.iteye.com/topic/179990
Meetrice EXT JS 编程资料馆
http://www.cnblogs.com/meetrice/category/137349.html
Justin Blog
http://blog.csdn.net/huoyanxueren/archive/2008/07.aspx
小肖的专栏
http://blog.csdn.net/impeller/category/361408.aspx
谦虚的天下
http://www.cnblogs.com/qianxudetianxia/tag/ExtJs2%ef%bf%a50/
小庄
http://www.cnblogs.com/xiaozhuang/archive/2007/12/07/987087.html
* 16:49
* 浏览 (402)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-12-02
缩略显示
extjs的Tooltips与QuickTips
文章分类:Java编程
ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的。
QuickTips代码示例：只需要加入Ext.QuickTips.init(); 就可以在html页面中使用。html页面 可以通过：
<input type="button" value="OK" ext:qtitle="Test" ext:qtip="Test Content!">
我们可以看到下面的效果：
你也可以自定义这些QuickTips的属性：
Ext.apply(Ext.QuickTips.getQuickTip(), {
//maxWidth: 200,
//minWidth: 100,
//showDelay: 50,
//trackMouse: true,
//hideDelay: true,
//closable: true,
//autoHide: false,
//draggable: true,
dismissDelay: 0
});
---------------这段代码测试不成功，请高手指点---------------------
Ext.ToolTip代码：
new Ext.ToolTip({
target: 'tip1',
html: 'test tooltip'
});
在html页面中加入：
<a id=tip1 href="">11</a>
就可以看到下面的效果：
可以通过ToolTip设置图层自动ajax加载页面，代码：
new Ext.ToolTip({
target: 'ajax-tip',
width: 200,
autoLoad: {url: 'test/1.jsp'}
});
在html页面中加入：
<a id=ajax-tip href="">ajaxtip</a>
就可以看到下面的效果：
打开的层可以关闭，代码：
new Ext.ToolTip({
target: 'close-tip',
html: 'test close',
title: 'test',
autoHide: false,
closable: true,
draggable:true
});
在html页面中加入：
<a id='close-tip href="">'closetip</a>
就可以看到下面的效果：
打开的层随鼠标移动，代码：
new Ext.ToolTip({
target: 'track-tip',
title: 'Mouse Track',
width:200,
html: 'This tip will follow the mouse while it is over the element',
trackMouse:true,
dismissDelay: 15000
});
在html页面中加入:
<a id=track-tip href="">tracktip</a>
就可以看到下面的效果：
转自：http://www.yangxinyong.com/blog/entry/2008_08_20_42_extjsjc-TooltipsyQuickTips.html
* 16:03
* 浏览 (1616)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-11-26
缩略显示
ExtJS学习笔记一 ExtJS开发环境的配置
文章分类:Java编程
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="../ExtJS/ext-lang-zh_CN.js"></script> //中文映射
三个基本引入文件。其中ext-all.css里面图片的默认路径是resources/images文件下的所有图片和文件夹。
ext-all.js是extjs的核心库。
开启ext自带的debug功能
把ext-all.js换成ext-all-debug.js就可以了。
Ext.log('这是测试');就可以了。
关于on的使用：
on('事件名称','函数')中的事件名称，就是帮助文档中所对应的事件名称。
adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js换成adapter /jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype- adapter.js等。
* ExtJS.rar (1.1 MB)
* 下载次数: 335
* Ext2.2docs.rar (2.4 MB)
* 下载次数: 63
* 11:03
* 浏览 (1372)
* 评论 (0)
* 分类: JS
* 收藏Spinner
2008-10-28
缩略显示
自定义对象
关键字: 自定义对象 js
一，概述
在Java语言中，我们可以定义自己的类，并根据这些类创建对象来使用，在Javascript中，我们也可以定义自己的类，例如定义User类、Hashtable类等等。
目前在Javascript中，已经存在一些标准的类，例如Date、Array、RegExp、String、Math、Number等等，这为我们编程提供了许多方便。但对于复杂的客户端程序而言，这些还远远不够。
与Java不同，Java2提供给我们的标准类很多，基本上满足了我们的编程需求，但是Javascript提供的标准类很少，许多编程需求需要我们自己去实现，例如Javascript没有哈西表Hashtable，这样的话在处理键值方面就很不方便。
因此，我个人认为一个完整的Javascript对象视图应该如下：
二，基本概念
1，自定义对象。
根据JS的对象扩展机制，用户可以自定义JS对象，这与Java语言有类似的地方。
与自定义对象相对应的是JS标准对象，例如Date、Array、Math等等。
2，原型（prototype）
在JS中，这是一种创建对象属性和方法的方式，通过prototype可以为对象添加新的属性和方法。
通过prototype我们可以为JS标准对象添加新的属性和方法，例如对于String对象，我们可以为其添加一个新的方法trim（）。
与严格的编程语言（例如Java）不同，我们可以在运行期间为JS对象动态添加新的属性。
三，语法规则
1，对象创建方式
1）对象初始化器方式
格式：objectName = {property1:value1, property2:value2,…, propertyN:valueN}
property是对象的属性
value则是对象的值，值可以是字符串、数字或对象三者之一
例如： var user={name:“user1”,age:18}；
var user={name:“user1”,job:{salary:3000,title:programmer}
以这种方式也可以初始化对象的方法，例如：
var user={name:“user1”,age:18,getName:function(){
return this.name;
}
}
后面将以构造函数方式为重点进行讲解，包括属性和方法的定义等等，也针对构造函数的方式进行讲解。
2）构造函数方式
编写一个构造函数，并通过new方式来创建对象，构造函数本可以带有构造参数
例如：
function User(name,age){
this.name=name;
this.age=age;
this.canFly=false;
}
var use=new User();
2，定义对象属性
1）JS中可以为对象定义三种类型的属性：私有属性、实例属性和类属性，与Java类似，私有属性只能在对象内部使用，实例属性必须通过对象的实例进行引用，而类属性可以直接通过类名进行引用。
2）私有属性定义
私有属性只能在构造函数内部定义与使用。
语法格式：var propertyName=value；
例如：
function User(age){
this.age=age;
var isChild=age<12;
this.isLittleChild=isChild;
}
var user=new User(15);
alert(user.isLittleChild);//正确的方式
alert(user.isChild);//报错：对象不支持此属性或方法
3）实例属性定义，也存在两种方式：
prototype方式，语法格式：functionName.prototype.propertyName=value
this方式，语法格式：this.propertyName=value，注意后面例子中this使用的位置
上面中value可以是字符创、数字和对象。
例如：
function User(){ }
User.prototype.name=“user1”;
User.prototype.age=18;
var user=new User();
alert(user.age);
—————————————–
function User(name,age,job){
this.name=“user1”;
this.age=18;
this.job=job;
}
alert(user.age);
3）类属性定义
语法格式：functionName.propertyName=value
例如：
function User(){ }
User.MAX_AGE=200;
User.MIN_AGE=0;
alert(User.MAX_AGE);
参考JS标准对象的类属性：
Number.MAX_VALUE //最大数值 Math.PI //圆周率
4）对于属性的定义，除了上面较为正规的方式外，还有一种非常特别的定义方式，语法格式： obj[index]=value
例子：
function User(name){
this.name=name;
this.age=18;
this[1]=“ok”;
this[200]=“year”;
}
var user=new User(“user1”);
alert(user[1]);
在上面例子中，要注意：不同通过this[1]来获取age属性，也不能通过this[0]来获取name属性，即通过index方式定义的必须使用index方式来引用，而没有通过index方式定义的，必须以正常方式引用
3，定义对象方法
1）JS中可以为对象定义三种类型的方法：私有方法、实例方法和类方法，与Java类似：
私有方法只能在对象内部使用
实例方法必须在对象实例化后才能使用
类方法可以直接通过类名去使用
注意：方法的定义不能通过前面所说的index方式进行。
2）定义私有方法
私有方法必须在构造函数体内定义，而且只能在构造函数体内使用。
语法格式：function methodName(arg1,…,argN){ }
例如：
function User(name){
this.name=name;
function getNameLength(nameStr){
return nameStr.length;
}
this.nameLength=getNameLength(this.name);
}
3）定义实例方法，目前也可以使用两种方式：
prototype方式，在构造函数外使用，语法格式：
functionName.prototype.methodName=method;
或者
functionName.prototype.methodName=function(arg1,…,argN){};
this方式，在构造函数内部使用，语法格式：
this.methodName=method;
或者
this.methodName=function(arg1,…,argN){};
上面的语法描述中，method是外部已经存在的一个方法，methodName要定义的对象的方法，意思就是将外部的一个方法直接赋给对象的某个方法。
以function(arg1,…,argN){}的方式定义对象方法是开发人员应该掌握的。
定义实例方法的一些例子：例子1
function User(name){
this.name=name;
this.getName=getUserName;
this.setName=setUserName;
}
function getUserName(){
return this.name;
}
Function setUserName(name){
this.name=name;
}
定义实例方法的一些例子：例子2
function User(name){
this.name=name;
this.getName=function(){
return this.name;
};
this.setName=function(newName){
this.name=newName;
};
}
定义实例方法的一些例子：例子3
function User(name){
this.name=name;
}
User.prototype.getName=getUserName;
User.prototype.setName=setUserName();
function getUserName(){
return this.name;
}
Function setUserName(name){
this.name=name;
}
定义实例方法的一些例子：例子4
function User(name){
this.name=name;
}
User.prototype.getName=function(){
return this.name;
};
User.prototype.setName=function(newName){
this.name=newName;
};
4）定义类方法
类方法需要在构造函数外面定义，可以直接通过构造函数名对其进行引用。
语法格式：
functionName.methodName=method;
或者
functionName.methodName=function(arg1,…,argN){};
例子：
function User(name){
this.name=name;
}
User.getMaxAge=getUserMaxAge;
function getUserMaxAge(){
return 200;
}
或者
User.getMaxAge=function(){return 200;};
alert(User.getMaxAge());
4，属性与方法的引用
1）从可见性上说：
私有属性与方法，只能在对象内部引用。
实例属性与方法，可以在任何地方使用，但必须通过对象来引用。
类属性与方法，可以在任何地方使用，但不能通过对象的实例来引用（这与Java不同，在Java中静态成员可以通过实例来访问）。
2）从对象层次上说：
与Java bean的引用类似，可以进行深层次的引用。
几种方式：
简单属性：obj.propertyName
对象属性：obj.innerObj.propertyName
索引属性：obj.propertyName[index]
对于更深层次的引用与上面类似。
3）从定义方式上说：
通过index方式定义的属性，必须通过index方式才能引用。
通过非index方式定义的属性，必须通过
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
