欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

根据Ext.form.ComboBox的选择值来显示或隐藏div

程序员文章站 2022-07-13 22:29:35
...

页面部分代码如下:

 

<form action="<c:url value=''/>"  method="post">
	<div id="exportBar">
		<div class="para">
		<div class="prop">时间粒度:</div>
		<div class="val"><input type="text"  id="granularity" name="granularity" alt="时间粒度"></input></div>
		</div>
	</div>

	<div id="exportBar_line2">
		<div class="para">
		<div class="prop">开始日期:</div>
		<div class="val"><input type="text"  id="startTime" name="startTime" alt="开始日期"></div>
		</div>
		<div class="para">
		<div class="prop">结束日期:</div>
		<div class="val"><input type="text"  id="endTime" name="endTime" alt="结束日期"></div>
		</div>
		<div>
			<input type="button" value="导出" id="export-button"
		</div>
	</div>
</form>

 

根据“时间粒度”的值来控制“结束日期”显示或隐藏

 

var granularity = new Ext.form.ComboBox({
	id:'granularityCmp',
	applyTo : 'granularity',
	triggerAction : 'all',
	emptyText : '请选择...',
	store : [ '日', '周','月' ],
	listeners:{
		select:function(combo,record,index){
			//alert(index); //index从0开始
	   	   	//alert(combo.getValue());
			//alert(Ext.getCmp("granularityCmp").getValue());
	   	   	//alert(Ext.get('granularity').dom.value)
	   	   	//alert(record.data.field1); //为什么可以这样写?目前看不懂
			if(record.data.field1 == '日'){
				Ext.fly('endTime').up('div.para').setStyle({'display':'none'});
			}
			else Ext.fly('endTime').up('div.para').setStyle({'display':'inline'});
			}
		},
	width : 128
});