ExtJs學習一

ExtJs學習一

時間：2012年10月10日22:28:44

ExtJs的hello world:

//在使用ExtJs前要引入下面兩個文件

<linkrel="stylesheet"type="text/css"href="extjs/resources/css/ext-all.css">

<scripttype="text/javascript"src="extjs/ext-all.js"> </script>

//ExtJs中的Ext.onReady就是等頁面加載完後執行

(function(){
  Ext.onReady(function(){
      //alert("aa");
      //使用提示框顯示hello world
      Ext.MessageBox.alert("hello","hello world");
      var array=[1,2,3,4,-1,-3,-2];
      //遍歷數組下的所有元素知道返回fasle停止遍歷
      Ext.Array.every(array,function(item){
        if(item>0)
          {
          returntrue;
          }
        else
          {
          alert(item);
          returnfalse;
          }
      },this);
      //遍歷數組符合條件的組成新的數組
      var newarray=Ext.Array.filter(array,function(item){
        if(item>0)
        {
        return true;
        }
      else
       {
        return false;
        }
      },this);
      //打印數組，以逗號分隔
      alert(newarray.join(","));
     輸出結果爲: 1,2,3,4
   });
})();最後還有一對括號

Js創建對象常規方法一：

//javascript中類的聲明其實就是一個function

/*

function　user()
{
 //具有this修飾的相當於java類中使用public修飾的可以通過  對象.屬性 獲取值
  this.name="hanhan";
  this.age="23";
 //使用var修飾的相當於java中使用private修飾的，但是可以通過方法返回
  var email="[email protected]";
 //爲對象指定getEmail方法來獲取變量 email的值
  this.getEmail=function(){
     return email;
  }
}
 var hanhan=new user();
 alert(hanhan.getEmail());
 alert(hanhan.age);
 alert(hanhan.name);

在javascript中創建對象的方法：

Js創建對象常規方法二：

//也可以直接創建對象

 var person={
   name:"hanhan",
   age:"23"
 };

 alert(person["name"]+"  "+person.age);

這是javascript中常規的常見對象的方法，但是在extjs中創建對象的方法可以如下:

ExtJs創建對象常規方法一:

直接使用new 類名  的方法

//Ext.window.Window爲窗體類

var win=new Ext.window.Window({
       width:400,
        height:350,
        title:"first window"
      });

      //顯示窗體

      //win.show();

      //單擊按鈕顯示窗體

      Ext.get("show").on("click",function(){
        win.show();
      });

ExtJs創建對象常規方法二:

使用create方法創建對象，參數爲類名和配置參數

（推薦使用）

var win2=Ext.create("Ext.window.Window",{
         width:400,
         height:350,
         title:"first window"
       });
      win2.show();
var o={

         say:function(){
           alert("Hello world");
         }
      };

//使用Ext.Function.alias爲對象o的方法say取了一個別名fun，使得在別處可以直接調用

   var fun=Ext.Function.alias(o,"say");
   fun();
  輸出的結果爲: Hello world

 ExtJs中自定義類:

//使用Ext.define

      Ext.define("mywin",{
        //繼承的類名
        extend:"Ext.window.Window",
        width:400,
        height:350,
        newtitle:"new win",
        mySetTitle:function()
        {
          this.title=this.newtitle;
        },
        title:"first window",
        //initComponent是初始容器的時候，執行的方法
        initComponent:function(){
          //執行設置title的方法
          this.mySetTitle();
          this.callParent(arguments);
        }
      })

//調用mywin

Ext.create("mywin",{
        title:"hanhan"  //顯示的窗體title爲new win
      }).show();

Config設置類的屬性

//使用config設置屬性，可以使用getPrice獲取

Ext.define("mywin",{
        //繼承的類名
        extend:"Ext.window.Window",
        width:400,
        height:350,
        //使用config設置屬性，可以使用getPrice獲取
        config:{
          price:500
        },
        newtitle:"new win",
        mySetTitle:function()
        {
          this.title=this.newtitle;
        },
        title:"first window",
        //initComponent是初始容器的時候，執行的方法
        initComponent:function(){
          //執行設置title的方法
          this.mySetTitle();
          this.callParent(arguments);
        }
      })

//使用

var win=Ext.create("mywin",{
        title:"hanhan",
        price:600
        //requires:['mywin']
      });
      win.show();
      //id爲show的按鈕的單擊事件
      Ext.get("show").on("click",function(){
        alert(win.getPrice());
      });

mixins可以實現多重繼承

      

 //定義say類

      Ext.define("say",{
        say:function(){
          alert("this is say");
        }
      });
      //定義sing類
      Ext.define("sing",{
        sing:function(){
          alert("this is sing");
        }
      });
      //定義user類
      Ext.define("user",{
        mixins:{
          say:"say",
          sing:"sing"
        }
      });

      var user=Ext.create("user",{});
       //使用繼承類的方法
      user.say();
      user.sing();