ExtJS的5创建应用程序，而无需使用视口

，我已经开始写一个应用程序中嵌入现有的网页里：ExtJS的5创建应用程序，而无需使用视口

enter image description here

我最初创建与煎茶CMD的应用程序，但得知视拿起当我将脚本包含在HTML中时，整个网页。然后，我遵循本指南：http://extjs.eu/single-file-extjs-5-application/在网页内部创建一个工作示例。我现在意识到尝试用这个创建一个可管理的应用程序是一个糟糕的主意，现在我正试图将它移植过来。

我试图创建一个网页，只字头：

HTML：

<!DOCTYPE HTML> 
<html manifest=""> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta charset="UTF-8"> 

    <title>Title</title> 

    <!-- The line below must be kept intact for Sencha Cmd to build your application --> 
    <script id="microloader" type="text/javascript" src="bootstrap.js"></script> 

</head> 
<body><h1>Header</h1><div id="myDiv"></div></body> 
</html>

的application.js：

Ext.define('MyApp.Application', { 
    extend: 'Ext.app.Application', 

    name: 'MyApp', 

    controllers: [ 
     'MainController' 
    ], 

    views: ['MyApp.view.MainView'], 
    stores: [ 
     // TODO: add global/shared stores here 
    ], 
    launch: function() { 
     Ext.create('Ext.panel.Panel', { 
      layout: 'fit', 
      renderTo: 'myDiv', 
      width: 500, 
      height: 500, 
      items: [ 
       { 
        xtype: 'textfield', 
        title: 'example', 
        html: 'textfield' 
       } 
      ] 
     }); 
    } 
});

app.js

Ext.application({ 
    name: 'MyApp', 

    extend: 'MyApp.Application' 
});

的MainView .js

Ext.define('MyApp.view.MainView', { 
    extend: 'Ext.panel.panel', 
    alias: 'widget.mainview', 
    initComponent: function() { 
     var me = this, 
      cfg = {} 
      ; 

     Ext.apply(cfg, { 
      layout: { 
       type: 'hbox', 
       align: 'stretch' 
      }, 
      items: [{ 
       xtype: 'container', 
       layout: { 
        type: 'vbox', 
        align: 'stretch' 
       }, 
       items: [{ 
        title: 'title', 
        xtype: 'barcode'}] 
      }] 
     }); 
    } 
});

对不起，很长的文章。我不知道我在做什么。谢谢你的帮助。

来源

2014-09-24 user4067565

IMO你不需要在那种情况下创建应用程序。你可以在没有应用的情况下使用ExtJS组件，在这种情况下它看起来很合理。使用renderTo设置渲染目标。

实施例：

Ext.onReady(function() { 
    Ext.create('Ext.Panel', { 
     renderTo: 'myDiv', // id of target html element 
     html: 'something' 
    }); 
});

工作样品：http://jsfiddle.net/f6qku062/2/

来源

2014-09-24 19:14:12 Krzysztof

ExtJS的5创建应用程序，而无需使用视口

回答

相关问题