PDA

View Full Version : The second form doesnt render properly, if i click on the second tab



kislay.kishore
25 Jan 2012, 7:34 AM
I am into a situation here.

I have more than one form panels. I want to load these on differnt tabs. However, its not rendering properly. Only a part of first label is displayed.

I tried to search on forum and tried the gives advices like doLoayout, visbility:offset etc. But, no luck.

can anyone take a look on below code, and let me know where I am doing mistake?

FYI, I am using extJs 4 version, for the below code.

Many thanks!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> Reporting</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<!--<script type="text/javascript" src="example-data.js"></script> -->
<script type="text/javascript">
Ext.require(['*']);
Ext.require(['Ext.data.*']);
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.grid.*','Ext.form.*','Ext.layout.container.Fit']);
Ext.require('Ext.button.*');
Ext.onReady(function () {
// The below is the JSON Store for the combo box, reportTypeStore
var reportTypeStore = Ext.create('Ext.data.JsonStore', {
fields: ['reportTypeId', 'displayText'],
autoLoad: true,
data : [
{"reportTypeId": "RT1" , "displayText": "Volume"},
{"reportTypeId": "RT2" , "displayText": "Pass Rate"},
{"reportTypeId": "RT3" , "displayText": "Volume vs Pass Rate"}
]

});
var scaleStore = Ext.create('Ext.data.JsonStore', {
fields: ['scaleId', 'displayText'],
autoLoad: true,
data : [ {"scaleId": "location1" , "displayText": "Week"},
{"scaleId": "location2" , "displayText": "Month"},
{"scaleId": "location3" , "displayText": "Year"}
]

});
Ext.create('Ext.panel.Panel', {
//width: 800,
height: 800,
//layout: 'fit',
title: ' Reporting Tool',
layout: 'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [{
title: 'Raw Data',
id: 'raw-data-container',
region: 'south', // position for region
xtype: 'panel',
//layout: 'fit',
height: 300,
split: true, // enable resizing
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'Input',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
height: 500,
width: 450,
collapsible: true, // make collapsible
collapseDirection: 'top',
id: 'west-region-container',
layout: 'fit'
},{
title: 'Grpah',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'anchor',
height: 500,
margins: '5 0 0 0',
id: 'chart-container'
}],
renderTo: 'pageDiv'
});

// onReady activities goes here
var tabs = new Ext.TabPanel({
renderTo: 'west-region-container-body',
activeTab : 0,
layout:'fit',
height: 400,
deferredRender: false,
autoTabs : true,
layoutOnTabChange:true,
defaults: {
//hideMode:'visibility',
hideMode:'offset'
listeners: { 'activate': function(tab) { tab.doLayout(); }
}
} ,
items : [
{
title:'Tab1 ',
contentEl : 'tab1'
},
{
title: 'tab2',
contentEl : 'formDiv2'
},
{
title : 'tab3',
html : '<b> <br><br> Input Form ....Under Construction!! </b><br><br><br><br><br><br><br><br><br><br>'
},
{
title : 'Other tab',
html : '<b><br><br>Input Form ....Under Construction!! </b><br><br><br><br><br><br><br><br><br><br>'
}
]
});
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
// title: 'Form Fields',
renderTo:'formDiv',
//width: 340,
bodyPadding: 30,
//url: 'save-form.php',
layout:'fit',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [

{
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Report Attributes',
//collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[

{
xtype:'combo',
fieldLabel: 'Report Type',
hiddenName:'reportType',
id:'reportType',
name:'reportType',
queryMode: 'local',
store: reportTypeStore,
valueField:'reportTypeId',
displayField:'displayText',
//triggerAction: 'all',
emptyText:'Please Select',
//selectOnFocus:true,
editable: false
}
]
},
{
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Range and Scale',
//collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[
{
xtype: 'datefield',
name: 'fromDate',
fieldLabel: 'From'
},
{
xtype: 'datefield',
name: 'toDate',
fieldLabel: 'To'
},

{
xtype:'combo',
fieldLabel: 'Scale',
hiddenName:'Sacle',
id:'Scale',
name:'Scale',
queryMode: 'local',
store: scaleStore,
valueField:'scaleId',
displayField:'displayText',
emptyText:'Please Select',
editable: false
}
]
},

],
buttons: [{
text: 'Reset My Input',
handler: function() {
this.up('form').getForm().reset();
}
},
{
text: 'Get My Report',
handler: function() {

}
}
]
});
/* tab2 start */
var contentFormPanel = Ext.create('Ext.form.Panel', {
frame: true,
// title: 'Form Fields',
//height: 400,
//width: 500,
id: 'form2',
renderTo:'formDiv2',
bodyPadding: 30,
//url: 'save-form.php',
layout:'fit',
//autoLoad: true,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [
{
xtype:'combo',
fieldLabel: 'Report Type',
hiddenName:'reportType1',
id:'reportType1',
name:'reportType1',
queryMode: 'local',
store: reportTypeStore,
valueField:'reportTypeId',
displayField:'displayText',
//triggerAction: 'all',
emptyText:'Please Select',
//selectOnFocus:true,
editable: false
}


]

});

