EXT UI的一个小例子

xiaoxiao2024-05-07  25

也不算是原创,因为这个例子的原型在网上就有,是DOJOCHINA 的EXT视频中的一个小例子,只不过我做了点布局的改动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>人员注册</title> <script type="text/javascript" src="../EXTJS/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../EXTJS/ext-all.js"></script> <link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" /> <script type="text/javascript"> Ext.onReady(function(){ new Ext.Window({ title:"添加人员", width:500, closeAction:"hide", height:350, resizable:false, plain:true, //defaults{anchor:"95%"}, items:[{ layout:"column", baseCls:"x-plain", style:"padding:5px", items:[{ columnWidth:.5, layout:"form", baseCls:"x-plain", labelWidth:55, defaults:{xtype:"textfield" , width:170}, items:[{ fieldLabel:"姓名" },{ fieldLabel:"年龄", value:"27", readOnly:true },{ xtype:"datefield", format:"Y-m-d", readOnly:true, value:"1982-08-22", fieldLabel:"出生日期", listeners:{ "change":function(_df){ var _age = _df.ownerCt.findByType("textfield")[1]; _age.setValue(new Date().getFullYear() - _df.getValue().getFullYear()); } } },{ fieldLabel:"联系电话" },{ fieldLabel:"手机号码" },{ fieldLabel:"电子邮件" },{ fieldLabel:"性别", xtype:"combo", readOnly:true, triggerAction:"all", mode:"local", value:"男", displayField:"sex", //数据存储器 store:new Ext.data.SimpleStore({ fields:["sex"], data:[["男"] , ["女"]] }) }] },{ columnWidth:.5, layout:"form", baseCls:"x-plain", labelWidth:55, items:{ xtype:"textfield", fieldLabel:"个人照片", inputType:"image", width:168, height:177 } }] },{ layout:"form", defaults:{xtype:"textfield" , width:407}, labelWidth:55, baseCls:"x-plain", style:"padding:5px", items:[{ fieldLabel:"具体地址" },{ fieldLabel:"身份证号" },{ fieldLabel:"职位", width:170 }] }], buttons:[{ text:"确定" },{ text:"取消" }], showLock:false, buttonAlign:"center", listeners:{ "show":function(_window){ if(!_window["showLock"]){ _window.findByType("textfield")[5].getEl().dom.src = "layout.jpg"; } } } }).show(); }); </script></head><body></body></html> 今天太晚了,下次加注释 相关资源:基于Ext+UI+js界面模板
转载请注明原文地址: https://www.6miu.com/read-5015221.html

最新回复(0)