您的位置：首页 > Web前端 > JavaScript

ExtJS中如何根据combobox的选值，动态地决定组件的显隐？

2009-02-27 11:20 302 查看

來源：http://www.javaeye.com/problems/3168

ExtJS所做的Form，需要根据combobox选择值，来决定后面所显示的组件。办法是动态地加在FormPanel中的items中。

如果选择年报表，则下面的可选的条件输入框只有年。

如果选择日报表，则可选的条件输入框只有日期。

如果选择月报表，则可选的条件输入框有年和月两项。

但下面的代码在实际中，第一次选月报表，显示年和月两项，第二次选年报表，却不会隐藏月这项。

请教下面的代码问题出现在哪？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>查询选择框</title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="ExtJS/locale/ext-lang-zh_CN.js"></script>
</head>
<body>

<script type="text/javascript">

Ext.BLANK_IMAGE_URL = 'resources/s.gif';
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

// 选择框
var reportCategory = new Ext.form.ComboBox({
fieldLabel: '报表类型',
hiddenName:'reportCategory1',
store: new Ext.data.SimpleStore({
fields: ['num', 'name'],
data : [[1,'年报表'],[2,'月报表'],[3,'日报表']]
}),
valueField:'num',
displayField:'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择...',
selectOnFocus:true,
width:120
});

var dtYear = new Ext.form.NumberField({
fieldLabel:'年',
name:'dtYear1',
allowBlank:false,
allowDecimals:false,
allowNegative:false,
value:2008,
minValue:2000,
maxValue:2100,
selectOnFocus:true,
validationEvent:false,
width:120
});

var dtMonth = new Ext.form.NumberField({
fieldLabel:'月',
name:'dtMonth1',
allowBlank:false,
allowDecimals:false,
allowNegative:false,
minValue:1,
maxValue:12,
selectOnFocus:true,
validationEvent:false,
width:120
});

var dtDay = new Ext.form.DateField({
fieldLabel: '日期',
name: 'dtDay1',
width:120,
validationEvent:false,
allowBlank:false
});

var fs = new Ext.form.FormPanel({
frame: true,
labelAlign: 'right',
labelWidth: 60,
autoHeight:true,
autoWidth:true,
onSubmit: Ext.emptyFn,
submit: function(){
this.getEl().dom.method='POST';
this.getEl().dom.action='search.jsp';
this.getEl().dom.submit();
},
waitMsgTarget: true,
items: reportCategory
});

fs.addButton('确定', function(){
fs.getForm().submit();
});

reportCategory.on('select',function(combo, record, index){
fs.items.clear(); // 将items清除，希望同步到页面，却不成功。
fs.items.add(reportCategory);
switch (newv) {
case 0: // 年报表, 选择年
fs.items.add(dtYear);
break;
case 1: // 月报表, 选择年和月
fs.items.add(dtYear);
fs.items.add(dtMonth);
break;
case 2: // 日报表, 选择具体日期
fs.items.add(dtDay);
break;
}
fs.doLayout(); // 问题: 此处显示add的，但对原来的clear前的组件并不清除？
});

var window = new Ext.Window({
title:'查询对话框',
width:260,
autoHeight:true,
resizable:false,
layout: 'fit',
plain:true,
closable:false,
border:false,
modal:true,
items: fs
});
window.show();
});

</script>

</body>
</html>

你可以这样子啊，不要清除旧的items，而是设置可见与否：

Java代码

reportCategory.on('select',function(combo, record, index){

fs.items.clear(); // 将items清除，希望同步到页面，却不成功。

fs.items.add(reportCategory);

switch (newv) {

case 0: // 年报表, 选择年

dtYear.setVisible(true);

dtMonth.setVisible(false);

dtDay.setVisible(false);

break;

case 1: // 月报表, 选择年和月

dtYear.setVisible(true);

dtMonth.setVisible(true);

dtDay.setVisible(false);

break;

case 2: // 日报表, 选择具体日期

dtYear.setVisible(false);

dtMonth.setVisible(false);

dtDay.setVisible(true);

break;

}

fs.doLayout();

});

reportCategory.on('select',function(combo, record, index){
fs.items.clear(); // 将items清除，希望同步到页面，却不成功。
fs.items.add(reportCategory);
switch (newv) {
case 0:  // 年报表, 选择年
dtYear.setVisible(true);
dtMonth.setVisible(false);
dtDay.setVisible(false);
break;
case 1:  // 月报表, 选择年和月
dtYear.setVisible(true);
dtMonth.setVisible(true);
dtDay.setVisible(false);
break;
case 2: // 日报表, 选择具体日期
dtYear.setVisible(false);
dtMonth.setVisible(false);
dtDay.setVisible(true);
break;
}
fs.doLayout();
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航