PDA

View Full Version : Panels missing on first load of viewport in browsers



Zoso
29 Aug 2011, 6:50 AM
I have a viewport layout all set up and working great for the most part. In the design I am hiding a lot of panels that I don't want all users to have access to. I then do a .show of the items that you are allowed to see based on your user groups. This works pretty well except for when you first open the viewport in a browser it is missing most of the panels that you should see and you have to refresh the browser (F5) for them too all show back up.

How can I get the layout to refresh properly on the first load so that all of the panels you should see show up?

I will attach screen shots of the first load and after doing a refresh.

Here is the UI Code

/*
* File: AdminPortalExt3.ui.js
* Date: Thu Aug 25 2011 07:29:51 GMT-0700 (US Mountain Standard Time)
*
* This file was generated by Ext Designer version 1.1.2.
* http://www.sencha.com/products/designer/
*
* This file will be auto-generated each and everytime you export.
*
* Do NOT hand edit this file.
*/

AdminPortalExt3Ui = Ext.extend(Ext.Viewport, {
layout: 'border',
forceLayout: true,
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: '<center><font style="font-size: 18px;">TANS Portal Dev in Ext3</font></center>',
region: 'north',
height: 50,
cls: 'x-panel-header-center-title',
ref: 'North_Panel_Ref',
id: 'North_Panel'
},
{
xtype: 'panel',
title: 'Main Menu',
region: 'west',
width: 300,
layout: 'accordion',
iconCls: 'application_cascade',
buttonAlign: 'center',
activeItem: 0,
forceLayout: true,
id: 'West_Panel',
layoutConfig: {
animate: true,
activeOnTop: true
},
items: [
{
xtype: 'panel',
title: 'Your Information',
iconCls: 'house',
autoScroll: true,
bodyStyle: 'padding: 10 10 10 10',
buttonAlign: 'center',
hideCollapseTool: true,
titleCollapse: true,
padding: 10,
ref: '../Your_Info_Expanded',
id: 'Your_Info'
},
{
xtype: 'panel',
title: 'User Management',
layout: 'vbox',
iconCls: 'user_suit',
titleCollapse: true,
hideCollapseTool: true,
hidden: true,
ref: '../User_Mgmt_Expanded',
id: 'User_Management_Module',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'form',
flex: 1,
labelAlign: 'right',
labelWidth: 75,
padding: 10,
border: false,
headerAsText: false,
height: 150,
buttonAlign: 'center',
bodyStyle: 'padding:10px',
hideBorders: true,
defaults: {
enableKeyEvents: true,
listeners: {
specialKey: function(field,
el){
if(el.getKey()==Ext.EventObject.ENTER){
Ext.getCmp('UM_User_Search').fireEvent('click');
}
}
}
},
id: '\'UM_User_Search_Form\',',
items: [
{
xtype: 'textfield',
fieldLabel: 'NetID',
blankText: 'Enter a NetID, wildcards are allowed.',
ref: '../../../UM_Search_NetID_Ref',
id: 'UM_Search_NetID'
},
{
xtype: 'textfield',
fieldLabel: 'AWC ID',
blankText: 'Enter a AWC ID, wildcards are allowed.',
ref: '../../../UM_Search_AWCID_Ref',
id: 'UM_Search_AWCID'
},
{
xtype: 'textfield',
fieldLabel: 'First Name',
blankText: 'Enter a First Name, wildcards are allowed.',
ref: '../../../UM_Search_FName_Ref',
id: 'UM_Search_FName'
},
{
xtype: 'textfield',
fieldLabel: 'Last Name',
blankText: 'Enter a Last Name, wildcards are allowed.',
ref: '../../../UM_Search_LName_Ref',
id: 'UM_Search_LName'
}
],
bbar: {
xtype: 'toolbar',
buttonAlign: 'center',
items: [
{
xtype: 'button',
text: 'Search Users',
iconCls: 'find',
tooltip: 'Click hear to search for Users in Active Directory.',
cls: 'x-toolbar-standardbutton',
ref: '../../../../UM_User_Search_Ref',
id: 'UM_User_Search'
},
{
xtype: 'spacer',
width: 5
},
{
xtype: 'button',
text: 'Reset Fields',
iconCls: 'cog',
tooltip: 'Click here to clear the Search Fields.',
cls: 'x-toolbar-standardbutton',
ref: '../../../../UM_Reset_Fields_Ref',
id: 'Reset_Fields'
}
]
}
},
{
xtype: 'panel',
flex: 1,
autoScroll: true,
bodyStyle: 'padding:5px',
border: false,
ref: '../../UM_User_Search_Results_Ref',
id: 'UM_User_Search_Results'
}
]
},
{
xtype: 'panel',
title: 'Group Management',
layout: 'vbox',
iconCls: 'group',
hideCollapseTool: true,
titleCollapse: true,
hidden: true,
ref: '../Group_Mgmt_Expanded',
id: 'Group_Management_Module',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'form',
flex: 1,
labelAlign: 'right',
bodyStyle: 'padding:10px',
border: false,
height: 75,
buttonAlign: 'center',
headerAsText: false,
defaults: {
enableKeyEvents: true,
listeners: {
specialKey: function(field,
el){
if(el.getKey()==Ext.EventObject.ENTER){
Ext.getCmp('GM_Search_Groups_Btn').fireEvent('click');
}
}
}
},
id: 'GM_Group_Search_Form',
items: [
{
xtype: 'textfield',
fieldLabel: 'Group Name',
blankText: 'Enter a Group name, wildcards are allowed.',
ref: '../../../GM_Search_Group_Ref',
id: 'GM_Search_Group'
}
],
bbar: {
xtype: 'toolbar',
buttonAlign: 'center',
items: [
{
xtype: 'button',
text: 'Search Groups',
iconCls: 'find',
tooltip: 'Click hear to search for Groups in Active Directory.',
cls: 'x-toolbar-standardbutton',
ref: '../../../../GM_Search_Groups_Ref',
id: 'GM_Search_Groups_Btn'
},
{
xtype: 'spacer',
width: 5
},
{
xtype: 'button',
text: 'Reset Fields',
iconCls: 'cog',
cls: 'x-toolbar-standardbutton',
tooltip: 'Click here to clear the Search Fields.',
ref: '../../../../GM_Reset_Fields_Ref',
id: 'GM_Reset_Fields'
}
]
}
},
{
xtype: 'panel',
flex: 1,
autoScroll: true,
bodyStyle: 'padding:5px',
border: false,
headerAsText: false,
ref: '../../GM_Group_Search_Results_Ref',
id: 'GM_Group_Search_Results'
}
]
},
{
xtype: 'panel',
title: 'Computer Management',
layout: 'vbox',
iconCls: 'computer',
buttonAlign: 'center',
hideCollapseTool: true,
titleCollapse: true,
hidden: true,
ref: '../Computer_Mgmt_Expanded',
id: 'Computer_Management_Module',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'form',
flex: 1,
height: 75,
labelAlign: 'right',
bodyStyle: 'padding:10px',
border: false,
buttonAlign: 'center',
headerAsText: false,
labelWidth: 75,
padding: 10,
defaults: {
enableKeyEvents: true,
listeners: {
specialKey: function(field,
el){
if(el.getKey()==Ext.EventObject.ENTER){
Ext.getCmp('CM_Computer_Search_Btn').fireEvent('click');
}
}
}
},
id: 'CM_Computer_Search_Form',
items: [
{
xtype: 'textfield',
fieldLabel: 'Computer Name',
blankText: 'Enter a Group name, wildcards are allowed.',
ref: '../../../CM_Search_Computer_Ref',
id: 'CM_Search_Computer'
}
],
bbar: {
xtype: 'toolbar',
buttonAlign: 'center',
items: [
{
xtype: 'button',
text: 'Search Computers',
iconCls: 'find',
cls: 'x-toolbar-standardbutton',
tooltip: 'Click hear to search for Computers in Active Directory.',
ref: '../../../../CM_Search_Computers_Ref',
id: 'CM_Computer_Search_Btn'
},
{
xtype: 'spacer',
width: 5
},
{
xtype: 'button',
text: 'Reset Fields',
iconCls: 'cog',
cls: 'x-toolbar-standardbutton',
tooltip: 'Click here to clear the Search Fields.',
ref: '../../../../CM_Reset_Fields_Ref',
id: 'CM_Reset_Fields'
}
]
}
},
{
xtype: 'panel',
flex: 1,
autoScroll: true,
bodyStyle: 'padding:5px',
border: false,
headerAsText: false,
ref: '../../CM_Computer_Search_Results_Ref',
id: 'CM_Computer_Search_Results'
}
]
},
{
xtype: 'panel',
title: 'BlackBoard Management',
iconCls: 'book',
titleCollapse: true,
hideCollapseTool: true,
hidden: true,
ref: '../BlackBoard_Mgmt_Expanded',
id: 'BlackBoard_Management_Module'
},
{
xtype: 'panel',
title: 'Reporting',
titleCollapse: true,
hideCollapseTool: true,
iconCls: 'report',
hidden: true,
ref: '../Reporting_Menu_Expanded',
id: 'Reporting_Module'
}
]
},
{
xtype: 'panel',
title: 'Action Log',
region: 'south',
height: 150,
iconCls: 'pencil',
layout: 'hbox',
ref: 'South_Panel_Ref',
id: 'South_Panel',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'panel',
autoScroll: true,
flex: 1,
border: false,
headerAsText: false,
bodyStyle: "padding: 10",
ref: '../Action_Log_Text_Ref',
id: 'Action_Log_Text'
}
]
},
{
xtype: 'panel',
region: 'center',
layout: 'fit',
border: false,
ref: 'Center_Container_Ref',
id: 'Center_Container',
items: [
{
xtype: 'panel',
layout: 'hbox',
headerAsText: false,
ref: '../Center_Box_Ref',
id: 'Center_Box',
layoutConfig: {
align: 'stretch'
},
items: [
{
flex: 1,
id: 'CP_Your_Info_ID',
xtype: 'CP_Your_Info_Class'
},
{
flex: 1,
id: 'CP_User_Info_ID',
xtype: 'CP_User_Info_Class'
},
{
flex: 1,
id: 'CP_Group_Info_ID',
xtype: 'CP_Group_Info_Class'
},
{
flex: 1,
id: 'CP_Computer_Info_ID',
xtype: 'CP_Computer_Info_Class'
},
{
flex: 1,
id: 'CP_BlackBoard_Info_ID',
xtype: 'CP_BlackBoard_Info_Class'
},
{
flex: 1,
id: 'CP_Reporting_Info_ID',
xtype: 'CP_Reporting_Info_Class'
}
]
}
]
}
];
AdminPortalExt3Ui.superclass.initComponent.call(this);
}
});



