EXT js 学习

Posted 2020-10-09

使用ext的基本步骤 
<!-- 引入所需的css文件    /resources/css/ext-all.css -->
<link rel="stylesheet" type="text/css" href="./ext-js/resources/css/ext-all.css">

<!-- 引入所需的js文件    /resources/css/ext-all.js -->
<script language="javascript" type="text/javascript" src="./ext-js/ext-all.js"></script>
这里也可以引入 bootstrap.js：这个js会自动加载ext-all.js或者ext-all-debug.js，在以下情况下会加载ext-all-debug.js

 

example:   hello,word!

首先来看一个函数

  Onready函数,onready函数内的语句块会在页面上下文加载后在执行：

    //相当于jquery中的    $(document).ready();  表示页面正常加载完毕。
    Ext.onReady(function (){
        //模拟弹出窗口
        Ext.MessageBox.alert("hello","hellow,word!");
        
        //窗口展示
        var win=new Ext.Window({title:"hello",width:300,height:200,html:‘<h1>Hello,word!</h1>‘});
        win.show();    
    });

 

 

ext创建类   

    Ext.define(‘TextClass‘,{

                 A："a",

                 B："b"

           });

创建一个类TextClass2,并且集成TextClass

   

    Ext.define(‘TextClass2‘,{

                 extend: "TextClass";

                 C："c",

           });

这样TextClass2这个类就具有了A,B,C三个属性了。

 

实例化一个TextClass2类

var  test = new TextClass2();

      alert("A="+test.A+"B="+test.B+"C="+test.C);

 

 

 

命名规范

     类名如果有多段构成，第一段的首字母大写，最后一段的首字母大写，中间的字母小写

     Ext.layout.component.Dock

 

 

数组：

var arr = [1,2,3,4,5,6,-1];
        //数组遍历
        Ext.Array.every(arr,function (item){
            if(item>0){
                return true;  alert(item);
            }else{
                alert(item);
                return false;
            }
        },this);
        
        //数组过滤
        var newArr = Ext.Array.filter(arr,function (item){
            if(item>0){
                return true;
            }else{
                return false;
            }
        },this);
        alert(newArr.join("\n"));