PDA

View Full Version : Hiding Buttons for Print Not Working in Firefox



natebalcom
31 Mar 2014, 6:00 AM
I'd like to start off by saying that I'm pretty new to working with Ext.js. Any help would be greatly appreciated.

I'm having issues hiding buttons for a printable version of my page. I think the problem lies with the "setVisibilityMode" option which I've been toying around with, but have had no luck as of yet getting to work. At any rate, I'm trying to remove a series of buttons at the top of the page by changing their visible states. It works in all other browsers, but not Firefox.

Well initially it doesn't, but when the page is reloaded the styles are stripped out and it works fine. The print buttons pops up a box in an iframe in a zindex that floats over the page. This is what I suspect is throwing things off. Any ideas ext people?

Farish
31 Mar 2014, 9:15 AM
a better way to do this is with css media print. look it up. you can create a class for print media in which you set display to none. then add this class to extjs components which you dont want to be printed using cls config.

this way, you are not modifying the components (changing their visibility dynamically)

Farish
31 Mar 2014, 9:23 AM
Here's an example. you can include the css in your HTML page:


<style type="text/css" media="print">
.noPrint {
display: none !important;
}
</style>

then in your JS:

Ext.create('Ext.button.Button', {
text: 'Test',
renderTo: Ext.getBody(),
cls: 'noPrint'
});

natebalcom
31 Mar 2014, 11:24 AM
I must not be implementing this correctly. It either breaks the page or nothing happens at all depending on placement. I added the styles to my page and the other piece in js.

Farish
31 Mar 2014, 11:46 AM
can you post your code? that would help others see where the problem might be. create a simple example with just this style and one button.

natebalcom
31 Mar 2014, 11:54 AM
This is what the code looks like abridged. I've tried some different placements and added the style to my print.css file. The files I'm working with are fairly large, but here's what I'm using right now.


'<style type="text/css" media="print"> .noPrint { display: none !important; }</style>',

items: {
xtype: 'container',
html: '<iframe style="width: 100%; height: 100%; border: none;"></iframe>',
listeners: {
afterrender: function() {
var frame = this.el.dom.childNodes[0],
_this = this;

this.setHeight(parseInt((BDG.apps.Main.viewport.getHeight() * 0.75), 10));

function doPrint() {
BDG.ComponentPrinterWindow.setContent('');
_this.ownerCt.body.mask();
_this.ownerCt.frameLoaded.call(_this.ownerCt.pluginScope);
_this.ownerCt.show();
}

if(frame.attachEvent) {
frame.attachEvent('onload', doPrint);
}else if(frame.addEventListener) {
frame.addEventListener('load', doPrint, false);
}

frame.src = BDG.resources.componentPrinterPage;
BDG.ComponentPrinterWindow = frame.contentWindow;
}
}
}
});

Ext.create('Ext.button.Button', {
text: 'Test',
renderTo: Ext.getBody(),
cls: 'noPrint'
});

Farish
31 Mar 2014, 11:59 AM
this code doesnt help much because no one can try it out. I would recommend that you create a test page. One HTML page with this stye, include ext-all.css and ext-all-debug.js and then just add one button with noPrint class. See if this works.

take a look at this SO link: http://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page

Farish
31 Mar 2014, 12:00 PM
and what problem are you having? is the button rendered on your page? if yes, go to print preview and see that it shouldn't be visible there.

if there is some error on your page, use Firebug etc. to debug.

natebalcom
31 Mar 2014, 12:04 PM
Sorry I couldn't post more of the code. The problem I'm having is the buttons still show up on the prinatble version of this page.

Farish
31 Mar 2014, 12:06 PM
actually i wanted you to post less code :) just the part for making it work. well try to create a test page as i said earlier.

also check that your CSS files are reloaded and not cached in your browser!