Introducción a ExtJS (01)

Hoy es el primer día de aprendizaje de extJS, así que haga una transcripción en este artículo.
La definición en línea de extjs es así.
ExtJS
ExtJS
No hay mucho que decir, extjs es un componente de la interfaz de usuario, lo que probablemente significa que no es necesario escribir html, css y otros códigos para aplicar directamente los componentes ExtJS. . . . . .
Y desde la versión 6.0, extJS se ha sincronizado en la computadora y los terminales móviles, por lo que no hay necesidad de preocuparse por algunos problemas.

El primer paso es crear un proyecto web (por primera vez, solo helloworld)
El segundo paso es importar los componentes necesarios de ExtJS (copiar y pegar archivos)

1.1 Elimine los archivos en la web y el archivo de índice después de la creación.
Inserte la descripción de la imagen aquí
1.2 Luego importe algunos archivos necesarios en extjs. Por ejemplo
,
generalmente se llama desde los archivos en la compilación (es la versión para PC), donde
clásico es el tema y local en clásico es la fuente.
El archivo de tema en clásico es un archivo de estilo, como:
classic / theme-gray / resources / theme-gray-all.css
build donde ext-all.js es la biblioteca principal, el archivo js comprimido, ext-all-debug .js Es un archivo JS completo que se puede depurar.

Así que quiero importar los siguientes archivos:
1.ext-all.js
2. Una carpeta de temas en el
clásico 3. El archivo de fuentes locale-zh_CN.js en la carpeta de temas

1.3 Cree un nuevo archivo hello.html en el directorio web
Inserte la descripción de la imagen aquí

archivo hello.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>

<!--引入extjs样式文件-->
<link rel="stylesheet" type="text/css" href="ext/classic/theme-gray/resources/theme-gray-all.css">

<!--引入extjs核心库-->
<script src="ext/ext-all.js"></script>
<script>
    Ext.onReady(function (){
     
     

        Ext.MessageBox.alert("提示:","hello world!!!");
    })


</script>
</body>
</html>

resultado:
Inserte la descripción de la imagen aquí

panel.html
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

El archivo del proyecto está compartido , sígueme y contáctame para avanzar, aprender y mejorar juntos! ! ! !

Supongo que te gusta

Origin blog.csdn.net/weixin_44182157/article/details/112207057
Recomendado
Clasificación