日期控件
在上一篇笔记中的基础上，为Birth加上日期控件：
items:[
{fieldLabel:"Name"},
{fieldLabel:"Gender"},
{fieldLabel:"Age"},
{
xtype:"datefield",
fieldLabel:"Birth"
},
{fieldLabel:"Phone"},
{fieldLabel:"Email"}
]
效果
可以看到简单的指定item的xtype属性为 datefield 就可以实现日期控件了
但是这里出现了一个问题，生成日期控件之后Photo中的照片不见了，回头想想我们在取照片的时候是采用
_window.findByType("textfield")[6].getEl().dom.src = "../../../image/default_pic.gif";
findByType()方法来取Ext的Element对象的，在这里把原来Birth的TextField转换成了DateField，TextField的个数就少了一个，所以之前的索引位置是第 7
个
，现在要改为第 6
个就正确了（看来使用这种方法还是有一定缺陷的，一旦其他部分的Component发生改变，这里还要跟着变，最好还是使用直接引用唯一的一个ID的方式是最准确和方便的，不用去数它究竟Index哪个位置）。
修改日期的格式
日期控件产生的日期格式是根据Local来定义的，通过引用 Locale 文件 可以确定默认的Locale定义的格式，也可以通过其他的属性来进行自定义格式。
引用Locale文件
<script type="text/javascript" src="../../../ext/build/locale/ext-lang-zh_CN.js"></script>
引用中文的国际化语言包得到的结果
如果没有没有指定Locale文件，则默认使用英文的Locale文件。
自定义格式：
在API中查找DateField，可以找到定义日期格式可以通过format构造参数来实现，在Dojo的日期控件中也同样是有format属性的，这一点看起来很类似。
通过API可以看到日期的格式化是通过Date.parseDate来实现的，再看一下Date类中parseDate()方法的实现：
API中写的非常清楚，连例子都给出来了，就不多啰嗦了。来试验一下，使用"Y-m-d"模式来格式化日期：
{
xtype:"datefield",
format:"Y-m-d",
fieldLabel:"Birth"
},
效果如下
更多的匹配符在Date类中有定义，需要用的时候再去查就好了
在某些情况下需要对日期设置一个初始值，比如员工的生日，这个可以通过构造参数 value 来设置：
{
xtype:"datefield",
format:"Y-m-d",
value:"1984-12-03",
fieldLabel:"Birth"
},
如果默认日期要设置成为当天的日期，设置构造参数。
如果value的值输入字符或字符和数字的组合，如“adaffdasdf”或“adf1984”，DateField控件中都会显示空白。
如果value的值输入不符合格式的数字，如format为"Y-m-d",但是value值为“1984”，则DateField控件会给出“2010-09-22”这样不知所谓的结果。应当确保value和format一致。
如果要避免类似的情况：
用户输入错误的字符，导致提交到后台的数据不正确，可以禁止用户输入，设置readOnly为true
{
xtype:"datefield",
format:"Y-m-d",
value:"1984-12-03",
readOnly:true,
fieldLabel:"Birth"
},
这样就只能选择而不能手动填写了，当然也可以进行验证来提示用户输入不正确，因为有些用户还是习惯手动输入，这样速度会比较快，验证这点后面再说。
通常情况下，如果知道了出生日期，就可以通过出生日期来计算出年龄，思路是这样：在页面初始化的时候先给年龄一个默认值（和设置的出生日期相匹配），然后在用户选择了出生日期之后再进行计算来得到年龄，为年龄的TextField赋值。这样自然要为DateField添加一个事件，第一反映就是想到了DateField有没有像 onChange 或者 onblur 这样的事件呢？还是来看一下API是如何定义DateField的吧：
API中定义了一组Public Event，其中有blur这样的一个Event，
blur响应了DateField失去焦点时的事件，可以将修改年龄的动作注册到这个事件中，
{
fieldLabel:"Age",
value:"25"
},
{
xtype:"datefield",
format:"Y-m-d",
value:"1984-12-03",
readOnly:true,
fieldLabel:"Birth",
listeners:{
"blur":function(_df){
var _age = _df.ownerCt.findByType("textfield")[2];
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear());
}
}
},
这样就可以实现了，然后将年龄设置成为readOnly。
_df 是怎么来的？ 看一下上面的API就明白了，传进来的参数是 this ，就是当前的DateField本身。
alert了一下_df的ID，得到的是ext-comp-1007，是因为我们自己在设计Component的时候没有为它们的ID赋值，Ext会自己自动给Components加上ID。
我试了 blur 和 change 两个事件，change表现的行为和blur是一样的，而不是像 普通的onChange或者onblur一样，看来 Ext 对事件的封装还需要进一步的了解。
日期控件将在以后不断补充遇到的问题。
这部分的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DateField in Window</title>
<link type="text/css" rel="stylesheet" href="../../../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext/ext-all.js"></script>
<script type="text/javascript" src="../../../ext/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var _window=new Ext.Window({
title:"New Person",
width:500,
height:320,
plain:true,
layout:"form",
defaultType:"textfield",
labelWidth:45,
bodyStyle:"padding-top: 10px; padding-left:10px;",
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: 10px; padding-left:10px;",*/
items:[
{fieldLabel:"Name"},
{fieldLabel:"Gender"},
{
fieldLabel:"Age",
value:"25",
readOnly:true
},
{
xtype:"datefield",
format:"Y-m-d",
value:"1984-12-03",
readOnly:true,
fieldLabel:"Birth",
listeners:{
"blur":function(_df){
var _age = _df.ownerCt.findByType("textfield")[2];
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear());
}
}
},
{fieldLabel:"Phone"},
{fieldLabel:"Email"}
]
},
{
columnWidth:.5,
layout:"form",
style:"padding:10px 10px 0 10px",
labelWidth:45,
baseCls:"x-plain",
items:[
{
xtype:"textfield",
inputType:"image",
width:150,
height:140,
fieldLabel:"Photo"
}
]
}
]
},{
fieldLabel:"ID",
width:"400"
},{
fieldLabel:"Address",
width:"400"
},{
fieldLabel:"Depart",
width:"400"
}],
showLock:false,
listeners:{
"show":function(_window){
if(!_window["showLock"]){
_window.findByType("textfield")[5].getEl().dom.src = "../../../image/default_pic.gif";
_window["showLock"]=true;
}
}
},
buttons:[
{
text:"OK",
handler:function(){
alert(this.ownerCt.buttons[1].text);
}
},
{text:"Cancel"}
]
});
_window.show();
});
</script>
</head>
<body>
</body>
</html>
Ext学习笔记01 - NameSpace，类实例属性，类实例方法，类静态方法
Ext学习笔记02 - 构造方法，类继承，类实例方法重写
Ext学习笔记03 - 事件
Ext学习笔记04 - UI组件 - Component, Button
Ext学习笔记05 - UI组件 - Panel,TextField
Ext学习笔记06 - Window
Ext学习笔记07 - Window及Window中的布局
Ext学习笔记08 - 日期控件
Ext学习笔记09 - ComboBox
- 大小: 19.9 KB
- 大小: 10.8 KB
- 大小: 6.1 KB
- 大小: 35.4 KB
- 大小: 10.3 KB
- 大小: 43.1 KB
- 大小: 11.3 KB
- 大小: 1.2 KB
- 大小: 15 KB
- 大小: 5 KB
- 大小: 11.2 KB
分享到：
相关推荐
内容概要：本文详细介绍了基于TMS320F系列芯片的C2000串口读写方案及其编程器——FlashPro2000的功能特点和支持的接口模式。文中不仅涵盖了硬件连接的具体步骤，还提供了代码实例来展示Flash擦除操作，并对比了JTAG和SCI-BOOT两种模式的优缺点。此外，针对不同型号的C2000系列芯片，给出了详细的适配指导以及避免烧录过程中可能出现的问题的方法。 适合人群：从事DSP开发的技术人员，尤其是对TI公司C2000系列芯片有一定了解并希望深入了解其编程和烧录细节的人群。 使用场景及目标：适用于实验室环境下的程序调试阶段，以及生产线上的批量烧录任务。主要目的是帮助开发者选择合适的编程工具和技术手段，提高工作效率，减少因误操作导致设备损坏的风险。 其他说明：文中提供的代码片段和命令行指令可以直接用于实际项目中，同时附带了一些实用技巧，如防止芯片变砖的小贴士和自动化重试脚本，有助于解决常见的烧录难题。
汉字字库存储芯片扩展实验 # 汉字字库存储芯片扩展实验 ## 实验目的 1. 了解汉字字库的存储原理和结构 2. 掌握存储芯片扩展技术 3. 学习如何通过硬件扩展实现大容量汉字字库存储 ## 实验原理 ### 汉字字库存储基础 - 汉字通常采用点阵方式存储(如16×16、24×24、32×32点阵) - 每个汉字需要占用32字节(16×16)到128字节(32×32)不等的存储空间 - 国标GB2312-80包含6763个汉字，需要较大存储容量 ### 存储芯片扩展方法 1. **位扩展**：增加数据总线宽度 2. **字扩展**：增加存储单元数量 3. **混合扩展**：同时进行位扩展和字扩展 ## 实验设备 - 单片机开发板(如STC89C52) - 存储芯片(如27C256、29C040等) - 逻辑门电路芯片(如74HC138、74HC373等) - 示波器、万用表等测试设备 - 连接线若干 ## 实验步骤 ### 1. 单芯片汉字存储实验 1. 连接27C256 EPROM芯片到单片机系统 2. 将16×16点阵汉字字库写入芯片 3. 编写程序读取并显示汉字 ### 2. 存储芯片字扩展实验 1. 使用地址译码器(如74HC138)扩展多片27C256 2. 将完整GB2312字库分布到各芯片中 3. 编写程序实现跨芯片汉字读取 ### 3. 存储芯片位扩展实验 1. 连接两片27C256实现16位数据总线扩展 2. 优化字库存储结构，提高读取速度 3. 测试并比较扩展前后的性能差异 ## 实验代码示例(单片机部分) ```c #include <reg52.h> #include <intrins.h> // 定义存储芯片控制引脚 sbit CE = P2^7; // 片选 sbit OE = P2^6; // 输出使能 sbit
测控装备干扰源快速侦测系统设计研究.pdf
嵌入式八股文面试题库资料知识宝典-【开发】嵌入式开源项目&库&资料.zip
嵌入式八股文面试题库资料知识宝典-百度2022年嵌入式面试题.zip
少儿编程scratch项目源代码文件案例素材-空间站.zip
基于关联规则的商业银行个性化产品推荐.pdf
嵌入式八股文面试题库资料知识宝典-Linux基础使用.zip
内容概要：本文详细介绍了利用MATLAB进行轴棱锥生成贝塞尔高斯光束及环形光束光强图像的仿真研究。首先阐述了实验的背景与目标，强调了MATLAB在光学和计算科学领域的广泛应用。接着，具体描述了实验的方法与步骤，包括材料准备、仿真过程中的参数设定和光束生成代码编写。最后，对实验结果进行了深入分析，展示了贝塞尔高斯光束和环形光束的光强分布特点，验证了其光学性能的预期表现。文章还对未来的研究方向和技术改进提出了展望。 适合人群：从事光学、物理学及相关领域研究的专业人士，特别是对光束生成和光学性能分析感兴趣的科研工作者。 使用场景及目标：适用于需要进行光束生成和性能分析的实验室环境，旨在帮助研究人员更好地理解和优化光束特性和传播行为。 其他说明：本文不仅提供了详细的实验方法和步骤，还附有丰富的实验结果和数据分析，为后续研究提供了宝贵的参考资料。
内容概要：本文探讨了三电平NPC型有源电力滤波器（APF）的模型预测控制（MPC）中存在的开关频率过高问题及其解决方案。传统MPC方法会导致极高的开关频率，增加了系统的能耗和热量。通过引入滞环控制模块，可以在不大幅牺牲性能的情况下有效降低开关频率。具体来说，滞环控制通过在价值函数计算后增加一个判断条件，对状态切换进行惩罚，从而减少不必要的开关动作。实验结果显示，开关频率从4392Hz降至3242Hz，降幅达26.2%，虽然电流总谐波畸变率（THD）略有上升，但仍符合国家标准。此外，文中还提出了动态调整滞环宽度的方法，以进一步优化不同负载条件下的表现。 适合人群：从事电力电子、电力系统控制领域的研究人员和技术人员，特别是关注APF和MPC技术的人群。 使用场景及目标：适用于需要优化APF系统开关频率的研究和工程项目，旨在提高系统效率并降低成本。目标是在不影响系统性能的前提下，显著降低开关频率，减少能量损失和热管理难度。 其他说明：文章不仅提供了理论分析，还包括具体的实现代码片段，有助于读者理解和实践。同时，强调了在实际应用中需要注意的问题，如中点电位漂移等。
内容概要：本文介绍了三维POD DMD程序在处理原网格数据方面的独特优势和技术细节。首先阐述了该程序能读取结构化和非结构化网格数据及其拓扑关系，在生成模态数据过程中保持原始网格形态而不需要进行网格插值操作。接着展示了简化版本的Python代码片段，揭示了读取网格数据和生成模态数据的核心逻辑。最后提到提供的辅助学习资料如代码、视频教程、Word教程和实例数据，帮助用户深入理解并掌握该程序的应用。 适合人群：从事计算流体力学领域的研究人员和技术爱好者，尤其是那些希望提高数据处理效率的人群。 使用场景及目标：适用于需要处理复杂网格数据的研究项目，旨在简化数据处理流程，提升工作效率，同时保持数据的原始特性。 其他说明：文中不仅提供了理论性的讲解，还有具体的代码示例和丰富的学习资源，使读者可以边学边练，快速上手。
融合双向路由注意力的多尺度X光违禁品检测.pdf
嵌入式八股文面试题库资料知识宝典-Linux_Shell基础使用.zip
嵌入式八股文面试题库资料知识宝典-联发科2021武汉嵌入式软件开发.zip
基于有限体积法Godunov格式的管道泄漏检测模型研究.pdf
嵌入式八股文面试题库资料知识宝典-ARM常见面试题目.zip
基于LWR问题的无证书全同态加密方案.pdf
嵌入式八股文面试题库资料知识宝典-符坤面试经验.zip
内容概要：本文详细探讨了三电平逆变器在带不平衡负载条件下的仿真研究。主要内容包括仿真环境的搭建、不同拓扑结构的选择（如T型、I型NPC和ANPC）、延时相消法（DSC）和双二阶广义积分器（DSOGI）的正负序分离控制策略、SVPWM或SPWM调制技术的应用、双闭环PI控制以及直流均压控制。文中通过具体的参数设置（交流电压220V，直流侧电压750V）进行了详细的仿真实验，并展示了各个控制策略的效果。最终，通过仿真实验验证了所提出方法的有效性，确保了交流侧三相电压波形的对称性和电流波形的自适应调节。 适合人群：从事电力电子、电机驱动、新能源发电等领域研究的技术人员和研究人员。 使用场景及目标：适用于需要理解和掌握三电平逆变器在复杂负载条件下控制策略的研究人员和技术人员。目标是提高对三电平逆变器及其控制策略的理解，优化实际应用中的性能。 其他说明：本文不仅提供了理论分析，还包含了具体的仿真步骤和代码实现，有助于读者更好地理解和应用相关技术。
内容概要：本文介绍了如何使用Matlab/Simulink软件构建一个14自由度的四轮驱动-四轮转向（4WID-4WIS）整车动力学模型。该模型涵盖了整车纵向、横向、横摆、车身俯仰、侧倾、垂向跳动及四轮旋转和垂向自由度等多个方面，旨在全面反映车辆在不同工况下的动态行为。文中详细描述了各子系统的建模方法，包括转向系统、整车系统、悬架系统、魔术轮胎pac2002、车轮系统和PI驾驶员模块。同时，提供了Simulink源码文件、建模说明文档及相关参考资料，便于用户理解和应用。 适用人群：主要面向汽车工程师、研究人员以及对汽车动力学和Simulink建模感兴趣的学习者。 使用场景及目标：①帮助用户深入了解车辆在各种工况下的动态行为；②为车辆控制策略的制定提供理论支持和技术手段；③作为学习和研究整车动力学建模的有效工具。 其他说明：该模型采用模块化建模方法，提高了模型的清晰度和可维护性，同时也提升了建模效率。