//contentFormPanel.doLayout();
/* tab end */

});
</script>
</head>
<body id="docbody" >
<div id="pageDiv" style="margin: 40px;">

</div>

<div id="tab1" >
<div id="formDiv" >

</div>
</div>
<div id="tab2">
<div id="formDiv2" >

</div>
</div>

</body>
</html>

jay@moduscreate.com
25 Jan 2012, 9:17 AM
1: Don't set a layout on the tab panel. It's not necessary. It won't use it.
2: Properly formatted JavaScript is a beautiful thing! It's very hard for someone to help you when your code is not properly formatted!


Ext.require(['*']);
Ext.require(['Ext.data.*']);
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.grid.*', 'Ext.form.*', 'Ext.layout.container.Fit']);
Ext.require('Ext.button.*');
Ext.onReady(function () {
// The below is the JSON Store for the combo box, reportTypeStore
var reportTypeStore = Ext.create('Ext.data.JsonStore', {
fields: ['reportTypeId', 'displayText'],
autoLoad: true,
data: [{
"reportTypeId": "RT1",
"displayText": "Volume"
}, {
"reportTypeId": "RT2",
"displayText": "Pass Rate"
}, {
"reportTypeId": "RT3",
"displayText": "Volume vs Pass Rate"
}]

});
var scaleStore = Ext.create('Ext.data.JsonStore', {
fields: ['scaleId', 'displayText'],
autoLoad: true,
data: [{
"scaleId": "location1",
"displayText": "Week"
}, {
"scaleId": "location2",
"displayText": "Month"
}, {
"scaleId": "location3",
"displayText": "Year"
}]

});
Ext.create('Ext.panel.Panel', {
//width: 800,
height: 800,
//layout: 'fit',
title: ' Reporting Tool',
layout: 'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [{
title: 'Raw Data',
id: 'raw-data-container',
region: 'south',
// position for region
xtype: 'panel',
//layout: 'fit',
height: 300,
split: true,
// enable resizing
margins: '0 5 5 5'
}, {
// xtype: 'panel' implied by default
title: 'Input',
region: 'west',
xtype: 'panel',
margins: '5 0 0 5',
height: 500,
width: 450,
collapsible: true,
// make collapsible
collapseDirection: 'top',
id: 'west-region-container',
layout: 'fit'
}, {
title: 'Grpah',
region: 'center',
// center region is required, no width/height specified
xtype: 'panel',
layout: 'anchor',
height: 500,
margins: '5 0 0 0',
id: 'chart-container'
}],
renderTo: 'pageDiv'
});

// onReady activities goes here
var tabs = new Ext.TabPanel({
renderTo: 'west-region-container-body',
activeTab: 0,
layout: 'fit',
height: 400,
deferredRender: false,
autoTabs: true,
layoutOnTabChange: true,
defaults: {
//hideMode:'visibility',
hideMode: 'offset'
listeners: {
'activate': function (tab) {
tab.doLayout();
}
}
},
items: [{
title: 'Tab1 ',
contentEl: 'tab1'
}, {
title: 'tab2',
contentEl: 'formDiv2'
}, {
title: 'tab3',
html: '<b> <br><br> Input Form ....Under Construction!! </b><br><br><br><br><br><br><br><br><br><br>'
}, {
title: 'Other tab',
html: '<b><br><br>Input Form ....Under Construction!! </b><br><br><br><br><br><br><br><br><br><br>'
}]
});
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
// title: 'Form Fields',
renderTo: 'formDiv',
//width: 340,
bodyPadding: 30,
//url: 'save-form.php',
layout: 'fit',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [

{
// Fieldset in Column 1 - collapsible via toggle button
xtype: 'fieldset',
columnWidth: 0.5,
title: 'Report Attributes',
//collapsible: true,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
layout: 'anchor',
items: [

{
xtype: 'combo',
fieldLabel: 'Report Type',
hiddenName: 'reportType',
id: 'reportType',
name: 'reportType',
queryMode: 'local',
store: reportTypeStore,
valueField: 'reportTypeId',
displayField: 'displayText',
//triggerAction: 'all',
emptyText: 'Please Select',
//selectOnFocus:true,
editable: false
}]
}, {
// Fieldset in Column 1 - collapsible via toggle button
xtype: 'fieldset',
columnWidth: 0.5,
title: 'Range and Scale',
//collapsible: true,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
layout: 'anchor',
items: [{
xtype: 'datefield',
name: 'fromDate',
fieldLabel: 'From'
}, {
xtype: 'datefield',
name: 'toDate',
fieldLabel: 'To'
},

{
xtype: 'combo',
fieldLabel: 'Scale',
hiddenName: 'Sacle',
id: 'Scale',
name: 'Scale',
queryMode: 'local',
store: scaleStore,
valueField: 'scaleId',
displayField: 'displayText',
emptyText: 'Please Select',
editable: false
}]
},

],
buttons: [{
text: 'Reset My Input',
handler: function () {
this.up('form').getForm().reset();
}
}, {
text: 'Get My Report',
handler: function () {

}
}]
}); /* tab2 start */
var contentFormPanel = Ext.create('Ext.form.Panel', {
frame: true,
// title: 'Form Fields',
//height: 400,
//width: 500,
id: 'form2',
renderTo: 'formDiv2',
bodyPadding: 30,
//url: 'save-form.php',
layout: 'fit',
//autoLoad: true,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [{
xtype: 'combo',
fieldLabel: 'Report Type',
hiddenName: 'reportType1',
id: 'reportType1',
name: 'reportType1',
queryMode: 'local',
store: reportTypeStore,
valueField: 'reportTypeId',
displayField: 'displayText',
//triggerAction: 'all',
emptyText: 'Please Select',
//selectOnFocus:true,
editable: false
}


]

});

