EXT 学习(一)

llvyuanjie

于 2019-12-19 15:39:36 发布

阅读量576

点赞数 1

分类专栏：前端extjs

本文链接：https://blog.youkuaiyun.com/llvyuanjie/article/details/103615309

版权

这篇博客主要介绍了EXTJS的学习，包括入门Demo，如何在开发工具中引入EXTJS的js源码文件，以及EXTJS中的类和对象的概念。内容涵盖了类的定义（Ext.apply()与Ext.define()）、构造方法、成员变量声明、自定义成员方法以及对象的创建和类的继承。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

EXTJS 学习(一) :类和对象的概念

1. 入门Demo

1.1 在开发工具中引入相关的ext的js源码文件,比如使用idea开发,则web目录下引入关键js文件

以下是必须要有的,其他的看情况选择.,js源码文件可以上ext官网下载
ext-all.css , ext-all.js ,并且如果有用到 ext-base.js,必须放到 ext-all.js
前面 ,因为加载时是先加载 ext-base.js,后加载ext-all.js

1.2 Extjs 版HelloWorld(这里使用的是ext5)

#在idea的web工程的web目录下创建首页index.jsp或者index.html,例如,注意文件路径一定要引对

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>MyExt</title>
    <link rel="stylesheet" type="text/css" href="ext/css/ext-theme-crisp-all.css">
    <script type="text/javascript" src="ext/js/ext-all.js"></script>
    <script type="text/javascript" src="ext/js/ext-locale-zh_CN.js"></script>
    <script type="text/javascript" src="app/appjs/app.js"></script>
</head>
<body>
        
</body>
</html>

#最后引入的是我们自己的应用app.js,在app.js中写入以下信息,ext版本的 HelloWorld就写好了
Ext.onReady(function(){
   
   Ext.MessageBox.alert("信息","Hello world");
});

2 .EXTJS 中的一些基本概念

2.1 EXTJS中类的定义

#定义类的语法
Ext.define(class name, class members/properties, callback function); *常用语法* 
    还可以用Ext.apply(...)定义
#类名是根据应用程序结构的类名 .
1.class name(类名):appName.folderName.ClassName (程序名.类存放目录.类名)
例:studentApp.view.StudentView。
2.class members/properties(成员/属性):

2.1.1 Ext.apply()方法和Ext.define()方法

//1.定义命名空间 并创建一个类
Ext.namespace("Ext.myspace");
Ext.myspace.Person = Ext.emptyF

最低0.47元/天解锁文章