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();