ComboBoxコントロール非表示fieldLabel問題解決を非表示にできない

29983 ワード

http://www.cnblogs.com/exmyth/archive/2013/05/04/3059754.html
1問題の説明
ComboBoxはFormPanelで初期化するときに隠し注意hidden:true属性を設定し、CommoBoxは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を表示できないようです)
    ComboBox控件隐藏fieldLabel不能隐藏问题解决_第1张图片  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()で実現する方法は具体的には紹介しません
非表示ボタンをクリックして効果を表示
ComboBox控件隐藏fieldLabel不能隐藏问题解决_第2张图片表示ボタンクリック表示効果
最后のテストコードは添付ファイルを参照してください.ダウンロードして参考にしてください.
<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>&nbsp;<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>