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創建應用程序，而無需使用視口

回答

相關問題