All the examples that I have found so far explain how to render the MVC ExtJS (4.2) application in the "viewport", which means that it is a full browser screen and takes up all the HTML code.
I would like to display the application on an existing HTML page in the DIV title so that I can have HTML design around the application.
<div id="appdiv"></div>
I saw some sites with ExtJS 4 examples that use a trick to render an ExtJS application on a page using IFRAME.
Is it possible to avoid an iframe? And if so, what does the skeleton of the ExtJS 4.2 application look like if it is displayed in a div.
Notes. In ExtJS 3, I found a solution by creating a panel as the main container that displays inside the named div. However, version 4.2 (and possibly earlier versions 4.x) offers an approach to MVC applications that seems far superior.
---- Editing
I realized that I had to put the starting points for this question.
- The source for this example is generated by the ExtJS CMD command, which generates the application wireframe.
- The application’s skeleton consists of many files, including a link to the engine, and other links, so I couldn’t include all the sources in the "application" dir / folder here. The application’s skeleton can be made using cmd into fashion:
sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genapp This creates files and folders and copies all the necessary files into place. - The scope of the "User" is in the "app" directory. The dir app has tricks for browsing, controllers, models, and additional content.
- As in many other environments, you must maintain the folder structure so that the environment can find the appropriate files and initialize them.
- list of files:
index.html (at the root of the created application)
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>ExtGenApp</title> <link rel="stylesheet" href="bootstrap.css"> <script src="ext/ext-dev.js"></script> <script src="bootstrap.js"></script> <script src="app/app.js"></script> </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: initially there is no launch function, but there is an automatic creation of the viewport (it turns out that by default the generator)
Application / 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' }] }] });
it should be the initial layout on the screen (AFAIK)
and finally:
app / view / Main.js
Ext.define("ExtGenApp.view.Main", { extend: 'Ext.Component', html: 'Hello, World!!' });
which, as I understand it, should be "content."
as it is, it generates an error without creating "Ext.view.appBoxView" and as it looks to me, the framework does not initialize the application.