什么是extjs4中的视口面板

extjs4中的“视口>面板”是什么意思？什么时候会被叫？使用它的意义是什么？什么是extjs4中的视口面板

init : function() { 
    console.log('In init function'); 
    this.control({ 
     'viewport > panel' : { 
      render : this.onPanelRendered 
     } 
    }); 
}

因为它是在初始化函数，我知道它是在应用程序启动时调用。但是我的代码没有进入到onPanelRendered方法中，所以我认为'viewport> panel'条件失败了，但是我想知道它到底做了什么以及可以使用哪些其他选项。

在此先感谢

来源

2014-08-28 user777777

我觉得'视口>面板'有一个CSS选择器。参考http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.app.EventBus-method-control – Sreek521 2014-08-28 12:13:12

的ExtJS自带的单页Web应用程序的类别下（一般来说，这些项目将只有切入点）。这些单页网页应用程序控制浏览器的可见区域，这个区域在ExtJS中被称为“视口”。 ExtJS4开始从视口渲染应用程序。它是一个扩展容器。您可以查看适用于视口here的文档和配置参数。

文件说

视口使自身到文档正文，并自动调整大小本身到浏览器窗口的大小并管理窗口大小调整。可能只有一个Viewport在页面中创建。 Blockquote

这就是所有关于视口。

回到第二个问题 “什么时候会被叫？”。当ExtJS应用程序准备就绪时，它会搜索viewport.js并开始在body上渲染它。这意味着只要您的应用程序准备就绪，它就会被调用。

最后让我们看看控制器中视口的用法。

'viewport > panel' : { 
     render : this.onPanelRendered 
    }

在这里，您打电话给dom查询以获取面板事件。上面的声明说，转到视口项目的第一个面板并执行渲染事件。在这种情况下，只要panel得到渲染，就会调用this.onPanelRendered。

可能出现的问题可能是

“onPanelRendered”是不是可以在控制器的范围
视可能没有面板
如果视口具有面板，其“渲染”活动可能已经被覆盖
应用程序配置可能不正确

您仍然无法弄清楚，发布完整的代码和错误，如果有的话。

来源

2014-08-28 17:16:06 Bala

感谢很好的解释。我现在明白了。 – user777777 2014-09-02 13:56:27

我有一个关于这个问题..在条件'视口>面板'视口引用类名右？如果我想在容器或用户定义的类中找到面板，该怎么办？我能做到吗？ – user777777 2014-09-02 14:00:06

你可以试试这个viewport> panel [cls = my-cls]，这里面板只是一个xtype，你可以给用户定义的xtype而不是panel。您也可以应用逻辑操作（如'和'，'或'），您还可以通过组件的属性（如collapsible = true，cls = ..）查找。有关更多选项，请查看：http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ComponentQuery – Bala 2014-09-02 15:58:18

extjs中的视口是应用程序呈现的整个浏览器窗口。 viewport > panel不是一个条件。您只需使用CSS选择器在视口内查找任何面板，并使用onPanelRendered方法连接渲染事件。

来源

2014-08-29 20:21:59

什么是extjs4中的视口面板

回答

相关问题