Ext官方中文教程列表

http://virgos.iteye.com/category/31862?show_full=true

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+'" '+
    'onclick="spanYearCEvent();">&nbsp;年</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+'" '+
    'onclick="spanMonthCEvent();">&nbsp;&nbsp;月</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;" '+
    'onclick="spanHourCEvent();">&nbsp;时</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;" '+
    'onclick="spanMinuteCEvent();">&nbsp;&nbsp;分</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();">&nbsp;');
   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 + '">&nbsp;</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 + '">&nbsp;</td>');
   document.write('<td align="center" id="tdTiannetDay36" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
    +' style="' + s_tiannet_day + '">&nbsp;</td>');
   document.write('<td align="right" colspan="5"><a href="javascript:tiannetClear();" style="' + s_tiannet_link + '">清空</a>'+
    '&nbsp;<a href="javascript:tiannetHideControl();" style="' + s_tiannet_link + '">关闭</a>' +
    '&nbsp;<a href="javascript:tiannetSetValue(true);" style="' + s_tiannet_link + '">确定</a>&nbsp;' +
    '</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 onclick=x() dd='自定义值1'>【点我测试】</div>
//等效于下面的
<div onclick=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种。简单总结一下，帮助记忆。
#

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:''}
       ]
      }
     );
});

.

    * 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方式定义的属性，必须通过