ComboBoxコントロール非表示fieldLabel問題解決を非表示にできない
http://www.cnblogs.com/exmyth/archive/2013/05/04/3059754.html
1問題の説明
ComboBoxはFormPanelで初期化するときに隠し注意hidden:true属性を設定し、CommoBoxはFormPanelのロード後に隠しましたが、問題は彼のfieldLabelが表示されていることです.
効果図は次のとおりです.これでは、所期の非表示の効果を達成できません.
2解決方法
1. 上記のコードに属性hideLabel:trueを追加すると、表示効果(個人的な感覚のこの方法はあまりよくありませんが、後で表示に制御するとfieldLabelを表示できないようです)
2.ComboBoxでリスニングイベントを追加し、fieldLabelおよびComboBoxコントロールの表示と非表示を変更します.
ボタンテストコードを2つ書きました
fieldLabel非表示を実現するには、もちろん非表示ComboBoxを表示する場合はhide()とshow()で実現する方法は具体的には紹介しません
非表示ボタンをクリックして効果を表示
表示ボタンクリック表示効果
最后のテストコードは添付ファイルを参照してください.ダウンロードして参考にしてください.
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を表示できないようです)
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>