javascript
ExtJS中如何根据combobox的选值，动态地决定组件的显隐？
?來源：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代碼總結
以上是生活随笔為你收集整理的ExtJS中如何根据combobox的选值，动态地决定组件的显隐？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mac OS X的F9怎么用
- 下一篇： 文件内容极速搜索工具： silverse