20140723

1、JSON数据格式

varpeople={"programmers":[{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},

{"firstName":"Jason","lastName":"Hunter","email":"bbbb"},

{"firstName":"Elliotte","lastName":"Harold","email":"cccc"}

],

"authors":[

{"firstName":"Isaac","lastName":"Asimov","genre":"sciencefiction"},

{"firstName":"Tad","lastName":"Williams","genre":"fantasy"},

{"firstName":"Frank","lastName":"Peretti","genre":"christianfiction"}

],

"musicians":[

{"firstName":"Eric","lastName":"Clapton","instrument":"guitar"},

{"firstName":"Sergei","lastName":"Rachmaninoff","instrument":"piano"}

]}

使用

people.programmers[0].lastName;

2、renderTo以及render监听

将该组件渲染到某个容器里去

renderTo: Ext.getBody()

对于render而言，如果在新建一个panel的时候指定了其render属性，那么在其后使用该对象来进行组件添加操作是不会成功的，因为有了render以后，系统会先将panel在页面上进行显示，然后通过异步的方式来执行后面的操作，所以当执行后续的添加操作时就不会进行显示了，如果确实需要这样来实现相关的添加操作，那么就可以监听其render事件，该监听方法会在render之前执行，这时候就可以把需要添加组件的操作在该方法中执行。当没有指定render属性的时候就可以随意的 进行添加操作了，只是最后需要手动的调用类似于panel.render(document.body)这样的方法。

3、ExtJS API文档使用技巧

1）例：如何获取html中<div id=”hello” >你好</div>中的“你好内容”

第一种方法

var e=Ext.get(“hello”);

e.getHTML()//注意，这个getHTML()方法在spket中无法通过“.”号点出来，只能通过查看Ext文档，可以在文档中搜索Element（因为Ext.get(“hello”)返回的是一个Element对象）而后会找到Ext.dom.Element对象，查看它的Methods可以看到有个方法getHTML()如此便可。

第二种方法

var e=Ext.get(“hello”);

alert（e.dom.innerHTML）;//将Element对象转化为dom对象，直接调用innerHTML

2）在文档中直接搜索panel会提示没有

我的解决办法：F12》index.html》搜索panel，然后再通过HTML代码查找

4、设置子Panel在其父Panel中的位置

Ext.onReady(Start);

function Start()

{ 

var t=Ext.create('Ext.panel.Panel',

    {

       width:200,

       height:100,

       x:'50%',//可以用50来指定为50px，也可以用’50%’来指定为50%

       y:'20%'

    }

    );

var MainPanel=Ext.create('Ext.panel.Panel',//API如何获取Panel的各个属性

    {

       width:400,//指定panel大小

       height:300,

        layout: 'anchor',//布局为anchor布局

        title:'数字时钟By Titan研发部',

        renderTo:Ext.getBody(),//renderTo

        x:200,//指定panel位置

        y:100

     

    });

  MainPanel.add(t);//两个panel类对象，通过add()把一个panel添加到另外一个panel对象里去

5、用ExtJS重构数字时钟程序

var MainPanel,showClock,manual_Correc,lastCorrect;

var xmlhttp,year, month,date,day,hour,minute,second,interval="";

 

Ext.onReady(Start);

//Start()生成UI

function Start()

{ 

 showClock=Ext.create('Ext.panel.Panel',

         {

                   width:240,

                   height:160,

                   x:5,

                   y:5,

                   layout:'absolute',

                   renderTo:Ext.getBody()

         }

         );

        

 MainPanel=Ext.create('Ext.panel.Panel',//API如何获取Panel的各个属性

         {

                   width:350,//指定panel大小

                   height:200,

             layout: 'absolute',//布局为abslute布局，之前为anchor布局button的位置得不到保证

             title:'数字时钟By Titan研发部智恒彪',

             /*renderTo：Specify the id of the element, a DOM element or an existing

              * Element that this component will berendered into.

             */

             renderTo:Ext.getBody(),

             x:'50%',//指定panel位置

             y:'50%'

          

         });

 lastCorrect=Ext.create('Ext.panel.Panel',

         {

                   width:240,

                   height:20,

                   x:0,

                   y:140

         }

         );

 

 manual_Correct=Ext.create('Ext.Button', {

    text: '手动校准',

    x:275,

    y:5,

    /*

     * 1、handler:can be used instead of click event

     * 2、如果加上()，那么在页面加载时Btn_mc_Click会先执行一遍

     */

    handler:correctClock              

});

  showClock.add(lastCorrect);

  MainPanel.add(showClock);//两个panel类对象，通过add()把一个panel添加到另外一个panel对象里去

  MainPanel.add(manual_Correct);

}

 

function startClock()

{

    correctClock();

    setInterval("refreshTime()",1000);

}

 

function refreshTime()

{

      second=second+1;

     if(second==60&&interval=="minute")

          correctClock();

      elseif(second==60&&minute==59&&interval=="hour")

          correctClock();

      elseif(second==60&&minute==59&&hour==23&&interval=="day")

          correctClock();

      if(second==60)

           {

                  minute=minute+1;

                  second=0;

                        if(minute==60)

                        {

                                 hour=hour+1;

                                      minute=0;

                                      if(hour==24)

                                       {

                                          hour=0;

                                       }

                             }

          }

          showClock.update(year+"年"+month+"月"+date+"日"+""+day+"<br/>"+

          (hour+100+"").substr(1)+":"+(minute+100+"").substr(1)+":"+(second+100+"").substr(1));

          

}

 

function correctClock()

{ 

     createXmlHttp();  

          xmlhttp.onreadystatechange=stateChange;

          xmlhttp.open("POST","getClock.jsp?s="+Math.random(),true);

     xmlhttp.send(null);

}

 

function  stateChange()  {

         if (xmlhttp.readyState==4 )

         {

             if(xmlhttp.status==200)

                  {

                                 var time=xmlhttp.responseText;

                                 setClock(time);//20140717星期四110611

             } 

         }

     }

 

function createXmlHttp()

          {

              if (window.XMLHttpRequest)

        {// code for IE7+, Firefox,Chrome, Opera, Safari

            xmlhttp=newXMLHttpRequest();

        }

       else

        {// code for IE6, IE5

            xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

        }

          }

          

function setClock(time)

{ 

     year=time.toString().substr(2,4);

           month=time.toString().substr(6,2);

           date=time.toString().substr(8,2);

           day=time.toString().substr(10,3);

           hour=parseInt(time.toString().substr(13,2));

          minute=parseInt(time.toString().substr(15,2));

          second=parseInt(time.toString().substr(17,2));

           lastCorrect.update(year+"年"+month+"月"+date+"日"+""+day+(hour+100+"").substr(1)+":"

          +(minute+100+"").substr(1)+":"+(second+100+"").substr(1));//用Update()设置名为"lastCorrect"的Panel的内容

}