Все примеры, которые я нашел до сих пор, объясняют, как визуализировать приложение MVC ExtJS (4.2) в «окне просмотра», что, другими словами, означает полный экран браузера и занимает весь HTML-код.Rendering ExtJS 4+ MVC-приложение в html div - как?
Я хотел бы визуализировать приложение на существующей странице HTML в названии DIV, так что я могу иметь HTML-дизайн вокруг приложения.
<div id="appdiv"><!-- application runs here --></div>
Я видел несколько сайтов с ExtJS 4 примеров, которые используют трюк, чтобы сделать ExtJS приложения в пределах страницы с помощью IFRAME.
Можно ли избежать IFRAME? И если это так, то как выглядит скелет приложения ExtJS 4.2, если он будет отображаться в div.
Примечания: В ExtJS 3 Я нашел решение, создав панель в качестве основного контейнера, который отображает внутри named div. Однако версия 4.2 (и, возможно, более ранние версии 4.x) предлагает подход к MVC-приложениям, который кажется намного превосходящим.
---- редактирует
Я понял, что я должен поставить отправные точки для этого вопроса.
- Источник для этого примера генерируется командой CMD от ExtJS, которая генерирует каркас каркаса приложения.
- Скелет приложения состоит из множества файлов, включая ссылку на двигатель, и другие ссылки, поэтому я не смог бы включить сюда все источники в папку «application» dir /. Скелет приложения можно сделать с помощью cmd в моду:
sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genappЭто создает файлы и папки и копирует все необходимые файлы на место. - Область действия "Пользователь" находится в директории "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)
и, наконец:
app/view/Main.js
Ext.define("ExtGenApp.view.Main", {
extend: 'Ext.Component',
html: 'Hello, World!!'
});
, который должен, как я понял, быть «контентом».
как есть, он генерирует ошибку, не создавая «Ext.view.appBoxView» и как он выглядит для меня, фреймворк не инициализирует приложение.
Re: Meredith, к сожалению, из-за комбинации сомнительного внешнего лицензирования (для коммерческого продукта), и в то же время эти начальные препятствия, проект, для которого было проведено это исследование, получил новый путь, так что, честно говоря, я не имел большого количества времени, тем временем, чтобы оценить ответы , Я планирую оценить и закрыть этот вопрос, если это достаточно ясно. В то же время я бы попросил также руководство от админов, поскольку этот вопрос, похоже, вызвал упрямые ответы и может показать более интересные сведения о структуре EXT.js MVC, возможно, еще некоторое время оставаться открытым? – ljgww
Также я начал думать, что авторы Ext.Js не предполагали использовать эту структуру в моде, который я описал. Создание приложения для работы в полноразмерном браузере исключает первоначальную идею проекта ext.js в большую систему. – ljgww
??? Не уверен, что я сказал в своем комментарии (если я когда-либо делал это в прошлом году?), Но я уже давно перешел от использования ExtJS. В итоге я использовал его как полностраничную инфраструктуру приложения, а не только один компонент сетки, как планировали его дизайнеры. В некоторых плагинах группировки была ошибка, если сетка не использовалась таким образом. – Meredith