前言
在前端开发中，我们经常会使用不同的框架和库来辅助开发。其中 Angular 和 ExtJS 都是非常流行的前端框架。如果同时需要使用两个框架，可能需要更多的工作来实现交互和数据同步。@dalencar/angular-extjs-modern 就是针对此类问题提供的解决方案。它提供了一个 Angular 的组件，使得我们可以方便地使用 ExtJS 的现代版框架，而不需要担心它们之间的数据同步。
安装
我们可以通过 npm 来安装 @dalencar/angular-extjs-modern。
npm install @dalencar/angular-extjs-modern --save
引入
将包导入你的 app.module.ts 中：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------------------
------ - ------------ - ---- ------------------
------ - ---------------------- - ---- ---------------------------------
-----------
------------- ---------------
-------- -
--------------
----------------------
-----------------
----------------------
--
---------- -
----------
-------------
------------
- -------- ------------------- --------- ------------------ -
--
---------- --------------
--
------ ----- --------- --使用
这里我们将使用一个具有三个面板的简单布局作为示例，其中一个面板将显示一个表单。我们将使用 ExtJS 的现代版框架来创建这个布局。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ---------------------------------
------- --- ---- ----
------------
--------- -----------
--------- -
-------------- ---------- --------------
---------- ------------ -- ---------------------
---------- ------------ -- ---------------------
---------- ------------ -- ---------
-------------- -------
-------------- ------------ ---------
----------------
--------------- ------------- ---------
-----------------
------------------ ---------------- ---------
--------------------
----------- ---------- ------ ---------------------------
----------------
------------
----------------
-
--
------ ----- ------------- -
------------- -
---------------------- -
------- ----------------
------ -----------
--------- -
------------
-----------------
-----------------
------------------
---------------------
-------------------
---------------
--
------- -
----- -------
------ ---------
--
------ --
------ --------
------ ------ ---
----- -
---
------ --------
------ ------ ---
----- -
---
------ --------
------ ------ ---
----- --
------- ------
------ --
------ ------------
------- -----
------ --
------ ------------
------ -------
--------- ----
---
------ -------------
------ --------
--------- ----
---
------ ----------------
------ -----------
--------- ----
---
------ ---------
--- ------- -------
----- --------
--
--
--
---
-----------------------
-
-在这个示例中，我们创建了一个 Angular 组件并使用 @dalencar/angular-extjs-modern 将它转换成 ExtJS 的现代版框架。我们使用了 ExtJS 的视图组件，例如 Ext.container、Ext.panel、Ext.formpanel、Ext.textfield 等来构建我们的布局和表单。最后，我们在组件的 constructor 中使用 Ext.create() 来渲染这个 ExtJS 的现代版框架组件。
结论
通过使用 @dalencar/angular-extjs-modern，我们可以轻松地将 ExtJS 的现代版框架集成到 Angular 应用程序中，而不需要担心数据同步和交互问题。这个库的使用同样非常容易，只需在我们的模块文件中导入模块并使用 ExtJS 的组件即可。在这里，我们提供了一个简单的示例来帮助你入门使用该库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/112288