ExtJs 添加员工 实例 ---- 锚点布局 anchor 可自动伸缩

<script type="text/javascript">

        Ext.onReady(function () {
            // 创建一条记录行, job 为 displayField 名称
            var JOB = Ext.data.Record.create([{ name: "job"}]);

            new Ext.Window({
                title: "添加人员",
                width: 500,
                height: 350,
                layout: "form",
                labelWidth: 55,
                plain: true,
                bodyStyle: "padding:5px",
                defaultType: "textfield",
                defaults: { anchor: "95%" },
                items: [{
                    xtype: "panel",
                    frame: true,
                    baseCls: "x-plain",
                    layout: "column",
                    items: [{
                        columnWidth: 0.5,
                        layout: "form",
                        labelWidth: 55,
                        defaultType: "textfield",
                        baseCls: "x-plain",
                        defaults: { width: 160 },
                        items: [{
                            fieldLabel: "姓名"
                        }, {
                            id: "age",
                            fieldLabel: "年龄",
                            value: 20
                        }, {
                            xtype: "datefield",
                            format: "Y-m-d",
                            value: new Date(),
                            readOnly: true,
                            fieldLabel: "出生日期",
                            listeners: {
                                "blur": function () {
                                    var age = new Date().getFullYear() - this.getValue().getFullYear() + 1;
                                    Ext.getCmp("age").setValue(age);
                                }
                            }
                        }, {
                            fieldLabel: "联系电话"
                        }, {
                            fieldLabel: "手机号码"
                        }, {
                            fieldLabel: "电子邮件"
                        }, {
                            xtype: "combo",
                            triggerAction: "all",
                            readOnly: true,
                            value: "男",
                            store: [‘男‘, ‘女‘],
                            fieldLabel: "性别"
                        }]
                    }, {
                        columnWidth: 0.5,
                        layout: "form",
                        labelWidth: 55,
                        baseCls: "x-plain",
                        items: {
                            id: "imgTest",
                            xtype: "textfield",
                            fieldLabel: "个人照片",
                            width: 163,
                            height: 177,
                            inputType: "image"
                        }
                    }]
                }, {
                    fieldLabel: "身份证号",
                    width: 400
                }, {
                    fieldLabel: "具体地址",
                    width: 400
                }, {
                    xtype: "panel",
                    layout: "column",
                    baseCls: "x-plain",
                    bodyStyle: "padding:5px",
                    defaults: { baseCls: "x-plain" },
                    items: [{
                        columnWidth: 0.4,
                        layout: "form",
                        labelWidth: 50,
                        items: {
                            id: "jobs",
                            xtype: "combo",
                            mode: "local",
                            anchor: "98%",
                            triggerAction: "all",
                            displayField: "job",
                            readOnly: true,
                            store: new Ext.data.SimpleStore({
                                fields: ["job"],
                                data: [[‘网络工程‘], [‘软件工程‘], [‘土木工程‘]]
                            }),
                            fieldLabel: "职位",
                            listeners: {
                                "select": function (_combo, _record, _index) {
                                    _combo.selectItem = _record;
                                }
                            }
                        }
                    }, {
                        columnWidth: 0.2,
                        items: {
                            xtype: "button",
                            text: "添加职位",
                            handler: function () {
                                var _job = Ext.getCmp("jobs");
                                Ext.MessageBox.prompt("添加职位", "职位名称", function (_btn, _text) {
                                    if (_text == null || _text == "") {
                                        Ext.MessageBox.alert("操作提示", "职位名称不能为空！");
                                        return;
                                    }
                                    if (_btn == "ok") {
                                        // 往下拉列表插入一条数据
                                        this.store.insert(0, new JOB({ job: _text }));
                                        // 设置当前选择的数据
                                        this.setValue(_text);
                                        // 设置第一条数据到 自定义的选择项
                                        this.selectItem = this.store.getAt(0);
                                    }
                                }, _job);
                            }
                        }
                    }, {
                        columnWidth: 0.2,
                        items: {
                            xtype: "button",
                            text: "修改职位",
                            handler: function () {
                                var _job = Ext.getCmp("jobs");
                                if (_job.selectItem != null) {
                                    Ext.MessageBox.prompt("修改职位", "职位名称", function (_btn, _text) {
                                        if (_text == null || _text == "") {
                                            Ext.MessageBox.alert("操作提示", "职位名称不能为空！");
                                            return;
                                        }
                                        if (_btn == "ok") {
                                            this.selectItem.set("job", _text);
                                            this.setValue(_text);
                                        }
                                    }, _job, false, _job.getValue());
                                } else {
                                    Ext.MessageBox.alert(‘操作提示‘, ‘暂无可修改的数据！‘);
                                }
                            }
                        }
                    }, {
                        columnWidth: 0.2,
                        items: {
                            xtype: "button",
                            text: "删除职位",
                            handler: function () {
                                var _job = Ext.getCmp("jobs");
                                if (_job.selectItem != null) {
                                    Ext.MessageBox.confirm("操作提示", "你确认删除当前职位？", function (_btn) {
                                        if (_btn == "yes") {

                                            this.store.remove(this.selectItem);
                                            if (this.store.getCount() != 0) {

                                                this.setValue(this.store.getAt(0).get("job"));
                                                this.selectItem = this.store.getAt(0);
                                            } else {
                                                this.setValue("");
                                                this.selectItem = null;
                                            }
                                        }
                                    }, _job);
                                } else {
                                    Ext.MessageBox.alert(‘操作提示‘, ‘暂无可删数据！‘);
                                }
                            }
                        }
                    }]
                }],
                showLock: false,
                listeners: {
                    "show": function (_window) {
                        if (!_window.showLock) {
                            // 根据类型名和索引得到对象,getEl 是得到HTML元素
                            //_window.findByType("textfield")[6].getEl().dom.src = "img/default_pic.gif";

                            // 根据ID得到 Ext对象
                            Ext.getCmp(‘imgTest‘).getEl().dom.src = "img/default_pic.gif";
                            _window.showLock = true;
                        }

                        // 设置职位的默认值为第一项
                        var _job = Ext.getCmp("jobs");
                        var _store = _job.store;

                        // 取得第一项,字段为 job 的值
                        var jobValue = _store.getAt(0).get("job");
                        _job.setValue(jobValue);
                        _job.selectItem = _store.getAt(0);

                    }
                },
                buttons: [{
                    text: "确定",
                    handler: function () {
                        // 根据buttons集合的索引得到Ext对象
                        alert(this.ownerCt.buttons[1].text);
                    }
                }, {
                    text: "取消"
                }]
            }).show();
        });
       
    </script>