序言：extjs 是一种OOP语言，可以按照学习Java 的过程来进行学习，可以类比 Java中的图像界面JWT来进行学习。

工具

这些是sencha提供的用于Ext JS应用程序开发的工具，主要用于生产级别。
Sencha Cmd
Sencha CMD是一个提供Ext JS代码缩小，脚手架，生产构建生成功能的工具。

Sencha IDE Plugins

Sencha IDE插件，它将Sencha框架集成到IntelliJ，WebStorm IDE中。这有助于通过提供代码完成，代码检查，代码导航，代码生成，代码重构，模板创建和拼写检查等功能来提高开发人员的生产力。

Sencha Inspector

Sencha Inspector是一个调试工具，帮助调试器调试任何问题，同时开发。

环境搭建

extjs6.0版本已经过于老旧，

百度网盘下载地址:
ext-6.0.0-gpl.zip_免费高速下载|百度网盘-分享无限制

版本号：ext-6.0.0

ext-6.0.0/build下找到的:

css文件

ext-6.0.0/build/classic/下找到多套主题

环境测试

index.html代码如下

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      <script src="./ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function() {
         Ext.create('Ext.Panel', {
            renderTo: 'helloWorldPanel',
            height: 100,
            width: 200,
            title: 'Hello world',
            html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel"></div>
   </body>
</html>

Ext.js命名约定

类名首字母大写

常量全部大写

其他的首字母小写，多个单词，第二个字母以后全部大写

Ext.js 架构

2022-05-19 11:18 更新

Ext JS遵循MVC / MVVM架构。

MVC - 模型（model）-视图（view）-控制器（controller）体系结构（版本4）

MVVM - 模型(model)-视图(view)-模型视图（Viewmodel）（版本5）

第一个hello world

步骤1

在我们选择的编辑器中创建index.htm页面。将所需的库文件包含在html页面的head部分，如下所述:

index.html

<!DOCTYPE html>
<html>
   <head>
    <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function() {
         Ext.create('Ext.Panel', {
            renderTo: 'helloWorldPanel',
            height: 200,
            width: 600,
            title: 'Hello world',
            html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel" />
   </body>
</html>

Explanation

Ext.onReady（）方法将在Ext JS准备好渲染Ext JS元素时调用。
Ext.create（）方法用于在Ext JS中创建对象，这里我们创建一个简单的面板类Ext.Panel的对象。
Ext.Panel是Ext JS中用于创建面板的预定义类。
每个Ext JS类都有不同的属性来执行一些基本的功能。

Ext.Panel类有以下各种属性:

renderTo 是此面板必须呈现的元素。 \'helloWorldPanel\'是Index.html文件中的div id。
Height 和宽度属性用于提供面板的自定义尺寸。
Title 属性是为面板提供标题。
Html 属性是要在面板中显示的html内容

第2步

在标准浏览器中打开index.html文件，您将在浏览器上获得以下输出。

ext.js入门

工具

环境搭建

环境测试

Ext.js 架构

第一个hello world

步骤1

Explanation

第2步

猜你喜欢