Here is the Logic Code

/*
* File: AdminPortalExt3.js
* Date: Thu Jul 28 2011 16:24:24 GMT-0700 (US Mountain Standard Time)
*
* This file was generated by Ext Designer version 1.1.2.
* http://www.sencha.com/products/designer/
*
* This file will be generated the first time you export.
*
* You should implement event handling and custom methods in this
* class.
*/

AdminPortalExt3 = Ext.extend(AdminPortalExt3Ui, {
initComponent: function () {
AdminPortalExt3.superclass.initComponent.call(this);

/**************************************************************************************
* Start of Module Security *
**************************************************************************************/

if (document.getElementById('User_Management_Module').value == "yes") {
Ext.getCmp('User_Management_Module').show();
}

if (document.getElementById('Group_Management_Module').value == "yes") {
Ext.getCmp('Group_Management_Module').show();
}

if (document.getElementById('Computer_Management_Module').value == "yes") {
Ext.getCmp('Computer_Management_Module').show();
}

if (document.getElementById('Blackboard_Management_Module').value == "yes") {
Ext.getCmp('BlackBoard_Management_Module').show();
}

if (document.getElementById('Reporting_Module').value == "yes") {
Ext.getCmp('Reporting_Module').show();
}

/**************************************************************************************
* End of Module Security *
**************************************************************************************/

this.Your_Info_Expanded.on('render', this.Your_Info_Load, this);
this.Your_Info_Expanded.on('expand', this.Your_Info_Load, this);
this.User_Mgmt_Expanded.on('expand', this.User_Mgmt_Expand, this);
this.Group_Mgmt_Expanded.on('expand', this.Group_Mgmt_Expand, this);
this.Computer_Mgmt_Expanded.on('expand', this.Computer_Mgmt_Expand, this);
this.BlackBoard_Mgmt_Expanded.on('expand', this.BlackBoard_Mgmt_Expand, this);
this.Reporting_Menu_Expanded.on('expand', this.Reporting_Menu_Expand, this);
this.North_Panel_Ref.on('render', this.North_Panel_Load, this);
this.Action_Log_Text_Ref.on('render', this.South_Panel_Load, this);
this.UM_User_Search_Ref.on('click', this.UM_Search_Users_Click, this);
this.UM_Reset_Fields_Ref.on('click', this.UM_Reset_Fields_Click, this);
this.GM_Search_Groups_Ref.on('click', this.GM_Search_Groups_Main, this);
this.GM_Reset_Fields_Ref.on('click', this.GM_Reset_Fields_Main, this);
},
Your_Info_Load: function () {
Ext.getCmp('CP_Your_Info_ID').show();
Ext.getCmp('CP_User_Info_ID').hide();
Ext.getCmp('CP_Group_Info_ID').hide();
Ext.getCmp('CP_Computer_Info_ID').hide();
Ext.getCmp('CP_BlackBoard_Info_ID').hide();
Ext.getCmp('CP_Reporting_Info_ID').hide();
Ext.getCmp('West_Panel').doLayout();
Ext.getCmp('Center_Container').doLayout();
var el = Ext.getCmp('Your_Info')
el.body.load({
url: 'aspx/Main/Your_Info_Details.aspx'
});
},

User_Mgmt_Expand: function () {
Ext.getCmp('CP_Your_Info_ID').hide();
Ext.getCmp('CP_User_Info_ID').show();
Ext.getCmp('CP_Group_Info_ID').hide();
Ext.getCmp('CP_Computer_Info_ID').hide();
Ext.getCmp('CP_BlackBoard_Info_ID').hide();
Ext.getCmp('CP_Reporting_Info_ID').hide();
Ext.getCmp('CP_Reporting_Info_ID').hide();
Ext.getCmp('Center_Container').doLayout();
var el = Ext.getCmp('UM_User_Search_Results')
el.body.load({
url: 'aspx/Main/Blank.aspx'
});
Ext.getCmp('UM_Tab_Panel').setActiveTab('Tab1_SSRPM');
var el = Ext.getCmp('Basic_User_Info')
el.body.load({
url: 'aspx/Main/Blank.aspx'
});
var el = Ext.getCmp('Tab1_SSRPM')
el.body.load({
url: 'aspx/Main/Blank.aspx'
});
Ext.getCmp('UM_Search_NetID').setValue('');
Ext.getCmp('UM_Search_AWCID').setValue('');
Ext.getCmp('UM_Search_FName').setValue('');
Ext.getCmp('UM_Search_LName').setValue('');
Ext.getCmp('UM_Search_NetID').focus('', 10);
},

Group_Mgmt_Expand: function () {
Ext.getCmp('CP_Your_Info_ID').hide();
Ext.getCmp('CP_User_Info_ID').hide();
Ext.getCmp('CP_Group_Info_ID').show();
Ext.getCmp('CP_Computer_Info_ID').hide();
Ext.getCmp('CP_BlackBoard_Info_ID').hide();
Ext.getCmp('CP_Reporting_Info_ID').hide();
Ext.getCmp('Center_Container').doLayout();
var el = Ext.getCmp('GM_Group_Search_Results')
el.body.load({
url: 'aspx/Main/Blank.aspx'
});
Ext.getCmp('GM_Tab_Panel').setActiveTab('GM_Tab1_Group_Members');
var el = Ext.getCmp('GM_Basic_Group_Info')
el.body.load({
url: 'aspx/Main/Blank.aspx'
});
var el = Ext.getCmp('GM_Current_Members')
el.body.load({
url: 'aspx/Main/Blank.aspx'
});
Ext.getCmp('GM_Search_Group').setValue('');
Ext.getCmp('GM_Search_Group').focus('', 10);
},

Computer_Mgmt_Expand: function () {
Ext.getCmp('CP_Your_Info_ID').hide();
Ext.getCmp('CP_User_Info_ID').hide();
Ext.getCmp('CP_Group_Info_ID').hide();
Ext.getCmp('CP_Computer_Info_ID').show();
Ext.getCmp('CP_BlackBoard_Info_ID').hide();
Ext.getCmp('CP_Reporting_Info_ID').hide();
Ext.getCmp('CP_Reporting_Info_ID').hide();
Ext.getCmp('Center_Container').doLayout();
var el = Ext.getCmp('CM_Computer_Search_Results')
el.body.load({
url: 'aspx/Main/Blank.aspx'
});
Ext.getCmp('CM_Search_Computer').setValue('');
Ext.getCmp('CM_Search_Computer').focus('', 10);
},

BlackBoard_Mgmt_Expand: function () {
Ext.getCmp('CP_Your_Info_ID').hide();
Ext.getCmp('CP_User_Info_ID').hide();
Ext.getCmp('CP_Group_Info_ID').hide();
Ext.getCmp('CP_Computer_Info_ID').hide();
Ext.getCmp('CP_BlackBoard_Info_ID').show();
Ext.getCmp('CP_Reporting_Info_ID').hide();
Ext.getCmp('Center_Container').doLayout();
},

Reporting_Menu_Expand: function () {
Ext.getCmp('CP_Your_Info_ID').hide();
Ext.getCmp('CP_User_Info_ID').hide();
Ext.getCmp('CP_Group_Info_ID').hide();
Ext.getCmp('CP_Computer_Info_ID').hide();
Ext.getCmp('CP_BlackBoard_Info_ID').hide();
Ext.getCmp('CP_Reporting_Info_ID').hide();
Ext.getCmp('CP_Reporting_Info_ID').show();
Ext.getCmp('Center_Container').doLayout();
},

North_Panel_Load: function () {
var P_Title = document.getElementById("portal_title").value;
P_Title = '<font style="font-size: 18px;">' + P_Title + '</font>'
var el = Ext.getCmp('North_Panel')
el.body.load({
url: 'Default.aspx'
});
Ext.getCmp('North_Panel').setTitle(P_Title);
},

South_Panel_Load: function () {
var el = Ext.getCmp('Action_Log_Text')
el.body.load({
url: 'aspx/Main/Check_Umra_Connection.aspx'
});
},

/****************************************************************************************
* User Search MM *
****************************************************************************************/
UM_Search_Users_Click: function () {
Ext.getCmp('Basic_User_Info').hide();
Ext.getCmp('UM_Tab_Panel').hide();
var netidname = Ext.getCmp('UM_Search_NetID').getValue();
var awcidname = Ext.getCmp('UM_Search_AWCID').getValue();
var firstname = Ext.getCmp('UM_Search_FName').getValue();
var lastname = Ext.getCmp('UM_Search_LName').getValue();
var el = Ext.getCmp('UM_User_Search_Results')
el.body.load({
url: 'aspx/User_Management/UM_Search_Users_Main.aspx?firstname=' + firstname + '&lastname=' + lastname + '&netidname=' + netidname + '&awcidname=' + awcidname
});
},

UM_Reset_Fields_Click: function () {
Ext.getCmp('Basic_User_Info').hide();
Ext.getCmp('UM_Tab_Panel').hide();
var el = Ext.getCmp('UM_User_Search_Results')
el.body.load({
url: 'aspx/Main/Blank.aspx'
});
Ext.getCmp('UM_Search_NetID').setValue('');
Ext.getCmp('UM_Search_AWCID').setValue('');
Ext.getCmp('UM_Search_FName').setValue('');
Ext.getCmp('UM_Search_LName').setValue('');
Ext.getCmp('UM_Search_NetID').focus('', 10);
},

/****************************************************************************************
* Group Search MM *
****************************************************************************************/
GM_Search_Groups_Main: function () {
Ext.getCmp('GM_Basic_Group_Info').hide();
Ext.getCmp('GM_Tab_Panel').hide();
var groupname = Ext.getCmp('GM_Search_Group').getValue();
var el = Ext.getCmp('GM_Group_Search_Results')
el.body.load({
url: 'aspx/Group_Management/GM_Search_Groups_Main.aspx?groupname=' + groupname
});
},

GM_Reset_Fields_Main: function () {
Ext.getCmp('GM_Basic_Group_Info').hide();
Ext.getCmp('GM_Tab_Panel').hide();
var el = Ext.getCmp('GM_Group_Search_Results')
el.body.load({
url: 'aspx/Main/Blank.aspx'
});
Ext.getCmp('GM_Search_Group').setValue('');
Ext.getCmp('GM_Search_Group').focus('', 10);
}


});