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



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

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

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

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

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

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

{  
                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里面的样式是我们自定义的,如下:u9H思考者日记网-束洋洋个人博客

<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>  

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

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

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

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

ExtJS4.2全部章节汇总目录


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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