12.12 带触发器按钮的输入框

带触发器按钮的输入框的实现方式

带触发器按钮的输入框一般是在输入框的右方放置一个按钮，点击按钮后弹出一个新的窗口，在窗口中选中某值后，回填到输入框中，直观的实现方式是在使用fieldcontainer 包含一个 textfield 和一个button, 实现的效果如下：

为了确保选择的数据的有效性，一般通过 readOnly 属性设置输入框为只读。

如果在应用开发中，该类型的组件会被经常使用，可以使用 fieldcontainer 封装一个SelectFiled 的组件类型，需要注意的是该类型的值的获取和设置需要处理，否则放在form 中会取不到值。

其实除了上面的方式， Ext JS本身的textfield 本身就可以达成这种效果。方式是设置triggers的配置。实现效果类似：

该方式实现起来更简单，组件的显示效果也更简洁。也是本篇推荐和介绍的方式。

基于textfield 实现带触发器按钮的输入框

以上效果的输入框实现的代码如下：

    triggers:{select: {cls: 'x-fa fa-search',handler: function(){Ext.create('Ext.window.Window',{

12.12 带触发器按钮的输入框相关推荐

uni-app多个输入框带清除按钮
<template><view><view class="uni-form-item uni-column"><view class=&q ...
如何实现input输入框自带清除按钮
最近,项目中需要,在输入框获取焦点是动态显示"×"图标.即在输入框中输入内容时,右边显示"×"按钮:输入框为空时,"×"按钮消失.难点在于获 ...
12.10 Nginx访问日志 12.11 Nginx日志切割 12.12 静态文件不记录日志和过期时间
- 12.10 Nginx访问日志 - 12.11 Nginx日志切割 - 12.12 静态文件不记录日志和过期时间# 12.10 Nginx访问日志 - 日志的格式- vim /usr/local/ ...
android 带清除功能的输入框控件
今天,看到一个很好的自定义输入框控件,于是记录一下. 效果很好: 一,自定义一个类,名为ClearEditText package com.example.clearedittext;import a ...
6月8日任务（12.10 Nginx访问日志 12.11 Nginx日志切割 12.12 静态文件）
课程名称:12.10 Nginx访问日志笔记内容: [root@localhost ~]# vim /usr/local/nginx/conf/nginx.conf 定义日志格式 combined_ ...
华为否认今年将推出搭载鸿蒙系统手机；苹果或在 3 年内推出 5G 基带芯片；Node.js 12.12.0 发布 | 极客头条...
快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有 ...
Linux Deepin 12.12 正式版本发布--焕然一新，即可惊艳！
Linux Deepin 12.12 正式版本发布 Linux Deepin 12.12 正式版经过团队历时一年的精心打造,携带着 Linux Deepin 家族最新应用软件和全新 Linux 平台桌 ...
10月14日科技资讯|华为折叠屏手机月底或开卖；苹果计划 3 年内推出 5G 基带芯片；Node.js 12.12.0 发布 | 极客头条
「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有料的新闻资讯,让所有技术人,时刻紧跟业界潮流. 整理 | 胡 ...
English Learning - Day6 作业打卡 2022.12.12 周一
English Learning - Day6 作业打卡 2022.12.12 周一引言 1. 他偷了那个装满钱的书包. 区分补语和后置定语的区别 2. 你找到适合这个工作的人了吗?(注:也可以用定 ...

12.12 带触发器按钮的输入框

带触发器按钮的输入框的实现方式

基于textfield 实现带触发器按钮的输入框

12.12 带触发器按钮的输入框相关推荐

最新文章

热门文章

12.12 带触发器按钮的输入框

带触发器按钮的输入框 的实现方式

基于textfield 实现带触发器按钮的输入框

12.12 带触发器按钮的输入框相关推荐

最新文章

热门文章

带触发器按钮的输入框的实现方式