//contentFormPanel.doLayout();
/* tab end */

});

jay@moduscreate.com
25 Jan 2012, 9:20 AM
other tips:
- Try giving your tab panel a width property.
- Sett he size of your form panels. They won't automagically style for you.

kislay.kishore
25 Jan 2012, 9:52 AM
I will try these tips and example code you have given. Thank you very much.

As far as formatted code is concerned, I posted it with # [code]. But, it doesnt format the code properly.
Please accept my apologies for the trouble you had with my code. :(

which is the best one to use for formatting? php one?

jay@moduscreate.com
25 Jan 2012, 4:07 PM
I passed your code through http://javascriptbeautifier.org

That said, you should be using a tool that makes your development easier and pushes your code to be better formatted.

kislay.kishore
25 Jan 2012, 8:42 PM
Setting width to tab and setting height and width to the form didnt help etiher.
Removed the layout from tab panel as well, but no luck.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Reporting</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<!--<script type="text/javascript" src="example-data.js"></script> -->
<script type="text/javascript">
Ext.require(['*']);
Ext.require(['Ext.data.*']);
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.grid.*','Ext.form.*','Ext.layout.container.Fit']);
Ext.require('Ext.button.*');
Ext.onReady(function () {
// The below is the JSON Store for the combo box, reportTypeStore
var reportTypeStore = Ext.create('Ext.data.JsonStore', {
fields: ['reportTypeId', 'displayText'],
autoLoad: true,
data: [{
"reportTypeId": "RT1",
"displayText": "Volume"
}, {
"reportTypeId": "RT2",
"displayText": "Pass Rate"
}, {
"reportTypeId": "RT3",
"displayText": "Volume vs Pass Rate"
}]
});
var scaleStore = Ext.create('Ext.data.JsonStore', {
fields: ['scaleId', 'displayText'],
autoLoad: true,
data: [{
"scaleId": "location1",
"displayText": "Week"
}, {
"scaleId": "location2",
"displayText": "Month"
}, {
"scaleId": "location3",
"displayText": "Year"
}]
});
Ext.create('Ext.panel.Panel', {
//width: 800,
height: 800,
//layout: 'fit',
title: ' Reporting Tool',
layout: 'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [{
title: 'Raw Data',
id: 'raw-data-container',
region: 'south',
// position for region
xtype: 'panel',
//layout: 'fit',
height: 300,
width: 500,
split: true,
// enable resizing
margins: '0 5 5 5'
}, {
// xtype: 'panel' implied by default
title: 'Input',
region: 'west',
xtype: 'panel',
margins: '5 0 0 5',
height: 500,
width: 450,
collapsible: true,
// make collapsible
collapseDirection: 'top',
id: 'west-region-container',
//layout: 'fit'
}, {
title: 'Grpah',
region: 'center',
// center region is required, no width/height specified
xtype: 'panel',
layout: 'anchor',
height: 500,
margins: '5 0 0 0',
id: 'chart-container'
}],
renderTo: 'pageDiv'
});
// onReady activities goes here
var tabs = new Ext.TabPanel({
renderTo: 'west-region-container-body',
activeTab: 0,
// layout: 'fit',
height: 400,
width: 425,
deferredRender: false,
autoTabs: true,
layoutOnTabChange: true,
defaults: {
//hideMode:'visibility',
// hideMode: 'offset',
listeners: {
'activate': function (tab) {
tab.doLayout();
}
}
},
items: [{
title: 'Tab1 ',
contentEl: 'tab1'
}, {
title: 'tab2',
contentEl: 'formDiv2'
}, {
title: 'tab3',
html: '<b> <br><br> Input Form ....Under Construction!! </b><br><br><br><br><br><br><br><br><br><br>'
}, {
title: 'Other tab',
html: '<b><br><br>Input Form ....Under Construction!! </b><br><br><br><br><br><br><br><br><br><br>'
}]
});
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
// title: 'Form Fields',
renderTo: 'formDiv',
width: 425,
//height: 400,
bodyPadding: 30,
//url: 'save-form.php',
layout: 'fit',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [
{
// Fieldset in Column 1 - collapsible via toggle button
xtype: 'fieldset',
columnWidth: 0.5,
title: 'Report Attributes',
//collapsible: true,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
layout: 'anchor',
items: [
{
xtype: 'combo',
fieldLabel: 'Report Type',
hiddenName: 'reportType',
id: 'reportType',
name: 'reportType',
queryMode: 'local',
store: reportTypeStore,
valueField: 'reportTypeId',
displayField: 'displayText',
//triggerAction: 'all',
emptyText: 'Please Select',
//selectOnFocus:true,
editable: false
}]
}, {
// Fieldset in Column 1 - collapsible via toggle button
xtype: 'fieldset',
columnWidth: 0.5,
title: 'Range and Scale',
//collapsible: true,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
layout: 'anchor',
items: [{
xtype: 'datefield',
name: 'fromDate',
fieldLabel: 'From'
}, {
xtype: 'datefield',
name: 'toDate',
fieldLabel: 'To'
},
{
xtype: 'combo',
fieldLabel: 'Scale',
hiddenName: 'Sacle',
id: 'Scale',
name: 'Scale',
queryMode: 'local',
store: scaleStore,
valueField: 'scaleId',
displayField: 'displayText',
emptyText: 'Please Select',
editable: false
}]
},
],
buttons: [{
text: 'Reset My Input',
handler: function () {
this.up('form').getForm().reset();
}
}, {
text: 'Get My Report',
handler: function () {
}
}]
}); /* tab2 start */
var contentFormPanel = Ext.create('Ext.form.Panel', {
frame: true,
// title: 'Form Fields',
height: 400,
width: 425,
id: 'form2',
renderTo: 'formDiv2',
bodyPadding: 30,
//url: 'save-form.php',
layout: 'fit',
//autoLoad: true,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [{
xtype: 'combo',
fieldLabel: 'Report Type',
hiddenName: 'reportType1',
id: 'reportType1',
name: 'reportType1',
queryMode: 'local',
store: reportTypeStore,
valueField: 'reportTypeId',
displayField: 'displayText',
//triggerAction: 'all',
emptyText: 'Please Select',
//selectOnFocus:true,
editable: false
}

]
});
});
</script>
<!--<script type="text/javascript" src="Line.js"></script> -->
</head>
<body id="docbody" >
<div id="pageDiv" style="margin: 40px;">

