PDA

View Full Version : How to control the component hidden or visible according to the value of response.



willsun52000
6 Mar 2012, 12:23 AM
The grid panel "summary" is showing all the list of data. if double clicking on each of rows, the form panel "detailForm" will be loaded. My question is how to control the textField "item4" hidden or visible according to the value "showFlg" of the response. (hidden when showFlg is false).

JsonData:
{
success: true,
data: {showFlg: false, "item1":"value1","item2":"value2","item3":"value3","item4":"value4"}
}

var summary = Ext.create('Ext.grid.Panel', {
id : 'summary',
columns : [...],
buttons : [ {
text : 'show detail',
handler : function() {
var form = Ext.getCmp('details').getForm();
form.load( {
url : '/plan/details.do',
method : 'get',
waitMsg : 'Loading...',
success : function(form, action) {
var showFlg = Ext.decode(action.response.responseText).data.showFlg;
if (!showFlg) { Ext.getCmp('details').getComponent('detailset').getComponent('item4').hide();
}
},
failure : function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
});

}
} ]
});
var detailForm = Ext.create('Ext.form.Panel', {
id : 'details',
items : [ details ]
});

var details = Ext.create('Ext.form.FieldSet', {
title : 'Details',
itemId:'detailset'
collapsible : true,
layout : 'column',
items : [ {
xtype : 'textfield',
fieldLabel : 'item1',
name : 'item1',
columnWidth: 0.5
}, {
xtype : 'textfield',
fieldLabel : 'item2',
allowBlank : false,
name : 'item2',
columnWidth: 0.5
}, {
xtype : 'textfield',
fieldLabel : 'item3',
name : 'item3',
columnWidth: 0.5
}, {
xtype : 'textfield',
itemId : 'item4',
fieldLabel : 'item4',
allowBlank : false,
name : 'item4',
columnWidth: 0.5
}]
});

chramer
6 Mar 2012, 12:34 AM
add this property :

hidden : showFlg ? true : false

willsun52000
6 Mar 2012, 12:42 AM
it's showing "planFunction is not defined"
and want the textField "item4" hidden or visible once double clicking on one row in summary grid.

chramer
6 Mar 2012, 12:50 AM
first of all
declare details, then detailsForm

chramer
6 Mar 2012, 1:08 AM
add this to the grid :

listeners : {
'itemdblclick' : function(view, record) {
var form = Ext.getCmp('details').getForm();
form.load( {
url : '/plan/details.do',
method : 'get',
waitMsg : 'Loading...',
success : function(form, action) {
var showFlg = Ext.decode(resp.responseText).data.showFlg;
if (!showFlg) {
form.getComponent('item4').hide();
}
}
failure : function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
});
}
}

and this to the item4 :

itemId : 'item4'

willsun52000
6 Mar 2012, 9:33 PM
close to success


listeners : {
'itemdblclick' : function(view, record) {
var form = Ext.getCmp('details').getForm();
form.load( {
url : '/plan/details.do',
method : 'get',
waitMsg : 'Loading...',
success : function(form, action) {
var showFlg = Ext.decode(resp.responseText).data.showFlg;
if (!showFlg) {
form.getComponent('item4').hide(); -- form.getComponent is not a function
//I also tried the following two ways to get the "item4" but fail
// Ext.getCmp('details').getComponent('item4').hide();
// Ext.getCmp('details').getForm().getComponent('item4').hide();

}
}
failure : function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
});
}
}

chramer
6 Mar 2012, 9:52 PM
my fault! this is the right way to get item 4..

Ext.getCmp('details').getComponent('item4')
console.log this to see if you get the item! maybe the problem is in the "hide" method!

willsun52000
6 Mar 2012, 10:18 PM
my fault! this is the right way to get item 4..

Ext.getCmp('details').getComponent('item4')
console.log this to see if you get the item! maybe the problem is in the "hide" method!

console.log(Ext.getCmp('details').getComponent('item4')) -- undefined

chramer
6 Mar 2012, 10:41 PM
please update the code from the topic to see what we have..

chramer
6 Mar 2012, 10:49 PM
my fault again :D
set itemdId for the field set :

itemId : 'detailset'

and for the item4 textfield :

itemId : 'planPerfInd'

and it will definitely work! ;)

willsun52000
6 Mar 2012, 10:51 PM
Thanks chramer, I append the final solution to the first floor.

chramer
6 Mar 2012, 11:09 PM
you're welcome!
mark it as answered..