ext.js入门

序言：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代码如下

 

 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

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文件，您将在浏览器上获得以下输出。