extjs的window布局

最新推荐文章于 2021-08-03 21:06:15 发布

原创最新推荐文章于 2021-08-03 21:06:15 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs

extjs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用ExtJS创建的个人资料窗口示例，该窗口包含多种字段如姓名、年龄、邮箱等，并展示了如何设置布局及按钮。此外，还演示了如何加载图像作为头像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  Ext.onReady(function () {
            var win = new Ext.Window({
                title: "个人资料",
                width: 500,
                height: 320,
                plain: true,
                layout: "form",
                defaultType: "textfield",
                labelWidth: 45,
                bodyStyle: "padding-top: 10px; padding-left:10px;",
                //defaults:{anchor:"100%"},      
                items: [{
                    xtype: "panel",
                    baseCls: "x-plain",
                    layout: "column",
                    items: [{
                        columnWidth: .5,
                        layout: "form",
                        defaults: { xtype: "textfield", width: 170 },
                        labelWidth: 45,
                        baseCls: "x-plain",
                        //bodyStyle:"padding-top: 15px; padding-left:10px;",      
                        items: [
                            { fieldLabel: "姓名" },
                            { fieldLabel: "年龄" },
                            { fieldLabel: "邮箱" },
                            { fieldLabel: "性别" },
                            { fieldLabel: "电话" },
                            { fieldLabel: "地址" }
                        ]
                    },
                    {
                        columnWidth: .5,
                        layout: "form",
                        style: "padding:10px 10px 0 10px",
                        //顺序是 上 右 下 左，也就是顺时针的方向  
                        //bodyStyle:"padding-top: 15px; padding-left:10px;",     
                        labelWidth: 45,
                        baseCls: "x-plain",
                        items: [
                            {
                                xtype: "textfield",
                                inputType: "image",
                                width: 160,
                                height: 140,
                                fieldLabel: "头像"
                            }
                        ]
                    }
                    ]
                }, {
                    fieldLabel: "公司",
                    width: "400"
                }, {
                    fieldLabel: "资料",
                    width: "400"
                }, {
                    fieldLabel: "说明",
                    width: "400"
                }],
                showLock: false,
                listeners: {
                    "show": function (win) {
                        if (!win['showLock']) {
                            win.findByType("textfield")[6].getEl().dom.src =
                            "...";
                            win["showLock"] = true;
                        }
                    }
                },
                buttons: [
                    { text: "OK" },
                    { text: "Cancel" }
                ]
            });
            win.show();
        });
    </script>