View Full Version : Mask some text on top of pdf in a container

16 Feb 2014, 8:24 PM
Hi Team,

I'm able to show a pdf inside a container in my ExtJS application. But I've a use-case to implement.

Here's my code

xtype: 'component',
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%; border: none',
src: 'data/abc.pdf'

This pdf is generated by some set of users, and needs to be validated (or rather approved) by some another set of users called admins.

I'm thinking of showing some text mask on top of that pdf in the container itself with some text like "Pending approval" or "Approved" so that users will be able to know that this pdf has been approved by admins.

Is there a way to implement this in ExtJS ? Or Is there any better way to achieve this ?


16 Feb 2014, 10:38 PM
There is a method setLoading (http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.Component-method-setLoading)() in component class.
Check the below example, hope this may help you.


17 Feb 2014, 4:07 AM

I already know about the set loading mask but that is not what I want to be precise.

I want to show a fixed text whenever user opens a pdf which has not been approved yet.
Some floating text in the middle of pdf.

Is that possible?

18 Feb 2014, 2:07 AM

here is my sample code, hope this works for you :)

var isDocApproved = false;
Ext.create('Ext.Component', {
html: '<iframe src="Your_File_Path.pdf" width="100%" height="100%" />',
baseCls: (isDocApproved == true) ? 'pdf-container' : 'pdf-mask',
renderTo: Ext.getBody()

.pdf-mask {
height: 100%;
position: relative;
width: 100%;

.pdf-mask:before {
background: #000;
color: #fff;
content: " File is not Approved for viewing "; /* Your Message Text */
display: block;
font-size: 30px;
height: 100%;
position: absolute;
padding-top: 50px;
text-align: center;
width: 100%;

It would be better if the user is informed before opening the file itself..

Md Naveed