ljg*_*gww 6 javascript extjs extjs4 extjs-mvc extjs4.2
到目前为止,我找到的所有示例都解释了如何在"视口"中呈现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应用程序方法似乎远远优越.
----编辑
我意识到我必须为这个问题提出起点.
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.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"以及它对我的看法,框架不会初始化应用程序.
视口只是一个专门的工具Ext.container.Container，可以根据文档正文自动调整大小。
因此，您可以在启动方法中轻松创建自己的：
launch: function(){
new MyContainer({
renderTo: 'myDiv'
});
}
| 归档时间： |
|
| 查看次数： |
12204 次 |
| 最近记录： |