首页 > 代码库 > ExtJs 添加员工 实例 ---- 锚点布局 anchor 可自动伸缩
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 = "http://www.mamicode.com/img/default_pic.gif"; // 根据ID得到 Ext对象 Ext.getCmp(‘imgTest‘).getEl().dom.src = "http://www.mamicode.com/img/default_pic.gif"; _window.showLock = true; } // 设置职位的默认值为第一项 var _job = Ext.getCmp("jobs"); var _store = _job.store; // 取得第一项,字段为 job 的值 var jobValue = http://www.mamicode.com/_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>
ExtJs 添加员工 实例 ---- 锚点布局 anchor 可自动伸缩
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。