PDA

View Full Version : toolbar - getVisibilityEl() is null or not an object



theCodingChimp
14 Sep 2010, 3:14 AM
Hi...

I am upgrading my app from ext2 to ext3 at the moment. Using extjs version: 3.2.1

I have a toolbar at the top my page which I am using as a menu with buttons on it. If I click around for a bit, randomly I will get an error in IE (6 and 7) getVisibilityEl() is null or not an object. This happens maybe 1 click out of 20 on the toolbar. After the error, the toolbar items do not appear. The issue doesn't exist in Firefox. I'm having problems pinning down exactly what is going wrong.

I have pulled out the bit of code that creates the toolbar and isolated it here:



<link rel="stylesheet" type="text/css" href="common/ext-all.css"/>
<script type="text/javascript" src="common/ext-base.js"></script>
<script type="text/javascript" src="common/ext-all.js"></script>

<script type="text/javascript">

Ext.onReady(function() {
var tb = new Ext.Toolbar();
buildMenu(tb);

var vp = new Ext.Viewport({
hideBorders:true,
items:[
{
autoHeight: true,
autoWidth: true,
bbar: tb,
border: false
}
]
});

function buildMenu(tb)
{
tb.add({
text: 'Admin'
,menu : {items: [
{text: 'Users', href: '../admin/UserManagerExt.jsp', hrefTarget: 'mainFrame'},{text: 'Pages', href: '../admin/PageManager.jsp', hrefTarget: 'mainFrame'},{text: 'Groups', href: '../admin/GroupManagerExt.jsp', hrefTarget: 'mainFrame'},{text: 'Menu', href: '../admin/MenuChooserExt.jsp', hrefTarget: 'mainFrame'},{text: 'Types Tables', href: '../admin/TypesTableManagerExt.jsp', hrefTarget: 'mainFrame'},{text: 'System Parameters', href: '../admin/SysParamManagerExt.jsp', hrefTarget: 'mainFrame'},{text: 'System Log', href: '../admin/SystemLog.jsp', hrefTarget: 'mainFrame'},{text: 'Deployer', href: '../admin/Deployer.jsp', hrefTarget: 'mainFrame'},{text: 'Query', href: '../admin/QueryManager.jsp', hrefTarget: 'mainFrame'},{text: 'Reporting Tool', href: '../reports/reports.jsp', hrefTarget: 'mainFrame'},{text: 'Workflow Def', href: '../workflow/workflowdefinitionmanager.jsp', hrefTarget: 'mainFrame'},{text: 'Workflow Stage', href: '../workflow/stagetemplatemanager.jsp', hrefTarget: 'mainFrame'},{text: 'Sync Users', href: '../test/triggerUsersSync.jsp', hrefTarget: 'mainFrame'},{text: 'Notifications', href: '../process/NotificationTypeAdmin.jsp', hrefTarget: 'mainFrame'}]}
});

tb.add({
text: 'Job'
,menu : {items: [
{text: 'Templates', href: '../process/templatemanager.jsp', hrefTarget: 'mainFrame'},{text: 'Job Search', href: '../process/processmanager.jsp', hrefTarget: 'mainFrame'},{text: 'Create Process', href: '../process/createprocess.jsp', hrefTarget: 'mainFrame'},{text: 'My Jobs', href: '../process/userprocessmanager.jsp', hrefTarget: 'mainFrame'},{text: 'My Stages', href: '../process/userstagemanager.jsp', hrefTarget: 'mainFrame'},{text: 'Shifts', href: '../process/calendarmanager.jsp', hrefTarget: 'mainFrame'},{text: 'Resources', href: '../process/resourcetypesmanager.jsp', hrefTarget: 'mainFrame'},{text: 'Calendars', href: '../process/calendarinstances.jsp', hrefTarget: 'mainFrame'},{text: 'Reports', href: '../reports/majorServicesReports.jsp', hrefTarget: 'mainFrame'},{text: 'Runtime Process Changes', href: '../process/processdynamics.jsp', hrefTarget: 'mainFrame'},{text: 'Admin', href: '../process/administration.jsp', hrefTarget: 'mainFrame'}]}
});

tb.add({
text: 'Checklists'
,handler: function(){
Ext.getCmp('mainFramePanel').setSrc('../checklists/checklistmanager.jsp');
}
});

tb.add({
text: 'Integration'
,menu : {items: [
{text: 'CORS Simulator', href: '../simulation/corssim.jsp', hrefTarget: 'mainFrame'},{text: 'ProjectWise Simulator', href: '../simulation/projectwisesim.jsp', hrefTarget: 'mainFrame'},{text: 'eTrac Simulator', href: '../simulation/etracsim.jsp', hrefTarget: 'mainFrame'},{text: 'Layout Tracking Simulator', href: '../simulation/lotsim.jsp', hrefTarget: 'mainFrame'},{text: 'Data Reader', href: '../simulation/datareader.jsp', hrefTarget: 'mainFrame'},{text: 'CORS Notes', href: '../simulation/corscases.jsp', hrefTarget: 'mainFrame'}]}
});

tb.add({
text: 'Help'
,menu : {items: [
{text: 'User Manual', href: '', hrefTarget: 'mainFrame'},{text: 'Support', href: '', hrefTarget: 'mainFrame'}]}
});
}
});

</script>

Could anyone shed light on what might be going wrong here?

Thanks in advance...

Condor
14 Sep 2010, 4:09 AM
Why is the inner panel autoHeight:true and autoWidth:true? Instead, the Viewport should have a layout that manages the panel size.

