Question

我有这段代码：

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();
                }
            }
        ]
    }) 
});

它会创建一个名为“export”的下拉列表。我设法做到这一点，当我点击'导出'时，我得到一个窗口。现在这个窗口是空的。我一直在寻找，无法找到，是如何创建一个内部有一些文本的窗口，以及一些选项（下拉框）和标签等。更准确地说，我想要一个像我所附的窗口。我确信我可以找到关于如何创建它的示例，但我只是不知道要搜索什么。搜索“Extjs窗口”和类似的单词，没有给我带来帮助，也没有看到Senshas主页（通常有许多精彩的例子）。

有人可以帮帮我吗？感谢

enter image description here

Answer 1

在您的代码更改中

var win = new innerWindow();

到

var win = Ext.create('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'
       }]
    }]
});

文档位于：form，textfield，combobox。开始阅读the guides。您必须阅读文档才能理解。 ExtJs doc写得很好。

Answer 2

每个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的文档，它确实有关于项目的信息，它也包括示例。

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.window.Window

您还应该包含该窗口的布局，以便了解如何排列其项目。这是一个显示所有类型布局的链接：http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html

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

Answer 3

设置Extjs脚本

<script type='text/javascript' src='http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js'></script>

设置Extjs CSS

<link href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>

设置代码

<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>

您想要的 http://jsfiddle.net/ba3wnwpo/

在extjs中创建一个窗口

3 个答案: