在 html div 中渲染 ExtJS 4+ MVC 应用程序 - 操作方法？
Posted
技术标签:
【中文标题】在 html div 中渲染 ExtJS 4+ MVC 应用程序 - 操作方法？【英文标题】：Rendering ExtJS 4+ MVC application in a html div - how-to? 【发布时间】：2013-05-22 00:22:04 【问题描述】：到目前为止，我发现的所有示例都说明了如何在“视口”内呈现 ExtJS (4.2) MVC 应用程序，换句话说，这意味着整个浏览器屏幕，并占据整个 html BODY。
我想在名为 DIV 的现有 HTML 页面中呈现应用程序，以便我可以围绕应用程序进行 HTML 设计。
<div id="appdiv"><!-- application runs here --></div>
我见过一些带有 ExtJS 4 示例的网站，它们使用技巧通过 IFRAME 在页面内呈现 ExtJS 应用程序。
是否可以避免 IFRAME？如果是，ExtJS 4.2 应用程序的骨架如果在 div 中呈现，应该是什么样子。
注意：在 ExtJS 3 中，我通过创建一个面板作为主容器来找到解决方案，该面板在命名 div 中呈现。然而，4.2 版（可能还有更早的 4.x 版）建议的 MVC 应用程序方法似乎要优越得多。
---- 编辑
我意识到我必须为这个问题设定起点。
-
此示例的源代码由 ExtJS 的 CMD 命令生成，该命令生成“应用程序”框架骨架。
应用程序的骨架由许多文件组成，包括引擎参考和其他参考，因此我无法在此处将所有源都包含在“应用程序”目录/文件夹中。应用程序的骨架可以通过以下方式使用 cmd 完成：
sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genapp 这会生成文件和文件夹并将所有必要的文件复制到该位置。
“用户”活动区域位于“应用”目录中。应用程序目录有视图、控制器、模型和其他东西的子目录。
与许多其他框架一样，您需要保留文件夹结构，以便框架可以找到合适的文件并对其进行初始化。
文件列表：
index.html（在生成的应用程序的根目录中）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ExtGenApp</title>
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app/app.js"></script>
<!-- </x-compile> -->
</head>
<body>
<h1>HTML Before</h1>
<div id="appBox"></div>
<h1>HTML After</h1>
</body>
</html>
app/app.js
/*
This file is generated and updated by Sencha Cmd. You can edit this file as
needed for your application, but these edits will have to be merged by
Sencha Cmd when it performs code generation tasks such as generating new
models, controllers or views and when running "sencha app upgrade".
Ideally changes to this file would be limited and most work would be done
in other places (such as Controllers). If Sencha Cmd cannot merge your
changes and its generated code, it will produce a "merge conflict" that you
will need to resolve manually.
*/
// DO NOT DELETE - this directive is required for Sencha Cmd packages to work.
//@require @packageOverrides
Ext.application(
name: 'ExtGenApp',
views: [
'Main',
'appBoxView'
],
controllers: [
'Main'
],
launch: function()
new Ext.view.appBoxView(
renderTo: 'appBox'
);; // generates error
);
注意：最初没有启动功能，但有自动生成视口（默认生成器会得到它）
app/controller/Main.js
Ext.define('ExtGenApp.controller.Main',
extend: 'Ext.app.Controller'
);
app/view/appBoxView.js
Ext.define('ExtGenApp.view.appBoxView',
extend: 'Ext.panel.Panel',
requires:[
'Ext.tab.Panel',
'Ext.layout.container.Border'
],
layout:
type: 'border'
,
items: [
region: 'west',
xtype: 'panel',
title: 'west',
width: 150
,
region: 'center',
xtype: 'tabpanel',
items:[
title: 'Center Tab 1'
]
]
);
这应该是屏幕上的初始布局（AFAIK）
最后：
app/view/Main.js
Ext.define("ExtGenApp.view.Main",
extend: 'Ext.Component',
html: 'Hello, World!!'
);
据我了解，应该是“内容”。
事实上，它会生成一个未创建“Ext.view.appBoxView”的错误，并且在我看来，框架没有初始化应用程序。
【问题讨论】：
Re: Meredith 不幸的是，由于可疑的 ext 许可（用于商业产品）的组合，同时这些最初的障碍使本研究已经尝试过的项目通过另一条路径启动，所以，老实说，在此期间我没有太多时间来评估答案。如果这足够清楚，我计划评估并结束这个问题。同时，我也会向管理员寻求指导，因为这个问题似乎是自以为是的答案，并且可能会揭示有关 EXT.js MVC 框架的更多有趣见解，可能会保持开放一段时间？？？ 同时我开始相信 Ext.Js 的作者并没有设想在我所描述的时尚中使用这个框架。让应用程序在全尺寸浏览器中运行，这超出了将 ext.js 集成到更大系统中的项目最初想法。 ???不确定我在评论中说了什么（如果我去年做过？）但我早就不再使用 ExtJS。我最终将它用作一个整页的应用程序框架，而不仅仅是一个网格组件，就像设计人员打算使用它的方式一样。如果不以这种方式使用网格，则某些分组插件会出现错误。 【参考方案1】：视口只是一个专门的Ext.container.Container，它会根据文档正文自动调整大小。
因此，您可以在启动方法中轻松创建自己的：
launch: function()
new MyContainer(
renderTo: 'myDiv'
);
【讨论】：
是的，这就是在 ExtJS 3 中可以做到这一点的方式。但是 ExtJS4 MVC 应用程序由视图和自动渲染视口组成。试过这个，它告诉我 MyContainer 没有定义，我如何将它引用到“视图”？ 视口的自动渲染基本上和我上面的完全一样。以与声明视口相同的方式声明您自己的视图MyApp.view.Container。在您的视图中需要它，然后按照我上面的建议创建它。
仍然无法弄清楚如何实例化主容器，但由于视图是在其他地方定义的，所以在我看来我将在启动时使用 Ext.Create 方法，这里有一些讨论 sencha.com/forum/… 但仍然没有工作配方。
create/new 之间的唯一区别是 create 会查找任何未完成的依赖项，new 不会。我不确定如何进一步解释，在启动时创建容器组件的实例。
将在尝试回答时编译一组源代码，但没有其他方法可以解释问题可能出在哪里。它在“框架”和定义之间的某个地方失败了。【参考方案2】：
在其中一些答案中，有些人建议使用带有 renderTo 的 Ext.Panel。如果你打算走这条路，你不应该使用 Ext.Panel，如果你不打算将它用于容器以外的任何东西。您应该改用 Ext.container.Container。
通过使用 Ext.Panel，您正在向组件中添加一堆不必要的东西，例如标题栏等。即使您不使用它们，它们中的每一个都会在其中放置额外的占位符。
【讨论】：
【参考方案3】：我喜欢 Evan Trimboli 的简洁方法，但我也无法让它工作（它还告诉我 MyContainer 没有定义）。然而这种方法奏效了......
launch: function ()
Ext.create('widget.MyContainer',
renderTo: 'MyDiv'
);
...'widget.MyContainer' 是在视图本身内部创建的别名，前提是我也这样做了：
Ext.define('MyApp.Application',
extend: 'Ext.app.Application',
name: 'MyApp',
views: [
'MyApp.view.MyContainer'
],
...
【讨论】：
MyContainer 只是我编的一个名字，没有内置的类叫它。
对，我已经创建了这个类（就像我在上面的示例中所做的那样）。但即使这样做并在应用程序中引用它，如果没有它说“未定义”，我似乎也无法做到new MyContainer。有什么我错过的吗？
你的班级是MyApp.view.MyContainer。
有趣。我假设它会看到/使用别名。因此，使用这种方法，我认为它不需要包含在上面的“视图”下。底线，有几种方法可以实例化。但是，您有没有建议作为最佳做法？【参考方案4】：
您是否尝试过使用 Ext.panel.Panel 或 Ext.window.Window 作为容器？
<div id="appBox">
<script type="text/javascript">
Ext.require('Ext.panel.Panel');
Ext.onReady(function()
Ext.create('Ext.panel.Panel',
renderTo: Ext.getBody(),
width: 400,
height: 300,
title: 'Container Panel',
items: [
xtype: 'panel',
title: 'Child Panel 1',
height: 100,
width: '75%'
,
xtype: 'panel',
title: 'Child Panel 2',
height: 100,
width: '75%'
]
);
)
</script>
</div>
【讨论】：
以上是关于在 html div 中渲染 ExtJS 4+ MVC 应用程序 - 操作方法？的主要内容，如果未能解决你的问题，请参考以下文章