在 html div 中呈现 ExtJS 4+ MVC 应用程序 - 操作方法? [英] Rendering ExtJS 4+ MVC application in a html div - how-to?
问题描述
到目前为止，我发现的所有示例都解释了如何在视口"中呈现 ExtJS (4.2) MVC 应用程序，换句话说，这意味着整个浏览器屏幕，并占据整个 HTML BODY.
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.
我想在已命名 DIV 的现有 HTML 页面中呈现应用程序，以便我可以围绕应用程序进行 HTML 设计.
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 id="appdiv"><!-- application runs here --></div>
我见过一些带有 ExtJS 4 示例的站点，这些示例使用技巧通过使用 IFRAME 在页面内呈现 ExtJS 应用程序.
I've seen some sites with ExtJS 4 examples that use trick to render ExtJS app within the page by using IFRAME.
是否可以避免 IFRAME?并且，如果是，ExtJS 4.2 应用程序的骨架在 div 中呈现时会是什么样子.
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.
注意:在 ExtJS 3 中，我通过创建一个面板作为主容器找到了解决方案，该面板在命名的 div 中呈现.但是，4.2 版(可能还有更早的 4.x 版)建议的 MVC 应用程序方法似乎要好得多.
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.
---- 编辑
我意识到我必须为这个问题设定起点.
I have realised that I have to put starting points for this question.
- 此示例的源代码由 ExtJS 的 CMD 命令生成，该命令生成应用程序"框架框架.
- 应用程序的框架由许多文件组成，包括引擎引用和其他引用，因此我无法在此处包含应用程序"目录/文件夹中的所有源.应用程序的框架可以通过以下方式使用 cmd 完成:
sencha -sdk/myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp/mywebroot/htdocs/extja_genapp这会生成文件和文件夹并复制所有必要的文件. - 用户"活动区域位于应用"目录中.应用程序目录具有视图、控制器、模型和其他内容的子目录.
- 与许多其他框架一样，您需要保留文件夹结构，以便框架可以找到合适的文件并对其进行初始化.
- 文件列表:
- 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:
index.html(在生成的应用程序的根目录中)
index.html (in the root of the generated application)
<!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
}
});
注意:最初没有启动功能，但有自动生成视口(默认生成器会得到)
note: originally there is no launch function but there is auto generate viewport (one gets that by default generator)
应用程序/控制器/Main.js
app/controller/Main.js
Ext.define('ExtGenApp.controller.Main', {
extend: 'Ext.app.Controller'
});
app/view/appBoxView.js
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)
this shall be initial layout on the screen (AFAIK)
最后:
app/view/Main.js
app/view/Main.js
Ext.define("ExtGenApp.view.Main", {
extend: 'Ext.Component',
html: 'Hello, World!!'
});
据我所知，这应该是内容".
which shall, as I understood, be the "content".
按原样，它会生成未创建Ext.view.appBoxView"的错误以及它在我看来的样子，框架不会初始化应用程序.
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.container.Container，它会根据文档正文自动调整大小.
A viewport is just a specialized Ext.container.Container that auto sizes to the the document body.
因此，您可以在启动方法中轻松创建自己的:
As such, you can easily create your own in the launch method:
launch: function(){
new MyContainer({
renderTo: 'myDiv'
});
}
这篇关于在 html div 中呈现 ExtJS 4+ MVC 应用程序 - 操作方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
