【发布时间】：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。我最终将它用作一个整页的应用程序框架，而不仅仅是一个网格组件，就像设计人员打算使用它的方式一样。如果不以这种方式使用网格，则某些分组插件会出现错误。
标签： javascript extjs extjs4 extjs-mvc extjs4.2