当前位置：首页 > article >正文

【Ext.js 初步入门】Ext.js 作用以及用法概述

article 2025/3/1 5:31:45

一、Ext.js的作用

首先我们需要了解类似Ext.js以及easyui类似产品的作用是什么。
我的理解是就是相当于一个组件库，它与bootstrap类似产品的区别在于，bootstrap与ext.js和easyui面向的问题不同，bootstrap面向的问题样式，ext.js和easyui面向的问题是功能。比如说，我要做一个表，bootstrap是怎么将这个表做好看，而ext.js所要做的是，我只要提供给这个表一些参数，他就可以把这个表交给我。

二、js相关的前置知识：有关于类的相关内容

js中构建类的定义如下

<script>
    class Point{
        //构造函数，当调用new的时候运行(我的理解)
        constructor(x,y){
            //this.x = x;
            //this.y = y;
            //数组解构，用来赋值this.x和this.y
            [this.x,this.y] = [x,y];
        }
        //打印点坐标
        print(){
            console.log("点坐标为：("+this.x+","+this.y+")");
        }
    }
    var point1 = new Point(1,1);
    point1.print();
</script>

在这里插入图片描述
js类中的类的继承

    class Line extends Point{
        constructor(x,y,x1,y1){
            super(x,y);
            [this.x1,this.y1] = [x1,y1];
        }
        printLine(){
            console.log("确定这条线的两个点分别为：("+this.x+","+this.y+")和("+this.x1+","+this.y1+")")
        }
    }
    var line1 = new Line(1,1,2,2);
    line1.printLine();

在这里插入图片描述

三、Ext.js 的构建以及使用

这里也是我自己的理解：
其实这个就是构造了一些类。然后供给我们调用，他们利用了一些方式设置了样式。

使用步骤：
1、引入相关文件：
相关主题的css文件：有许多种类，可以在 https://www.w3cschool.cn/extjs/extjs_environment_setup.html 该网站查看类别。（其余版本只是主题不同）

<link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">

相关js所需要使用的文件

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

这个相关内容可以在 https://cdnjs.com/libraries/extjs/6.0.0?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library 这个网站自行搜索。

2、使用框架

Ext.onReady(function() {
    Ext.create('Ext.Panel', {    //这里的Ext.Panel 我的理解是组件名，其实就是类名，我认为。但是他会包含一些css html的东西
        renderTo: 'helloWorldPanel’, //这个对应的是html中div的id号
        height: 100,
        width: 200,
        title: 'Hello world',
        html: 'First Ext JS Hello World Program'
    });
});

Ext.onReady() 这是Ext的准备函数，所有与Ext相关的代码都会在这个函数里面书写。（说明，这个里面的代码会利用Ext.js框架的方式渲染？是这个意思吧？）

在这里面要实例化一个类就是Ext.create()如上所示。

Ext.define 是定义一个类组件，也可以用于重写一个类组件。
这个方法可以接收三个参数，className（类的名字），data（Object对象），createFn（回调函数）。
第一个是定义类的名字；
第二个是键值对集合（这里面包含了有关于这个类的相关定义，比如一些方法以及参数）；
第三个是回调函数。类的所有依赖项都准备就绪、类本身被完全创建后被调用（我的理解是，实例化之后这个回调函数会自动执行，有点像vue里面的created生命周期钩子）。
这个是重写（override）示例。

Ext.define("Friend",{
    name:"dudu",
    getName:function(){
        console.log("我的名字是"+this.name);
    }
},function(){
    alert('恭喜你，新交了一个朋友！')
})

var du = new Friend();
du.getName();

//用于重写原有类中的相关内容，不用重写的不用写
Ext.define("Friend1",{
    override:'Friend',
    name:"dudu2",
},function(){
    alert('恭喜你，又交了一个朋友！')
})

var du = new Friend();
//这个new 也可以用Ext.create(“Friend”); 来代替
du.getName();

类的继承

Ext.define("robotFriend",{
    extend:"Friend",
    name:"Carling"
},function(){
    alert("你怎么交了个机器人朋友！");
})

Ext.create("robotFriend").getName();

类的混入（Mixins）：该特性的作用在于调用另一个类的方法。

Ext.define("Car",{
    name:"Carling's Car”,
    //混合写法，前面的属性名是
    mixins:{
        getName:"Friend"
    }
},function(){
    alert("恭喜你，获得了属于自己的小车车。")
})
 
Ext.create("Car").getName();