在html div中渲染ExtJS 4+ MVC应用程序 - how-to? [英] Rendering ExtJS 4+ MVC application in a html div - how-to?

查看:97
本文介绍了在html div中渲染ExtJS 4+ MVC应用程序 - how-to?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我迄今为止发现的所有例子都解释了如何在视口中渲染ExtJS(4.2)MVC应用程序,换句话说就是完整的浏览器屏幕,并占据整个HTML BODY。

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.

我想在名为DIV的现有HTML页面中呈现应用程序,以便我可以在应用程序周围进行HTML设计。

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>

我已经看到一些使用ExtJS 4的示例,使用技巧在页面中呈现ExtJS应用程序使用IFRAME。

I've seen some sites with ExtJS 4 examples that use trick to render ExtJS app within the page by using IFRAME.

有可能避免IFRAME吗?而且,如果是,ExtJS 4.2应用程序的框架应如何在div中呈现。

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.

注意:在ExtJS 3中,我通过创建一个面板作为主容器,在命名div中呈现,找到了解决方案。然而,版本4.2(和可能早期的4.x)表明MVC应用程序看起来远远优于

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.

----编辑

我已经意识到我必须提出这个问题的起点。

I have realised that I have to put starting points for this question.


  1. 这个例子的来源是由ExtJS生成应用程序框架框架的CMD命令。

  2. 应用程序的骨架由许多文件组成,包括引用引用和其他引用,因此我无法在此列出所有来源应用程序目录/文件夹。应用的骨架可以在方式使用CMD来完成:煎茶-sdk /myuserroot/Sencha/Cmd/3.1.1.274生成应用ExtGenApp / mywebroot / htdocs中/ extja_genapp 这产生文件文件夹和副本中的所有必需文件。

  3. 用户活动区域在应用程序目录中。 App dir具有视图,控制器,模型和附加内容的子目录。

  4. 像许多其他框架一样,您希望保留文件夹结构,以便框架可以找到相应的文件并进行初始化。

  5. 文件列表: / li>
  1. Source for this example is generated by ExtJS's CMD command that generates "application" framework skeleton.
  2. 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_genapp This generates files and folders and copies all necessary files in the place.
  3. "User" activity area is in "app" dir. App dir has subdirs for views, controllers, models and additional stuff.
  4. As in many other frameworks you are expected to keep folder structure so that framework can find appropriate files and initialise them.
  5. list of files:

index.html(在生成的应用程序的根目录中)

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

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

app/controller/Main.js

    Ext.define('ExtGenApp.controller.Main', {
        extend: 'Ext.app.Controller'
    });

app / view / appBoxView.js

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'
            }]
        }]
    });

这将是屏幕上的初始布局(AFAIK)

this shall be initial layout on the screen (AFAIK)

最后:

app / view / Main.js

app/view/Main.js

    Ext.define("ExtGenApp.view.Main", {
        extend: 'Ext.Component',
        html: 'Hello, World!!'
    });

据我所知,这是内容。

就是这样,它会产生一个没有创建Ext.view.appBoxView的错误以及它对我的看法,框架不会初始化应用程序。

as is, it generates an error of not founding "Ext.view.appBoxView" and how it looks to me, framework do not initialise the application.

推荐答案

视口只是一个专门的 Ext.container.Container ,它将自动调整到文档正文。

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'
    });
}

这篇关于在html div中渲染ExtJS 4+ MVC应用程序 - how-to?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