jjzjj

javascript - 在 html div 中呈现 ExtJS 4+ MVC 应用程序 - 如何做?

coder 2024-12-27 原文

到目前为止,我找到的所有示例都解释了如何在“视口(viewport)”中呈现 ExtJS (4.2) MVC 应用程序,换句话说,这意味着整个浏览器屏幕,并占据整个 HTML 主体。

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

 <div id="appdiv"><!-- application runs here --></div>

我见过一些带有 ExtJS 4 示例的站点,它们使用技巧通过使用 IFRAME 在页面中呈现 ExtJS 应用程序。

是否可以避免使用 IFRAME?并且,如果是的话,ExtJS 4.2 应用程序的骨架在 div 中呈现时应该是什么样子。

注意:在 ExtJS 3 中,我找到了解决方案,方法是创建一个面板作为主容器,在命名的 div 中呈现。然而,4.2 版(可能还有更早的 4.x 版)建议使用 MVC 应用程序方法,这似乎要好得多。

---- 编辑

我意识到我必须为这个问题设定起点。

  1. 此示例的源代码由生成“应用程序”框架框架的 ExtJS 的 CMD 命令生成。
  2. 应用程序的骨架由许多文件组成,包括引擎引用和其他引用,因此我无法在此处包含“应用程序”目录/文件夹中的所有源。可以使用 cmd 以时尚的方式完成应用程序的骨架:sencha -sdk/myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp/mywebroot/htdocs/extja_genapp 这会生成文件和文件夹并复制所有必要的文件文件。
  3. “用户”事件区域位于“应用程序”目录中。 App 目录包含 View 、 Controller 、模型和其他内容的子目录。
  4. 与许多其他框架一样,您需要保留文件夹结构,以便框架可以找到合适的文件并对其进行初始化。
  5. 文件列表:

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>

应用程序/应用程序.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      
        }
    });

注意:本来没有launch函数,但是有自动生成视口(viewport)(默认生成器获取)

应用程序/ Controller /Main.js

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

应用程序/ 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)

最后:

应用程序/ View /Main.js

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

据我了解,这应该是“内容”。

照原样,它会生成一个未创建“Ext.view.appBoxView”的错误,在我看来,框架不会初始化应用程序。

最佳答案

视口(viewport)只是一个专门的 Ext.container.Container,它会根据文档主体自动调整大小。

因此,您可以轻松地在启动方法中创建自己的:

launch: function(){
    new MyContainer({
        renderTo: 'myDiv'
    });
}

关于javascript - 在 html div 中呈现 ExtJS 4+ MVC 应用程序 - 如何做?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16681590/

有关javascript - 在 html div 中呈现 ExtJS 4+ MVC 应用程序 - 如何做?的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  4. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息? 最佳答案 在Rails3中,update_all不返回任何有意义的信息,除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  5. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  6. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序,我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  7. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  8. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  9. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件? - 2

    在选择我想要运行操作的频率时,唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案,但您可以安排它每天运行,并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/8692687/

  10. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据,就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理?我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题;这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML,但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中,将我的XML代码修改为

随机推荐