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

页面部分代码如下:

 

<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
});