</div>

<div id="tab1" >
<div id="formDiv" >

</div>

</div>
<div id="tab2" class="x-hide-display" style="margin: 10px;">

<b>Input Form ...Under Construction!!!
<div id="formDiv2" >

</div>
</div>

</body>
</html>

kislay.kishore
27 Jan 2012, 12:32 AM
I tried different things, my problem has almost resolved.

Few observations:

1. If I 'dont' use deferredRender: false, for tab Panel. On default load, the second form panel also shows up (on its own div, which shows up below the tab panel).
And, when I click on second tab, the form shows up properly, as part of second tab panel (rather than showing up below the tab panel). And, it doesnt show up on the bottom again, when I click back on first tab.

2. If I add css class, x-hide-display, to the div it is rendered, the problem is again occurs, I dont see the form on second tab properly, neither on the below on the.

3. If I add css class, "x-hidden", to the div it is rendered, the problem gets resloved, I do see the form on second tab properly. :) :) No more it shows up on defualt form load.

4. If I keep class = "x-hidden", and then again use deferredRender: false, for the tab Panel, the issue occurs again. Same as #2.

So, seems like, using deferredRender: false and class=x-hide-display, creates the issue here.

But, It would great if some expert can comment here.

Being a newbie in extJs, I cant relate here, how does using class = "x-hidden" and not using deferredRender: false, solves my problem!!

Also, what is the proper use of layout: fit? If I give a fit layout to a tab, why it wont use it? Why do I need to explicitly define width and height?