javascript
ExtJS中如何根据combobox的选值，动态地决定组件的显隐？
?來(lái)源：http://www.javaeye.com/problems/3168
ExtJS所做的Form，需要根據(jù)combobox選擇值，來(lái)決定后面所顯示的組件。辦法是動(dòng)態(tài)地加在FormPanel中的items中。
如果選擇年報(bào)表，則下面的可選的條件輸入框只有年。
如果選擇日?qǐng)?bào)表，則可選的條件輸入框只有日期。
如果選擇月報(bào)表，則可選的條件輸入框有年和月兩項(xiàng)。
但下面的代碼在實(shí)際中，第一次選月報(bào)表，顯示年和月兩項(xiàng)，第二次選年報(bào)表，卻不會(huì)隱藏月這項(xiàng)。
請(qǐng)教下面的代碼問(wèn)題出現(xiàn)在哪？
<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: '報(bào)表類型',
?? ??? ?hiddenName:'reportCategory1',
?? ??? ?store: new Ext.data.SimpleStore({
?? ??? ??? ?fields: ['num', 'name'],
?? ??? ??? ?data : [[1,'年報(bào)表'],[2,'月報(bào)表'],[3,'日?qǐng)?bào)表']]
?? ??? ?}),
?? ??? ?valueField:'num',
?? ??? ?displayField:'name',
?? ??? ?typeAhead: true,
?? ??? ?mode: 'local',
?? ??? ?triggerAction: 'all',
?? ??? ?emptyText:'請(qǐng)選擇...',
?? ??? ?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清除，希望同步到頁(yè)面，卻不成功。
?? ??? ?fs.items.add(reportCategory);
?? ??? ?switch (newv) {
?? ??? ??? ?case 0:? // 年報(bào)表, 選擇年
?? ??? ??? ??? ?fs.items.add(dtYear);
?? ??? ??? ??? ?break;
?? ??? ??? ?case 1:? // 月報(bào)表, 選擇年和月
?? ??? ??? ??? ?fs.items.add(dtYear);
?? ??? ??? ??? ?fs.items.add(dtMonth);
?? ??? ??? ??? ?break;
?? ??? ??? ?case 2: // 日?qǐng)?bào)表, 選擇具體日期
?? ??? ??? ??? ?fs.items.add(dtDay);
?? ??? ??? ??? ?break;
?? ??? ?}
?? ??? ?fs.doLayout(); // 問(wèn)題: 此處顯示add的，但對(duì)原來(lái)的clear前的組件并不清除？
?? ?});
?? ?var window = new Ext.Window({
?? ??? ?title:'查詢對(duì)話框',
?? ??? ?width:260,
?? ??? ?autoHeight:true,
?? ??? ?resizable:false,
?? ??? ?layout: 'fit',
?? ??? ?plain:true,
?? ??? ?closable:false,
?? ??? ?border:false,
?? ??? ?modal:true,
?? ??? ?items: fs
?? ?});
?? ?window.show();
});
</script>
</body>
</html>
?
你可以這樣子啊，不要清除舊的items，而是設(shè)置可見(jiàn)與否：
Java代碼總結(jié)
以上是生活随笔為你收集整理的ExtJS中如何根据combobox的选值，动态地决定组件的显隐？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Mac OS X的F9怎么用
- 下一篇： JSTL的错误“attribute te