PDA

View Full Version : show hide Ext.FormPanel items



priyapratheep
18 Jan 2013, 1:23 AM
Hi I want to dynamically show and hide item of Ext.FormPanel


var form = new Ext.FormPanel({
labelWidth: 200, // label settings here cascade unless overridden
bodyStyle:'padding:5px 5px 0',
width: 650,
defaults: {width: 320},
items:
[
projectComboBox,
{ {
xtype: 'combo',
id:'reporttypecombobox',
fieldLabel: 'Report Type',
name: 'reporttype',
store:reporttypestore,
width: 320,
displayField:'reporttype',
valueField:'reportabbr',
typeAhead: true,
mode: 'local',
allowBlank: false,
triggerAction: 'all',
emptyText:'Select a report type...',
selectOnFocus:true,
listClass: 'x-combo-list-small',
listeners:{
'change': function(){
report_type=this.getValue();
if(report_type=='ACTUAL1'){
Ext.getCmp('labourHour').hide();
}else if(report_type=='ACTUAL2'){
Ext.getCmp('labourHour').show();
}
},{
xtype:'numberfield',
id: 'labourHour',
name: 'labourHour',
trackLabels:true,
fieldLabel: 'Budget (Labour Hour)',
emptyText:'0'
}


I searched and found a lot but failed to find the solution
In the above piece of code i want to show and hide the field labourHour, but i can only hide the text area not the label.

http://www.sencha.com/forum/showthread.php?48121-Hidden-Text-Field and not working for me. I am using extjs 3.x

Also i tried trackLabels:true and Ext.layout.FormLayout.prototype.trackLabels = true;


Ext.getCmp("props_answer").getEl().show(); give problem with getEl
Last two days i am trying to find a solution. Is there any problem with my code ?

Anybody please give me your valuable suggestions
thanks and advance

willigogs
18 Jan 2013, 2:10 AM
Ext.getCmp('labourHour').hide();

sword-it
18 Jan 2013, 6:29 AM
Hi Priyapratheep,

See this sample code for hide/show of form component.
http://jsfiddle.net/maneeshgo/zLzWz/1/

priyapratheep
20 Jan 2013, 6:39 PM
willigogs
(http://www.sencha.com/forum/member.php?235243-willigogs)I (http://www.sencha.com/forum/member.php?235243-willigogs) already tried that , but only text area is hiding label can't

sword-it
Thanks a lot for answering but,
when I try your code I am getting error of "TypeError: Ext.create is not a function".The portion in my code


var form = new Ext.FormPanel({
labelWidth: 200, // label settings here cascade unless overridden
bodyStyle:'padding:5px 5px 0',
width: 650,
defaults: {width: 320},
items:
[

is differ from your

Ext.create('Ext.FormPanel', {
width: 500,
title: 'Parent Panel',


In our project we are using var form = new Ext.FormPanel like this to create formpanel.

My whole portion of code is

var form = new Ext.FormPanel({
labelWidth: 200, // label settings here cascade unless overridden
bodyStyle:'padding:5px 5px 0',
width: 650,
defaults: {width: 320},
items:
[
projectComboBox,
{
xtype: 'combo',
id:'periodcombobox',
fieldLabel: 'Period (Current Financial Year)',
name: 'periodcode',
store: periodStore,
width: 320,
displayField:'displayValue',
valueField:'id',
typeAhead: true,
mode: 'local',
allowBlank: false,
triggerAction: 'all',
emptyText:'Select a period...',
selectOnFocus:true,
listClass: 'x-combo-list-small',
listeners:{
'change': function(){
period=this.getValue();
}
}
},{
xtype: 'combo',
id: 'reporttypecombobox',
fieldLabel: 'Report Type',
name: 'reporttype',
store: ['test1', 'test2'],
listeners: {
'change': function () {
report_type = this.getValue();
if (report_type == 'test1') {
Ext.getCmp('labourHour').hide();
} else if (report_type == 'test2') {
Ext.getCmp('labourHour').show();
}
}
}
},{
xtype: 'combo',
id:'viewtypecombobox',
fieldLabel: 'View Type',
name: 'viewtype',
store:viewtypestore,
width: 320,
displayField:'viewtype',
valueField:'viewabbr',
typeAhead: true,
mode: 'local',
allowBlank: false,
triggerAction: 'all',
emptyText:'Select a view type...',
selectOnFocus:true,
listClass: 'x-combo-list-small',
listeners:{
'change': function(){
view_type=this.getValue();
}
}
}, {
xtype: 'textfield',
id: 'labourHour',
name: 'labourHour',
trackLabels: true,
fieldLabel: 'Budget (Labour Hour)',
emptyText: '0'
},{
xtype:'numberfield',
id: 'labourCost',
name: 'labourCost',
fieldLabel: 'Budget (Labour Cost)',
emptyText:'0'
},{
xtype:'numberfield',
id: 'icoCost',
name: 'icoCost',
fieldLabel: 'Budget (Inter-co purchase)',
emptyText:'0'
},{
xtype:'numberfield',
id: 'subconCost',
name: 'subconCost',
fieldLabel: 'Budget (Other sub-contract)',
emptyText:'0'
},{
xtype:'numberfield',
id: 'othPur',
name: 'othPur',
fieldLabel: 'Budget (Other Purchases)',
emptyText:'0'
},{
xtype:'numberfield',
id: 'sales',
name: 'sales',
fieldLabel: 'Budget (Sales)',
emptyText:'0'
}
],
buttons:[{
text: 'Generate Report',
id : 'btnGenerateReport',
//cls:'x-btn-text-icon',
handler :function(){
var url;

if(project_id.length==0 || project_id =='Select a project...')
Ext.MessageBox.alert('Error','Please select a project.');

else if(period.length==0 || period=='Select a period...')
Ext.MessageBox.alert('Error','Please select a period.');

else if(report_type.length==0 || report_type=='Select a report type...')
Ext.MessageBox.alert('Error','Please select a report type.');

else if(view_type.length==0 ||view_type=='Select a view type...'){
Ext.MessageBox.alert('Error','Please select a view type.');}
else{
var messageBox = Ext.MessageBox.show({
msg: 'Please wait. Checking Project in Access Dimension...',
progressText: 'Checking Project in Access Dimension...',
width:300,
wait:true,
waitConfig: {interval:200}
});

Ext.Ajax.request({
url : checkADProjectPath,
params:{projectcode:project_code_display},
method: 'POST',
success: function ( result, request ){
messageBox.hide();

var msgArr=(result.responseText).split('|');
if(msgArr[0]=="Successful"){
Ext.Msg.confirm('Confirm?', msgArr[1] + "The selected project is valid in Access Dimension.<br> Are you sure to generate the report?",function(btn, text){
if (btn == 'yes'){

if(report_type=='ACTUAL1'){
url = generateProjectReportPath;
url +="?project_id=" + project_id;
url +="&period="+period;
url +="&report_type="+report_type;
url +="&view_type="+view_type;
url +="&login_id="+login_id;
document.location = url;
}else if(report_type=='ACTUAL2'){
url = generateProjectReportPath;
url +="?project_id=" + project_id;
url +="&period="+period;
url +="&report_type="+report_type;
url +="&view_type="+view_type;
url +="&budget_labour_hour="+document.getElementById('labourHour').value;
url +="&budget_labour_cost="+document.getElementById('labourCost').value;
url +="&budget_ico_cost="+document.getElementById('icoCost').value;
url +="&budget_subcon_cost="+document.getElementById('subconCost').value;
url +="&budget_oth_purchase_cost="+document.getElementById('othPur').value;
url +="&budget_sale="+document.getElementById('sales').value;
url +="&login_id="+login_id;
document.location = url;
}
}
})
}
else{
Ext.Msg.alert(msgBoxTitle,'The selected project is not created or closed in Access Dimension.<br> It cannot be proceed to generate the report.');
}
},
failure: function ( result, request){
Ext.Msg.alert(msgBoxTitle,'Unable to check outstanding Timesheet. Please contact Administrator if problem persists.');
}
});
}

}//HANDALER FUCNTION

}]

});


////// MAIN PANEL /////
var projectReportMainPanel = new Ext.Panel({
id: 'projectReportMainPanel',
frame: true,
border: true,
title: 'Project Report',
layout:'column',
defaults: { bodyStyle:'font-size:11px; padding: 2px;' },
width: 700,
items:[{
items: [form],
columnWidth: 1.0
}]
});


////////////////////////////////////////////////////////////////////////



Can you please suggest me what to do with var form = new Ext.FormPanel how can i hide both label and test.Now I can able to hide text area not label...

priyapratheep
20 Jan 2013, 7:13 PM
Finally I got...

I use


Ext.override(Ext.layout.FormLayout, { renderItem : function(c, position, target){ if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){ var args = [ c.id, c.fieldLabel, c.labelStyle||this.labelStyle||'', this.elementStyle||'', typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator, (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''), c.clearCls || 'x-form-clear-left' ]; if(typeof position == 'number'){ position = target.dom.childNodes[position] || null; } if(position){ c.formItem = this.fieldTpl.insertBefore(position, args, true); }else{ c.formItem = this.fieldTpl.append(target, args, true); } c.actionMode = 'formItem'; c.render('x-form-el-'+c.id); c.container = c.formItem; c.actionMode = 'container'; }else { Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments); } }});

and use Ext.getCmp('labourHour').hide(); and Ext.getCmp('labourHour').show(); to show and hide

now can able to hide both label and text field..