带触发器按钮的输入框| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

带触发器按钮的输入框

## 12.12 带触发器按钮的输入框
### 带触发器按钮的输入框 的实现方式
带触发器按钮的输入框一般是在输入框的右方放置一个按钮， 点击按钮后弹出一个新的窗口， 在窗口中选中某值后，回填到输入框中， 直观的实现方式是在使用fieldcontainer 包含一个 textfield 和一个button, 实现的效果如下
![](/upload/picture/2022-09-27/upload_a739dc36319c8bf00c3a7d05adc81b16.png)
为了确保选择的数据的有效性，一般通过 readOnly 属性设置输入框为只读。
如果在应用开发中， 该类型的组件会被经常使用， 可以使用 fieldcontainer 封装一个SelectFiled 的组件类型， 需要注意的是该类型的值的获取和设置需要处理， 否则放在form 中会取不到值。
其实除了上面的方式， Ext JS本身的textfield 本身就可以达成这种效果。方式是设置triggers的配置。 实现效果类似：
![](/upload/picture/2022-09-27/upload_6e5fefa850a5bfbb531aad55fe585040.png)
该方式实现起来更简单， 组件的显示效果也更简洁。也是本篇推荐和介绍的方式。
### 基于textfield 实现带触发器按钮的输入框
以上效果的输入框实现的代码如下：
```javascript
triggers:{        
	select: {           
		cls: 'x-fa fa-search',           
		handler: function(){               
			Ext.create('Ext.window.Window',{                   
			width:300,                   
			height:400,                   
			title:'选择窗口',                   
			modal:true               
		}).show();           
		}        
	}    
}
```

triggers 是触发器的意思， 这里是复数， 也就是可以配置多个触发器。
select 这是触发器的名字， 这个名字可以随意取。
在单个触发器中， 使用 cls 配置显示的图标， handler 配置点击后的动作。
如何设置输入框不能随意输入 ?
Ext JS对于 textfield 的实现， 其实也就是在 input 元素之外定义了一些 div 及样式， 其最终产生的源码如下：
![](/upload/picture/2022-09-27/upload_1e66f36f0188a3a79bf5723b0eec7e10.png)
设置输入框不能随意输入， 首先想到使用readOnly , 但是使用之后， 后面的触发器图标没有了。看起来只能设置textfield的 input 框的 readOnly ， 标准 HTML的input 的设置只读的属性如下： readonly="readonly" 。
对于textfield ， 可以使用inputAttrTpl 添加input 的设置readOnly， 设置类似：
```javascript
inputAttrTpl:'readonly="readonly"',
```

但是这个设置无法生效， 看起来默认会设置回非readOnly。 因为textfield 组件的readOnly 属性不是true。
既然input 的readOnly 会受textfield 的影响， 是否可以换成disabled 进行设置呢？ 设置如下：
```javascript
inputAttrTpl:'disabled',
```
1
经测试， 以上方法可行。 定义一个公用组件的代码类似：
```javascript
Ext.define('ExtjsdevEncy.view.com.SelectField', {    
	extend: 'Ext.form.field.Text',    
	xtype: 'selectfield',    
	inputAttrTpl:'disabled',      
	triggers:{        
	select: {           
	cls: 'x-fa fa-search',           
	handler: function(){
	// 功能           
	}        
	}    
}});
```

### Tab页中特定场景使用问题
以上定义的selectfield 类型的组件在下面的场景中会出现输入框又变成可输入的状况：
当selectfield 使用在标签页面板的某个Tab下， 在该Tab上使用了setDisable() 进行了切换时， 该selectfield 的输入框会从不可编辑变为可编辑。
这个原因是什么呢？ 其实也不难理解，和上面分析的无法设置输入框为readOnly 的原因类似， 都是组件类本身的属性变化，会导致 input 元素的变化。
解决方法是不能设置Tab页中实际面板的disable ， 但是可以通过设置 tab 的disable 实现，代码片段类似：
```javascript
   var tabBar = tabpanel.getTabBar();                        
   var tabBarItems = tabBar.query('tab');                        
   tabBarItems[0].setDisabled(true);                        
   tabBarItems[1].setDisabled(false);
```

关于TabPanel可以参考“ 3.8 TabPanel 标签面板 ” 的介绍。
### 本篇示例演示地址：
https://osxm.github.io/extjs_dev_ency/#selectfielddemo

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

带触发器按钮的输入框

网站导航