ExtJS4：使用面板、窗口还是容器？答案

【问题标题】：ExtJS4: Use Panel, Window, or Container?ExtJS4：使用面板、窗口还是容器？
【发布时间】：2014-10-17 18:00:05
【问题描述】：

我正在开发一个应用程序，我的要求是开发以下屏幕：

添加屏幕以接受用户输入（表单面板）
查看详细信息屏幕以显示用户输入（网格面板）
编辑屏幕以编辑用户输入（不确定应该是表单还是窗口）。

我有一个网格面板的“itemdblclick”侦听器。所以当用户双击网格行时，编辑屏幕必须打开，并在字段中填充详细信息。

我想为添加和编辑屏幕使用一个通用类，但这里的问题是，如果我扩展一个窗口，编辑屏幕会出现但不添加屏幕而如果我扩展一个面板，那么添加屏幕会打开但编辑屏幕不会出现..

Ext.define('ELM.view.cl.Edit',{                   
extend:'Ext.window.Window',
...

Ext.define('ELM.view.cl.Edit',{
extend : 'Ext.form.Panel',
...

注意：我有一个标签面板，在其中我将添加和查看屏幕添加为不同的标签，而编辑屏幕只是一个窗口。

据我所知，标签面板可能不能将窗口作为子组件。

请告诉我这里出了什么问题？我是否应该扩展一个“容器”，并且可以在其他地方指定“表单面板”和“窗口”。 ?如何达到我的要求？任何参考都会有所帮助..

提前致谢

【问题讨论】：

你能多分享一点你的代码，这样我就可以了解那里到底发生了什么？让我看看 itemdblclick 事件处理程序和“ELM.view.cl.Edit”的类定义
为了获得最大的可重用性，您可以创建一个作为表单面板的类。然后，您可以将其用于添加和编辑屏幕。作为面板，表单可以作为项目添加到窗口、选项卡面板的选项卡、另一个面板的子项等。

标签： extjs window extjs4.2 tabpanel formpanel

【解决方案1】：

我通过定义扩展表单面板的表单解决了这个问题：

Ext.define('ELM.view.cl.Edit',{
extend : 'Ext.form.Panel',
alias: 'widget.cledit',
...

然后在编辑窗口中显示表单。我创建了一个新窗口，然后将刚刚创建的表单面板添加为窗口的子元素。就是这样，

 Ext.define('ELM.view.cl.EditWindow',{                   
    extend:'Ext.window.Window',
   items: [
          {
             xtype: 'cledit'
          }
         ]
});

希望它可以帮助某人:)

【讨论】：