Все примеры, которые я нашел до сих пор, объясняют, как визуализировать приложение ExtJS (4.2) MVC в «области просмотра», что, другими словами, означает полный экран браузера и занимает все тело HTML.
Я хотел бы отобразить приложение на существующей HTML-странице с именем DIV, чтобы я мог иметь HTML-дизайн вокруг приложения.
<div id="appdiv"><!-- application runs here --></div>
Я видел некоторые сайты с примерами ExtJS 4, которые используют трюк для отображения приложения ExtJS на странице с помощью IFRAME.
Можно ли избежать IFRAME? И если да, то как будет выглядеть скелет приложения ExtJS 4.2, если он будет отображаться в div.
Примечания: в ExtJS 3 я нашел решение, создав панель в качестве основного контейнера, который отображается в именованном div. Однако версия 4.2 (и, возможно, более ранние версии 4.x) предлагает подход к применению MVC, который кажется намного лучше.
---- Правки
Я понял, что я должен поставить отправные точки для этого вопроса.
- Исходный код для этого примера создается с помощью команды CMD ExtJS, которая создает скелет каркаса «приложения».
- Каркас приложения состоит из множества файлов, включая ссылку на движок и другие ссылки, поэтому я не смог бы включить сюда все источники в каталоге/папке «приложения». Каркас приложения можно сделать с помощью cmd в моде:
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», и, как мне кажется, фреймворк не инициализирует приложение.
