在 EXT JS 中显示窗口

show the Window in EXT JS

本文关键字：显示窗口 JS EXT 更新时间：2024-04-13

var win,
        button = Ext.getCmp('show-btn');
    button.on('click', function(){
            win = Ext.define('MyApp.view.LeftRightWIndow', {
                extend: 'Ext.window.Window',
                height: 368,
                width: 546,
                title: 'My Window',
                initComponent: function() {
                    var me = this;
                    Ext.applyIf(me, {
                        items: [
                            {
                                xtype: 'container',
                                height: 193,
                                width: 515,
                                layout: {
                                    align: 'center',
                                    type: 'hbox'
                                },
                                items: [
                                    {
                                        xtype: 'container',
                                        flex: 1,
                                        margins: '',
                                        height: 135,
                                        padding: '10 10 10 10',
                                        width: 114,
                                        layout: {
                                            type: 'column'
                                        },
                                        items: [
                                            {
                                                xtype: 'textfield',
                                                padding: '0 0 10 0',
                                                width: 233,
                                                fieldLabel: 'Label'
                                            },
                                            {
                                                xtype: 'textfield',
                                                padding: '0 0 10 0',
                                                width: 233,
                                                fieldLabel: 'Label'
                                            }
                                        ]
                                    },
                                    {
                                        xtype: 'container',
                                        flex: 1,
                                        margins: '',
                                        height: 135,
                                        padding: '10 10 10 10',
                                        width: 114,
                                        layout: {
                                            type: 'column'
                                        },
                                        items: [
                                            {
                                                xtype: 'textfield',
                                                padding: '0 0 10 0',
                                                width: 233,
                                                fieldLabel: 'Label'
                                            },
                                            {
                                                xtype: 'textfield',
                                                padding: '0 0 10 0',
                                                width: 233,
                                                fieldLabel: 'Label'
                                            }
                                        ]
                                    }
                                ]
                            }
                        ],
                        dockedItems: [
                            {
                                xtype: 'toolbar',
                                dock: 'top',
                                items: [
                                    {
                                        xtype: 'tbtext',
                                        autoRender: true,
                                        cls: 'save',
                                        height: 26,
                                        padding: '5 5 5 5',
                                        width: 43,
                                        text: 'Save'
                                    },
                                    {
                                        xtype: 'tbseparator'
                                    },
                                    {
                                        xtype: 'tbtext',
                                        autoRender: true,
                                        cls: 'edit',
                                        height: 26,
                                        padding: '5 5 5 5',
                                        width: 43,
                                        text: 'Edit'
                                    }
                                ]
                            }
                        ]
                    });
                    me.callParent(arguments);
                }
            });
  });

按下show-btn时如何显示窗口？
这个代码我正在使用Sencha Articheh来创建。知道吗？

使用Ext.define()方法可以定义类，但不创建类的实例。要创建类实例，您必须使用Ext.create()方法。

我还建议将类定义移到单击处理程序之外以分隔文件。如果您使用的是由 Sencha 架构师创建的标准应用程序结构，请在视图文件夹中创建具有类定义的文件。

因此，在单击处理程序中，您将只有：

// create instance of MyApp.view.LeftRightWIndow class
win = Ext.create('MyApp.view.LeftRightWIndow');
// display window
win.show();

在当前时刻单击事件，只需创建窗口对象而不显示它。要在单击"show-btn"后显示窗口，您只需调用窗口对象的show((方法即可。因此，请尝试将win.show()放在最后一行之前，如下所示：

...
                me.callParent(arguments);
            }
        });
    win.show();
});