ExtJS4.2学习(23)textFiled后追加按钮



 我们做表单的时候经常会需要在输入框后面添加一个按钮,比如搜索这样的,怎么加呢?其实很简单,我们只要熟悉triggerfield这个就可以。AVH思考者日记网-束洋洋个人博客

官方是这样解释的:为TextField提供一个便捷的包装器,添加一个可以点击的触发按钮 (默认情况下看起来像一个下拉选择框)。 这个Trigger没有默认操作,所以你必须通过覆盖 onTriggerClick分配一个函数来实现触发器的点击处理函数。 你可以直接创建一个Trigger,它被渲染成与一个下拉框非常相似, 这样你可以提供一个自定义的实现。AVH思考者日记网-束洋洋个人博客

看效果图:AVH思考者日记网-束洋洋个人博客

QQ截图20150208224556.jpgAVH思考者日记网-束洋洋个人博客

实现过程:AVH思考者日记网-束洋洋个人博客

创建Ext.form.Panel,在items中添加:AVH思考者日记网-束洋洋个人博客

{  
                fieldLabel: '图标',  
                id:'memo',  
                xtype:'triggerfield',  
                triggerCls: "ux-form-search-trigger",  
                hideTrigger : false,//不隐藏触发按钮  
                name: 'iconCls',  
                onTriggerClick : function(){  
                    alert("fuck");  
                    var memo = testForm.getForm().findField('memo');//取得输入控件  
                    alert(memo.getValue());//取得控件值  
                    Ext.getCmp('memo').setValue('test');  
                }  
}  

其中triggerCls里面的样式是我们自定义的,如下:AVH思考者日记网-束洋洋个人博客

<style type="text/css">  
.ux-form-search-trigger {background-image:url(../../ExtJS4.2/icons/zoom.png)!important; margin-top: 3px; width:16px; height:16px;}  
.ux-form-search-trigger-over { background-position:-16px 0; }  
.ux-form-search-trigger-click { background-position:-16px 0; }  
</style>  

 AVH思考者日记网-束洋洋个人博客

是不是瞬间秒懂?AVH思考者日记网-束洋洋个人博客

事件处理在onTriggerClick这个方法里实现,想干啥你们自己看着办。其中Ext.form.field.Date 和 Ext.form.field.ComboBox 就是triggerfield的理想例子。其他不懂的请参考官网API自寻查阅。AVH思考者日记网-束洋洋个人博客

 AVH思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridAVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridAVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingAVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格AVH思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldAVH思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件AVH思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorAVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 AVH思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解AVH思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目AVH思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