Rendering ExtJS 4+ MVC application in a html div - how-to?
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.
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>
I've seen some sites with ExtJS 4 examples that use trick to render ExtJS app within the page by using IFRAME.
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.
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.
---- Edits
I have realised that I have to put starting points for this question.
- 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 (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)
app/controller/Main.js
Ext.define('ExtGenApp.controller.Main', {
extend: 'Ext.app.Controller'
});
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'
}]
}]
});
this shall be initial layout on the screen (AFAIK)
and finally:
app/view/Main.js
Ext.define("ExtGenApp.view.Main", {
extend: 'Ext.Component',
html: 'Hello, World!!'
});
which shall, as I understood, be the "content".
as is, it generates an error of not founding "Ext.view.appBoxView" and how it looks to me, framework do not initialise the application.
Answer
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'
});
}