Question

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来创建。任何想法？

Answer 1

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

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

所以在点击处理程序中你将只有：

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

Answer 2

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

...
                me.callParent(arguments);
            }

        });
    win.show();
});

在EXT JS中显示Window

2 个答案: