Ext 表单隐藏 和显示 根据下拉框选择不同的值 显示不同的文本框 只显示了文本框没有显示fieldLabel

Posted 2023-05-12

Ext.onReady(function()

this.username =
id:'usernameId',
tabIndex:4,
xtype:'textfield',
fieldLabel: '密码',
cls:'x-upper-text',
width:80,
name: 'username',
maxLength:25,
upperText: true,
anchor:'98%'
;
this.password =
id:'passwordId',
tabIndex:4,
xtype:'textfield',
fieldLabel: '密码',
cls:'x-upper-text',
width:80,
name: 'password',
maxLength:25,
upperText: true,
anchor:'98%',
hidden: true,
hideLabel:true
;
this.age =
id:'ageId',
tabIndex:4,
xtype:'textfield',
fieldLabel: '年纪',
cls:'x-upper-text',
width:80,
name: 'age',
maxLength:25,
upperText: true,
anchor:'98%'//,
//hidden: true,
//hideLabel:true
;

this.type = new Ext.form.ComboBox(
tabIndex:3,
width:80,
anchor:'100%',
fieldLabel: '用户类型',
cls:'x-upper-text',
hiddenName:'docType',
store: new Ext.data.SimpleStore(
fields: ['type', 'typeName'],
data: [
['0', '(0)普通用户'],
['1', '(1)管理员']
]
),
valueField:'type',
displayField:'typeName',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
forceSelection : true,
width:100,
listeners:
select:function(combo, record, index)
//alert(record.get('type')+" index : "+index +" combo : "+combo);
var t=record.get('type');
alert(t);
if(t==0)
Ext.getCmp('passwordId').show();
else
Ext.getCmp('passwordId').setVisible(false);

.createDelegate(this)

);
this.searchForm = new Ext.FormPanel(
labelAlign: 'right',
frame:true,
width: 300,
items:[
layout:'form',
items:[this.username,this.type,this.password,this.age]
]
);
new Ext.Window(
title: "窗口",
width: 400,
height: 400,
bodyStyle: "padding: 5px",
items:[this.searchForm]
).show(Ext.getBody());
)

首先把hiddenLanel:true属性去掉.然后select 函数修改如下:
select:function(combo, record, index)
//alert(record.get('type')+" index : "+index +" combo : "+combo);
var t=record.get('type');
alert(t);
if(t==0)
Ext.getCmp('passwordId').setDisabled(false);
Ext.getCmp('passwordId').setVisible(true);
else
Ext.getCmp('passwordId').setDisabled(true);
Ext.getCmp('passwordId').setVisible(false);

你可以试试看 行不行. 参考技术A this.password 中 hiddenLabel:true 这句话去掉本回答被提问者采纳

Vuejs 根据从下拉列表中选择的值显示其他输入字段

【中文标题】Vuejs 根据从下拉列表中选择的值显示其他输入字段

【英文标题】：Vuejs display other input fields based on selected value from dropdown

【发布时间】：2016-04-09 20:03:52

【问题描述】：

我有一个选择下拉列表和两个隐藏的输入字段。我想当用户在下拉列表中选择第一个项目时，会显示第一个输入字段，反之亦然。 这是我的代码，但我不确定如何做一个if语句，所以当所选值等于XXX显示输入字段1时，否则显示输入字段2

new Vue(
      el: '#app',
      data: 
               selected: ''
             
       );
<select name="parent" class="form-control" v-model="selected" required>
      <option value="" selected></option>
      <option value="item1">Item 1</option>
      <option value="item2">Item 2</option>
</select>
<div>
   <input name="Test 1" v-show="selected"> //display when item 1 is selected
</div>
<div>
   <input name="Test 2" v-show="selected"> //display when item 2 is selected
</div>

谢谢

【参考方案1】：

你可以这样做

<div v-if="selected === 'item1'">
  item1 was selected
</div>
<div v-else>
  Something else was selected.
</div>

如果你不想使用v-else，你可以这样做：

<div v-if="selected != 'item1'">
  Something besides item1 was selected
</div>

【讨论】：

很高兴能够提供帮助！

这是一种非常好的处理方式，但是如果您有不同数量的选项，并且您知道第一个是您可以用来过滤的选项.. 您如何识别第一个选项？