如何将表单面板放在ExtJS 4的窗口中

时间:2014-05-05 20:37:31

标签: extjs

我试图将一个表单放在一个窗口中,我正在研究Web桌面的示例,我在开始菜单上添加一个新条目,它应该调用一个窗口,在该窗口内必须有一个表单,但它似乎无法在窗口内显示窗体。我粘贴表单的代码和创建窗口的模块。

现在问题解决了,所以我要把解决方案放在代码中。

面板代码

Ext.define('MyDesktop.HelloWorldWindow',{
    extend:'Ext.form.Panel',
    bodyPadding: 10,
    defaultType: 'textfield',
    items: [
        {
            fieldLabel: 'First Name',
            name: 'firstName',
            anchor:'100%'
        },
        {
            fieldLabel: 'Last Name',
            name: 'lastName',
            anchor:'100%'
        },
        {
            xtype: 'datefield',
            fieldLabel: 'Date of Birth',
            name: 'birthDate',
            anchor:'100%'
        }
    ]
});

创建窗口的模块的代码。

Ext.define('MyDesktop.HelloWorldWindowModule', {
    extend: 'Ext.ux.desktop.Module',

    init : function(){
        this.launcher = {
            text: 'Hello World',
            iconCls:'bogus',
            handler : this.createWindow,
            scope: this,
            id:'hello-world'
        }
    },

    createWindow : function(src){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('hello-world');
        var hello = new MyDesktop.HelloWorldWindow();
        if(!win){

            win = desktop.createWindow({
                id: 'helloWorld',
                title:src.text,
                width:640,
                height:480,
                iconCls: 'bogus',
                animCollapse:false,
                constrainHeader:true,
                items: [hello]
            });
        }
        win.show();
        return win;
    }
});

当我点击" Hello World"菜单中的选项。 Web Desktop

现在magick工作了;) It works!

1 个答案:

答案 0 :(得分:2)

createWindow添加layout:'fit'并将项目更改为items:[hello]