ExtJs是目前网上很流行的一套JS框架,之前的版本大家都已经很熟悉,并且网上也有大量的案例可供参考。但是,由于ExtJs4发布不久,而且其变化之大并不是简单的升级就可以完成的。可以说,ExtJs4与之前的版本完全不同,其升级过程就如同ejb2到ejb3,无论从内核还是到使用都已经发生了革命性的变化。AH-BILL近期也在对其进行学习,先将一些学习成果跟大家分享。
今天向大家展示的是带验证码的输入框实现。
我在网上看到了有其他网友的实现方式,他是继承Ext.form.field.Text来实现的,经过测试,这种实现方式确实可以完成验证码输入框的功能,但是有两个地方有待完善:首先,输入框的样式在IE浏览器下与单纯的Text输入框不同,失去了原有的渲染效果,导致同一个form中不同输入框之间风格出现差异;其次,他是利用css来将验证码图片外挂到整个Text输入框(包括fieldLabel)的右边,因此,实际上验证码图片与输入框并没有融入为一个整体。因此,在参考该代码的基础上,AH-BILL作了全新的实现,即继承Ext.form.field.Base这个基础的类。代码如下:
Ext.define('Slk.view.ui.CheckCode',{
extend: 'Ext.form.field.Base',
alias: 'widget.checkcode',
codeUrl:Ext.BLANK_IMAGE_URL, //生成验证码对应的URL