Javascript 在extjs中创建窗口

我有以下代码：

Ext.define('innerWindow', {
   extend: 'Ext.window.Window',
   title: 'title',
   height: 200,
   width: 500, 
   modal: true
});

tb = Ext.getCmp('head-toolbar');
tb.add({
    text: 'Export',
    menu: Ext.create('Ext.menu.Menu', {
        items: [
            {
                text: 'Export',
                handler: function () {
                    var win = new innerWindow();
                    win.show();
                }
            }
        ]
    }) 
});

它创建一个下拉列表，该下拉列表具有一个名为“导出”的值。我已经设法做到了，当我点击“导出”时，我会看到一个窗口。现在这个窗口是空的。我一直在寻找，但找不到的是如何创建一个包含一些文本、一些选项下拉框和标签等的窗口。 更确切地说，我想要一个像我连接的窗户一样的窗户。我相信我能找到关于如何创建这个的例子，但我只是不知道要搜索什么。在Extjs窗口和类似的单词上搜索，没有给我带来我想要的帮助，也没有看到Senshas主页，它通常有很多精彩的例子

有人能帮我吗？ 谢谢

---

每个ExtJS组件都有一个名为items的属性

您应该将所需的字段添加到items属性中

它看起来像这样

Ext.define('innerWindow', {
   extend: 'Ext.window.Window',
   title: 'title',
   height: 200,
   width: 500, 
   modal: true,
   items:[
       {
           xtype:"textfield",
           ......
       },{
           xtype:"combobox",
           store:myStore,
           .......
       }
   ]

});

你应该检查Window的文档，它确实有关于项目的信息，而且它也包含示例

您还应该包括该窗口的布局，以便它知道如何排列其项目。以下是显示所有类型布局的链接：

---

另外，我不确定新的innerWindow，我宁愿使用Ext.create'innerWindow'来创建您定义的组件的新实例。

每个ExtJS组件都有一个名为items的属性

您应该将所需的字段添加到items属性中

它看起来像这样

Ext.define('innerWindow', {
   extend: 'Ext.window.Window',
   title: 'title',
   height: 200,
   width: 500, 
   modal: true,
   items:[
       {
           xtype:"textfield",
           ......
       },{
           xtype:"combobox",
           store:myStore,
           .......
       }
   ]

});

你应该检查Window的文档，它确实有关于项目的信息，而且它也包含示例

您还应该包括该窗口的布局，以便它知道如何排列其项目。以下是显示所有类型布局的链接：

另外，我不确定新的innerWindow，我宁愿使用Ext.create'innerWindow'来创建您定义的组件的新实例。

在您的代码更改中

var win = new innerWindow();

到

然后，只需定义包含表单的窗口：

Ext.define('innerWindow', {
   extend: 'Ext.window.Window',
   title: 'title',
   height: 200,
   width: 500, 
   modal: true,
   items: [{
       xtype: 'form',
       items: [{
           xtype: 'textfield',
           fieldLabel: 'Age',
           name: 'age'
       },{
           xtype: 'textfield',
           fieldLabel: 'Height',
           name: 'height'
       }],
       fbar: [{
           text: 'Submit',
           formBind: true,
           itemId: 'submit'
       }]
    }]
});

文档在这里：。开始阅读。你必须阅读文档才能理解。ExtJs文档写得很好。

在您的代码更改中

var win = new innerWindow();

到

然后，只需定义包含表单的窗口：

Ext.define('innerWindow', {
   extend: 'Ext.window.Window',
   title: 'title',
   height: 200,
   width: 500, 
   modal: true,
   items: [{
       xtype: 'form',
       items: [{
           xtype: 'textfield',
           fieldLabel: 'Age',
           name: 'age'
       },{
           xtype: 'textfield',
           fieldLabel: 'Height',
           name: 'height'
       }],
       fbar: [{
           text: 'Submit',
           formBind: true,
           itemId: 'submit'
       }]
    }]
});

文档在这里：。开始阅读。你必须阅读文档才能理解。ExtJs文档写得很好。

设置ExtJs脚本

设置extjscss

设置代码

类似于您想要的

设置Extjs脚本

设置extjscss

设置代码

---

类似于你想要的

事实上，我认为使用新的很好。它实际上也会给性能带来一点提升。如果你想学习ExtJS的MVC架构，我绝对不会在同一个文件中定义一个类并使用它。它实际上也会给性能带来一点提升。如果你想学习ExtJS的MVC架构，我绝对不会在同一个文件中定义一个类并使用它。

<script type='text/javascript'>
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
                title: 'Windows',
                closable: true,
                closeAction: 'hide',
                width: 350,
                minWidth: 250,
                height: 125,
                animCollapse:false,
                border: false,
                modal: true,
                layout: {
                    type: 'border',
                    padding: 5
                },
   items: [{
       xtype: 'form',
       items: [{
           xtype      : 'combo',
           fieldLabel : 'Age',
           width      : 320,
           store      : [ '18', '19', '20' ]
        },{
           xtype      : 'combo',
           fieldLabel : 'Height',
           width      : 320,
           store      : [ '1', '2', '3' ]
        },],
       fbar: [{
           text: 'Submit',
           formBind: true,
           itemId: 'submit'
       }]
    }]
            }).show();
}); 

</script>