Also, instead of adding the items after creating the toolbar I would create the items array and use it to create the toolbar.


Ext.onReady(function () {
var tb = new Ext.Toolbar({
items: buildMenu()
});

var vp = new Ext.Viewport({
layout: 'fit'
items: [{
bbar: tb,
border: false
}]
});

function buildMenu() {
return [{
text: 'Admin',
menu: {
items: [{
text: 'Users',
href: '../admin/UserManagerExt.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Pages',
href: '../admin/PageManager.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Groups',
href: '../admin/GroupManagerExt.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Menu',
href: '../admin/MenuChooserExt.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Types Tables',
href: '../admin/TypesTableManagerExt.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'System Parameters',
href: '../admin/SysParamManagerExt.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'System Log',
href: '../admin/SystemLog.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Deployer',
href: '../admin/Deployer.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Query',
href: '../admin/QueryManager.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Reporting Tool',
href: '../reports/reports.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Workflow Def',
href: '../workflow/workflowdefinitionmanager.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Workflow Stage',
href: '../workflow/stagetemplatemanager.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Sync Users',
href: '../test/triggerUsersSync.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Notifications',
href: '../process/NotificationTypeAdmin.jsp',
hrefTarget: 'mainFrame'
}]
}
}, {
text: 'Job',
menu: {
items: [{
text: 'Templates',
href: '../process/templatemanager.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Job Search',
href: '../process/processmanager.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Create Process',
href: '../process/createprocess.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'My Jobs',
href: '../process/userprocessmanager.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'My Stages',
href: '../process/userstagemanager.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Shifts',
href: '../process/calendarmanager.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Resources',
href: '../process/resourcetypesmanager.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Calendars',
href: '../process/calendarinstances.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Reports',
href: '../reports/majorServicesReports.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Runtime Process Changes',
href: '../process/processdynamics.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Admin',
href: '../process/administration.jsp',
hrefTarget: 'mainFrame'
}]
}
}, {
text: 'Checklists',
handler: function () {
Ext.getCmp('mainFramePanel').setSrc('../checklists/checklistmanager.jsp');
}
}, {
text: 'Integration',
menu: {
items: [{
text: 'CORS Simulator',
href: '../simulation/corssim.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'ProjectWise Simulator',
href: '../simulation/projectwisesim.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'eTrac Simulator',
href: '../simulation/etracsim.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Layout Tracking Simulator',
href: '../simulation/lotsim.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'Data Reader',
href: '../simulation/datareader.jsp',
hrefTarget: 'mainFrame'
},
{
text: 'CORS Notes',
href: '../simulation/corscases.jsp',
hrefTarget: 'mainFrame'
}]
}
}, {
text: 'Help',
menu: {
items: [{
text: 'User Manual',
href: '',
hrefTarget: 'mainFrame'
},
{
text: 'Support',
href: '',
hrefTarget: 'mainFrame'
}]
}
}];
}
});

theCodingChimp
15 Sep 2010, 1:32 AM
Hi Condor..

Thank you for the reply and advice. Unfortunately I still have this problem in IE6/7 after restructuring the code as suggested in your post.

One thing I have noticed is, if I let my app load up and just leave it sitting there for about 10 mins and then click on the toolbar to access the menu items, I will get this getVisibilityEl() is null message and the toolbar fails to show the added items.

The biggest problem I seem to have is replicating this consistently. I have to click around for ages before I see the issue. I have started to develop some really bad rsi since yesterday :(

Condor
15 Sep 2010, 2:08 AM
Which Ext version are you using?

IIRC there was a problem with the garbage collect of Button elements.

Does this stop the problem:

Ext.enableGarbageCollector = false;
Note: This is not a solution, just a way to identify the problem!

theCodingChimp
15 Sep 2010, 4:59 AM
Hi Condor...

I am using ext v 3.2.1.

Setting Ext.enableGarbageCollector to false appears to have sorted the problem !!!

Whats your postal address and I will send you a box of chocs? :)

Anyway, I imagine having the garbage collector disabled will have negative consequences. I have to decide if it would be wise to deploy this to production.

Do you know if this is something that will be fixed in an upcoming release of extjs? I'm wondering if I need to file a bug/issue report with the extjs team...

Thanks again...

Condor
15 Sep 2010, 5:52 AM
No, I wouldn't put a large application in production with the garbage collector deactivated. Without it elements that are removed from the DOM are not removed from memory, so memory usage keeps increasing during use.

These things are very hard to track down. Could you create a reproducable testcase? If yes, then please post it to the Bugs section.

theCodingChimp
15 Sep 2010, 6:44 AM
Thanks for the help Condor.

I will spend some time looking a bit deeper into what might be going wrong and see if I can get a test case into the bug section of the forums...

Joyfulbob
5 Jul 2012, 7:14 AM
I'm running into the same situation. However, the text is defined but it won't update!



this.aroDataStore = new Ext.data.GroupingStore({
...
listeners: {
'load':{
fn: function(store, records, options){
...
console.log('update toolbar...' + this.aroInqSummary1.text );
//try {
Ext.fly( this.aroInqSummary1.getEl()).update('Customer ' + comno + '/' + cusno + ' / ' + customerName + ': Outstanding Total: ' + renderPosNeg(outTotal) );


Firebug:

update toolbar...Totals: 0aroInq...Cmts.js (line 133)

Ext.fly(this.aroInqSummary1.getEl()) is null

...update('Customer ' + comno + '/' + cusno + ' / ' + customerName + ': Outstandi...aroInq...Cmts.js (line 135)

How can this happen??