javascript 在 extjs 中创建一个窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22309362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a window in extjs
提问by user1960836
I have this code:
我有这个代码：
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();
}
}
]
})
});
It creates a dropdown that has a value called 'export'. I have managed to make it so that, when I click the 'Export', I get a window. For now this window is empty. What I have been looking for, and unable to find, is how to create a window that has some text inside, and some options (dropdown box), and labels etc. More precisly, I want a window like the one I attached. I'm sure I can find examples on how to create this, but I just don't know what to search for. Searching on "Extjs window" and similar words, didnt bring me the help I'm looking for, nor looking at Senshas homepage (which normally has lots of brilliant examples).
它会创建一个下拉菜单，其中包含一个名为“export”的值。我设法做到了，当我单击“导出”时，我会看到一个窗口。现在这个窗口是空的。我一直在寻找但无法找到的是如何创建一个窗口，其中包含一些文本、一些选项（下拉框）和标签等。更准确地说，我想要一个像我附加的窗口。我确定我可以找到有关如何创建它的示例，但我只是不知道要搜索什么。搜索“Extjs 窗口”和类似的词，并没有给我带来我正在寻找的帮助，也没有查看 Senshas 主页（通常有很多精彩的例子）。
Can someone help me out? Thanks
有人可以帮我吗？谢谢
回答by Lorenz Meyer
In your code change
在您的代码更改
var win = new innerWindow();
to
到
var win = Ext.create('innerWindow');
Then just define your window with the form inside:
然后用里面的表单定义你的窗口：
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'
}]
}]
});
The documentation is here: form, textfield, combobox. Start reading the guides. You must read the docs to understand. ExtJs doc is well written.
文档在这里：form，textfield，combobox。开始阅读指南。您必须阅读文档才能理解。ExtJs 文档写得很好。
回答by martskins
Each ExtJS component has a property named items...
每个 ExtJS 组件都有一个名为 items...
You should be adding the fields you want into the items property.
您应该将所需的字段添加到 items 属性中。
It would look something like this..
它看起来像这样..
Ext.define('innerWindow', {
extend: 'Ext.window.Window',
title: 'title',
height: 200,
width: 500,
modal: true,
items:[
{
xtype:"textfield",
......
},{
xtype:"combobox",
store:myStore,
.......
}
]
});
You should check the docs of Window, it does have info about items, and it also does include examples.
您应该查看 Window 的文档，它确实包含有关项目的信息，并且还包含示例。
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.window.Window
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.window.Window
You should also include a layout for that window, for it to know how to arrange its items. Here's a link showing all types of layouts: http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html
您还应该包括该窗口的布局，以便它知道如何安排其项目。这是显示所有类型布局的链接：http: //dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html
Also, I'm not sure about the new innerWindow, I'd rather use Ext.create('innerWindow')to create a new instance of a component you've defined.
另外，我不确定new innerWindow，我宁愿使用它Ext.create('innerWindow')来创建您定义的组件的新实例。
回答by Rogerio de Moraes
Set Extjs Script
设置 Extjs 脚本
<script type='text/javascript' src='http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js'></script>
Set Extjs CSS
设置 Extjs CSS
<link href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>
Set Code
设置代码
<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>
Similar you wanthttp://jsfiddle.net/ba3wnwpo/
