1. Set the name of the field you want to be able to show and hide. Here it's a textfield, which has been named tex1.



2. Add the property listeners to the drop-down list (which will control whether the initial field is visible or hidden).



3. Double click the value field to the right of where it says listeners and paste the code below in the window. (Don’t worry! You don’t have to understand the the code just make sure to get all of it.)



   

{
	render:function(me){
		var form=me.findParentByType('jsonformpanel');
		if(!form){
			form=Ext.getCmp('presentpanel')
		}if(form){
			form.on('afterjsonload',function(){
				me.fireEvent("select",me)
			})
		}
	},
	select:function(me){
		var r=me.rules||{};
		for(var k in r){
			if(r[k]instanceof Array){
				for(var i=0;i<r[k].length;i++){
					var f=me.getFormField(r[k][i]);
					if(f)f.hide()
				}
			}
		}
		var v=me.getValue()==""?me.defaultValue:me.getValue();
		if(r[v]&&(r[v]instanceof Array)){
			for(var i=0;i<r[v].length;i++){
				var f=me.getFormField(r[v][i]);
				if(f)f.show();
				if(f["doLayout"])f.doLayout()
			}
		}
	}
}

   

4. Add a new property called rules to the drop-down-field in the same way as you did with listeners in step 2.


5. Double click the value field to the right of where it says rules and paste the following code in the window.


 

{
	"Value1" : [ "Field1" ],
	"Value2" : [ "Field2" ]
}


6. Change “Value1” to a value in your drop-down-list and change “Field1” to the name of the field that you want to display when “Value1” is selected. Do the same with “Value2” and “Field2”.


You can add more values by simply separating them by a comma


  

{
	"Value1" : [ "Field1" ],
	"Value2" : [ "Field2" ],
	"Value3" : [ "Field3" ]
}

 

The rules above translates to the following: When “Value3” is selected Field1 and Field2 is hidden and Field3 is shown.


 

{
	"Value1" : [ "Field1" ],
	"Value2" : [ "Field2" ],
	"Value3" : [ "Field3", "Field4", "Field5" ]
}


The rules above translates to the following: When “Value3” is selected Field1 and Field2 is hidden and Field3, Field4 and Field5 is shown.