ExtJS 5 Создание приложения без использования Viewport

Я начал писать приложения для встраивания в существующие веб-страницы:ExtJS 5 Создание приложения без использования Viewport

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 Создание приложения без использования Viewport

ответ

Смежные вопросы