javascript 在 html div 中呈现 ExtJS 4+ MVC 应用程序 - 操作方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16681590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rendering ExtJS 4+ MVC application in a html div - how-to?
提问by ljgww
All examples that I have found so far explain how to render ExtJS (4.2) MVC application within the "viewport", which in other words means full browser screen, and occupying whole HTML BODY.
到目前为止，我发现的所有示例都解释了如何在“视口”中呈现 ExtJS (4.2) MVC 应用程序，换句话说，这意味着整个浏览器屏幕，并占据整个 HTML BODY。
I would like to render application within the existing HTML page within named DIV, so that I can have HTML design around the application.
我想在已命名的 DIV 中的现有 HTML 页面中呈现应用程序，以便我可以围绕应用程序进行 HTML 设计。
<div id="appdiv"><!-- application runs here --></div>
I've seen some sites with ExtJS 4 examples that use trick to render ExtJS app within the page by using IFRAME.
我见过一些带有 ExtJS 4 示例的站点，这些示例使用技巧通过使用 IFRAME 在页面内呈现 ExtJS 应用程序。
Is it possible to avoid IFRAME? And, if it is, how skeleton of ExtJS 4.2 application shall look like if it will be rendered within a div.
是否有可能避免 IFRAME？并且，如果是，ExtJS 4.2 应用程序的骨架在 div 中呈现时会是什么样子。
Notes: In ExtJS 3 I have found the solution by creating a panel as main container which renders within named div. However, version 4.2 (and possibly earlier 4.x's) suggests MVC application approach that seem far superior.
注意：在 ExtJS 3 中，我通过创建一个面板作为主容器找到了解决方案，该面板在命名的 div 中呈现。但是，4.2 版（可能还有更早的 4.x 版）建议的 MVC 应用程序方法似乎要好得多。
---- Edits
---- 编辑
I have realised that I have to put starting points for this question.
我已经意识到我必须为这个问题设定起点。
- Source for this example is generated by ExtJS's CMD command that generates "application" framework skeleton.
- Skeleton of application is consisted of many files including engine reference, and other references, so I would not be able to include here all sources in "application" dir/folder. Skeleton of application can be done using cmd in the fashion:
sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genappThis generates files and folders and copies all necessary files in the place. - "User" activity area is in "app" dir. App dir has subdirs for views, controllers, models and additional stuff.
- As in many other frameworks you are expected to keep folder structure so that framework can find appropriate files and initialise them.
- list of files:
- 此示例的源代码由 ExtJS 的 CMD 命令生成，该命令生成“应用程序”框架框架。
- 应用程序的骨架由许多文件组成，包括引擎参考和其他参考，因此我无法在此处包含“应用程序”目录/文件夹中的所有源。可以使用 cmd 以这种方式完成应用程序的骨架：
sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genapp这会生成文件和文件夹并将所有必要的文件复制到该位置。 - “用户”活动区域位于“应用程序”目录中。应用程序目录具有视图、控制器、模型和其他内容的子目录。
- 与许多其他框架一样，您需要保留文件夹结构，以便框架可以找到合适的文件并对其进行初始化。
- 文件列表：
index.html (in the root of the generated application)
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
应用程序/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
}
});
note: originally there is no launch function but there is auto generate viewport (one gets that by default generator)
注意：最初没有启动功能，但有自动生成视口（默认生成器会得到）
app/controller/Main.js
应用程序/控制器/Main.js
Ext.define('ExtGenApp.controller.Main', {
extend: 'Ext.app.Controller'
});
app/view/appBoxView.js
应用程序/视图/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'
}]
}]
});
this shall be initial layout on the screen (AFAIK)
这应该是屏幕上的初始布局（AFAIK）
and finally:
最后：
app/view/Main.js
应用程序/视图/Main.js
Ext.define("ExtGenApp.view.Main", {
extend: 'Ext.Component',
html: 'Hello, World!!'
});
which shall, as I understood, be the "content".
据我所知，这应该是“内容”。
as is, it generates an error of not founding "Ext.view.appBoxView" and how it looks to me, framework do not initialise the application.
照原样，它会生成未创建“Ext.view.appBoxView”的错误以及它在我看来的样子，框架不会初始化应用程序。
回答by Evan Trimboli
A viewport is just a specialized Ext.container.Containerthat auto sizes to the the document body.
视口只是一种特殊的Ext.container.Container，可以根据文档正文自动调整大小。
As such, you can easily create your own in the launch method:
因此，您可以在启动方法中轻松创建自己的：
launch: function(){
new MyContainer({
renderTo: 'myDiv'
});
}
回答by radtad
In some of these answers, some suggest using an Ext.Panel with a renderTo. You shouldn't be using an Ext.Panel if you're not going to be utilizing it for anything other than a container if you're going to go this route. You should be using Ext.container.Container instead.
在其中一些答案中，有些人建议使用带有 renderTo 的 Ext.Panel。如果你打算走这条路，你不应该使用 Ext.Panel，如果你不打算将它用于容器以外的任何东西。您应该使用 Ext.container.Container 代替。
By using Ext.Panel you are adding a bunch of unnecessary things like the title bar and such to your component. Each one of these puts extra place holders there even if you aren't using them.
通过使用 Ext.Panel，您将向组件添加一堆不必要的东西，例如标题栏等。即使您不使用它们，其中的每一个都会在那里放置额外的占位符。
回答by Dylan
I liked Evan Trimboli's concise approach but I could not get it to work either (it also told me that MyContainer is not defined). However this approach worked...
我喜欢 Evan Trimboli 的简洁方法，但我也无法让它工作（它还告诉我 MyContainer 没有定义）。但是这种方法有效......
launch: function () {
Ext.create('widget.MyContainer', {
renderTo: 'MyDiv'
});
}
...where 'widget.MyContainer'is the alias created inside the view itself, and provided I also did this up top:
...在'widget.MyContainer'视图本身内部创建的别名在哪里，前提是我也这样做了：
Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',
name: 'MyApp',
views: [
'MyApp.view.MyContainer'
],
...
回答by user1964663
Have you tried using Ext.panel.Panel or Ext.window.Window as a container?
您是否尝试过使用 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>
