1 問題描述
ComboBox在FormPanel里面初始化的時候設置隱藏 注意hidden :true 屬性，這樣ComboBox在FormPanel加載后隱藏了，但是問題是他的fieldLabel 還是顯示出來。
{ id:'moidfyForm_combo', xtype:'combo', fieldLabel : '協議類型', valueField : "id", hidden :true, displayField : "value", forceSelection : true, allowBlank : false, typeAhead : true, // 自動將第一個搜索到的選項補全輸入() mode : 'local', hiddenName : 'updatetypeName2', name : 'updatetypeName2', triggerAction : 'all', store : new Ext.data.SimpleStore( { fields : ['id', 'value'], data : updatetypeName_data }) }
效果圖如下：
這樣就不能達到預期隱藏的效果。
2 解決方法
1. 在上述代碼中在增加一個屬性 hideLabel:true , 顯示效果(個人覺的這個方法不是很好，后面如果控制在顯示，好像沒方法顯示fieldLabel)
2.在ComboBox 增加監聽事件，來修改顯示和隱藏fieldLabel以及ComboBox 控件
寫了2個按鈕測試 代碼
handler : function(){ var obj= moidfyForm.findById("moidfyForm_combo"); if(obj){ obj.getEl().up('.x-form-item').setDisplayed(false); } }
實現fieldLabel隱藏，當然如果顯示隱藏ComboBox用 hide() 和show()方法實現具體不介紹了
點擊顯示隱藏按鈕顯示效果
點擊 顯示按鈕 顯示效果
最后的測試代碼，見附件，大家可以下載下來參考一下
<HTML> <HEAD> <TITLE>Ext.form.Checkbox和Ext.form.Radio示例</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css"/> <script type="text/javascript" src="../js/ext/ext-base.js"></script> <script type="text/javascript" src="../js/ext/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ // Ext.BLANK_IMAGE_URL = '/resources/images/default/s.gif'; Ext.BLANK_IMAGE_URL = '/s.gif'; showform(); }); function showform(){ var updatetypeName_data = [['0', 'FTP'], ['1', 'HTTP']]; // 審核FORM var moidfyForm = new Ext.FormPanel({ frame:true, border:false, labelAlign : 'right', renderTo : 'form', //bodyStyle:'text-align:center', buttonAlign : 'right', items:[ { xtype:'textfield', width : 200, name : 'type', readOnly :true, fieldLabel:'升級包類型' }, { //id:'moidfyForm_manufacturerid', xtype:'textfield', width : 200, name : 'manufacturerid', readOnly :true, fieldLabel:'廠商標識' }, { //id:'moidfyForm_deviceModel', xtype:'textfield', width : 200, name : 'deviceModel', readOnly :true, fieldLabel:'終端型號' }, { id:'moidfyForm_combo', xtype:'combo', fieldLabel : '協議類型', valueField : "id", hidden :true, displayField : "value", forceSelection : true, allowBlank : false, typeAhead : true, // 自動將第一個搜索到的選項補全輸入() mode : 'local', hiddenName : 'updatetypeName2', name : 'updatetypeName2', triggerAction : 'all', store : new Ext.data.SimpleStore( { fields : ['id', 'value'], data : updatetypeName_data }) }, { xtype : 'textfield', format : 'Y年m月d日',//顯示日期的格式 readOnly : true,//設置只讀 width : 200, name : 'releaseTime', fieldLabel : '發布時間' }, { xtype:'textfield', width : 200, name : 'softwareVeraf', readOnly :true, fieldLabel:'現版本' }, { xtype:'hidden', name : 'id' }, { xtype:'hidden', name : 'isExist' } ], buttons:[ { id:"moidfyForm_button_1", text : '隱藏', handler : function(){ var obj= moidfyForm.findById("moidfyForm_combo"); if(obj){ obj.getEl().up('.x-form-item').setDisplayed(false); } } }, { id:"moidfyForm_button_2", text : '顯示', handler : function(){ var obj= moidfyForm.findById("moidfyForm_combo"); if(obj){ obj.getEl().up('.x-form-item').setDisplayed(true); obj.show(); } } } ] }); } </script> </HEAD> <BODY> <table width=100%> <tr><td> <td></tr> <tr><td width=100></td><td><div id='form'></div><td></tr> <tr><td width=100></td><td><div id='form2'></div><td></tr> </table> </BODY> </HTML>