Подтвердить что ты не робот

Render Ext.application в div

Я пытаюсь запустить ExtJS4 Ext.application внутри существующего шаблона веб-сайта. У нас есть div #content, в который я хочу разместить приложение для разработки. Как сделать приложение в этой области, а не заменять существующую html-страницу?

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
       //   renderTo: Ext.Element.get('#content')  doesn't work
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});
4b9b3361

Ответ 1

Вам нужно использовать другой контейнер, чем Ext.container.Viewport. Определением Ext.container.Viewport всегда будет занимать все окно браузера.

Из документации:

Видовой экран отображает себя в теле документа и автоматически определяет размер окна просмотра обозревателя и управляет изменением размера окна. На странице может быть только один вид, созданный на странице.

Просто используйте Ext.panel.Panel вместо

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.panel.Panel', {
            layout: 'fit',
            renderTo: Ext.get('content')
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});