我们如何使用浏览器的控制台在ExtJS中显示视图

Question

有什么方法可以显示我们的视图而无需在控制器中创建任何按钮单击事件

Answer 1

控制台视图

将视图的xtype和id赋予“视口”项，然后将代码粘贴到控制台中

Ext.Viewport.add({
        xtype : 'panel',
        itemId : 'testingOverlay', 
        showAnimation : {
            type : 'popIn',
            duration : 250,
            easing : 'ease-out'
        },
        hideAnimation : {
            type : 'popOut',
            duration : 250,
            easing : 'ease-out'
        },

        height : '630px',
        width : '335px',
        left : '210px',
        top : '205px', 
        items :  [{
            xtype : 'viewXtype',
            id : 'viewId'
        }],


        });

Answer 2

您还可以使用renderTo属性，如果指定renderTo：Ext.getBody（），它将呈现内容或将ext.getBody（）替换为html元素。

但是在实际应用中，您将需要一个视口，这要好于renderTo

Fiddle Sample Code

Ext.create('Ext.panel.Panel',{
title:'Test Panel',
width:400,
height:500,
renderTo:Ext.getBody()
});