在html div中渲染ExtJS 4+ MVC應用程序 - 操作方法？
[英]Rendering ExtJS 4+ MVC application in a html div - how-to?
問題描述
到目前為止，我找到的所有示例都解釋了如何在“視口”中呈現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命令生成，該命令生成“應用程序”框架框架。
- 應用程序的框架由許多文件組成，包括引擎引用和其他引用，所以我不能在這里包含“application”目錄/文件夾中的所有源代碼。 應用程序的骨架可以使用cmd以時尚方式完成：
sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genapp這會生成文件和文件夾，並在該位置復制所有必需的文件。 - “用戶”活動區域位於“app”目錄中。 App dir有視圖，控制器，模型和其他東西的子目錄。
- 與許多其他框架一樣，您需要保留文件夾結構，以便框架可以找到適當的文件並初始化它們。
- 文件列表：
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.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
}
});
注意：最初沒有啟動功能，但有自動生成視口（默認情況下生成一個）
應用程序/控制器/ Main.js
Ext.define('ExtGenApp.controller.Main', {
extend: 'Ext.app.Controller'
});
應用程序/視圖/ 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）
最后：
應用程序/視圖/ Main.js
Ext.define("ExtGenApp.view.Main", {
extend: 'Ext.Component',
html: 'Hello, World!!'
});
據我所知，這應該是“內容”。
因此，它會生成一個錯誤，即沒有創建“Ext.view.appBoxView”以及它對我的看法，框架不會初始化應用程序。
4 個解決方案
解決方案1
3 2013-05-22 00:48:32
視口只是一個專門的Ext.container.Container ，可以自動調整文檔正文。
因此，您可以在啟動方法中輕松創建自己的：
launch: function(){
new MyContainer({
renderTo: 'myDiv'
});
}
解決方案2
1 2013-07-12 00:02:40
在其中一些答案中，有些建議使用帶有renderTo的Ext.Panel。 如果你打算走這條路線，如果你不打算將它用於除容器以外的任何東西，你不應該使用Ext.Panel。 您應該使用Ext.container.Container。
通過使用Ext.Panel，您將添加一些不必要的東西，如標題欄等組件。 即使您不使用它們，每一個都會在那里放置額外的占位符。
解決方案3
1 2014-06-17 22:47:35
我喜歡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'
],
...
解決方案4
0 2013-06-25 12:18:49
您是否嘗試過使用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>
控制器如何在Extjs應用程序中與MVC一起使用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.