I want to create a popup pdf viewer with ext js.
I have tried some panel examples like :
Ext.onReady(function() {
Ext.widget('panel', {
title: 'My PDF',
width: 600,
height: 400,
items: {
xtype: 'component',
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%; border: none',
src: './test.pdf'
}
},
renderTo: 'selection'
});
});
I want Some think similar to this
the difference between my need and this one is that i want a close and print button on the top right og the screen. and i dont need a pagination
Any leads ?
Thanks in advance :)
Try This...
var showss = Ext.create('Ext.window.Window' {
title: 'PDF Content',
width: 400,
height: 600,
modal : true,
closeAction: 'hide',
items: [{
xtype: 'component',
html : '<iframe src="./test.pdf" width="100%" height="100%"></iframe>',
}]
});
showss.show();
Related
I want to open a panel window under the button i click which is located in the header. The panel should be displayed under the button (aligned with the header) : i try :
{
xtype:'button',
height: '100%',
text: Strings.Notifications,
glyph: 'xf142#FontAwesome',
reference: 'settingsNotificationsButton',
cls :'headerButtonsCls',
listeners: {
click: function () {
new Ext.form.Panel({
width: 200,
height: 200,
title: 'Foo',
floating: true,
closable: false
}).show();
}
}
}
But the above code displays the panel in middle of the screen as a modal which i don't want (as i said i want it right under the header)
So how to achieve that ?
Thanks .
I took Muzaffers answer as base and added the feature to use the event coordinates here:
var windowPanel = Ext.create('Ext.Panel', {
bodyStyle: 'background: #ffff00;',
border: true,
height: 200,
width: 200,
floating:true
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Show/Hide Panel',
handler: function (btn, event) {
windowPanel.showAt(event.getXY())
}
}
]
});
Here is the fiddle: https://fiddle.sencha.com/#fiddle/3a8j&view/editor
Is that useful for you?
var windowPanel = Ext.create('Ext.Panel', {
bodyStyle: 'background: #ffff00;',
border: true,
height: 200,
width: 200,
hidden: true
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Show/Hide Panel',
handler: function () {
if (windowPanel.isHidden()) {
windowPanel.show();
} else {
windowPanel.hide();
}
}
},
windowPanel
]
});
https://fiddle.sencha.com/#fiddle/3a8c
I need to resize my popup created by using Ext.Window based on the controls render on it.
I popup an aspx page and dynamically creating control on it. So i can't hard code the height of the window.
How can I resize the popup window height. Please help me with your valueable information.
My code is as follows.
Ext.onReady(function () {
var myWin = new Ext.Window({
title: 'Add to Favourit',
width: 380,
height: 300,
closable: true,
buttonAlign: 'center',
items: [{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'box',
itemId: 'iFrameInWindow',
title: 'IFrame',
autoEl: {
tag: 'iframe',
src: 'forms/test.aspx?id=1'
},
flex: 1,
width: 380,
height: 300,
}],
listeners: {
afterrender: function () {
//
},
}
}]
});
myWin.show();
});
Thanks in advance.
I am working on ExtJs collapsible panel in table layout.
Whenever I open the page the panel comes up perfectly fine (width wise).
Please check the below images
But when I collapse the panel, the width changes!
See the below image:
A sample code to replicate this issue:
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'panel',
title: 'panel title',
collapsible: true,
titleCollapse: true,
bodyStyle: {
background: '#D9E5F3',
borderColor: '#99BCE8',
borderWidth: '1px'
},
scrollable: true,
autoScroll: true,
layout: {
pack: 'center',
type: 'hbox'
},
rowspan: 1,
colspan: 2,
width: '100%',
items: [{
text: 'Save',
xtype: 'button',
padding: 5
}]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}]
});
I have also created a fiddle with the same code.
JSFiddle Demo
Please help me in resolving this issue.
I want the width of the panel to remain fixed whether it is collapsed or not.
But I WANT to set width in the terms of percentage and not fixed absolute number.
To set the column width to '100%' use tableAttrs
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
}
Also 'scrollable' and 'autoScroll' need not to be set to true since the column width will be '100%'
I want to display a modal info window by clicking a button in a toolbar. I dont know why, but nothing happens when i click the button.
heres my code:
xtype: 'toolbar',
docked: 'bottom',
items: [
{
xtype: 'button',
text: 'Infos anzeigen',
handler: function(){
var panel = new Ext.Panel({
modal: true,
left: 0,
top: 0,
width: 220,
height: 356,
layout: 'fit',
html: 'Testing'
});
panel.show();
}
}]
You're probably looking for an Ext.Window:
var win = new Ext.Window({
modal: true,
left: 0,
top: 0,
width: 220,
height: 356,
layout: 'fit',
html: 'Testing'
});
win.show();
I am placing Ext JS Grid Panel in a iFrame. Do anybody know how can I place it in the center of the iFrame.
Currently It look like this -
I want it to be like this -
The contents of your IFrame can use a border layout as above or no layout, like this:
var viewPort = new Ext.Viewport({
renderTo:'body',
width: 400,
height: 400,
items:[new Ext.Panel({
title: 'hi',
width: 200,
height: 200,
style: 'margin:0 auto;margin-top:100px;'
})]
});
In the examples site there is an example that does this you may want to look at.
layout:'ux.center',
items: {
title: 'Centered Panel',
widthRatio: 0.75,
html: 'Some content'
}
Another way, not as elegant, is a cludge of VBox and HBox layouts but is pure ExtJS and doesn't rely on UX:
Ext.create('Ext.container.Viewport',{
style: 'background-color: white;',
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
items: [{
flex: 1,
border: false
},{
height: 200,
border: false,
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [{
flex: 1,
border: false
},{
html:'Centered Panel',
width: 400
},{
flex: 1,
border: false
}]
},{
flex: 1,
border: false
}]
//items: [login_panel],
});
simply use:
this.center()
where as "this" is the object you want to put in the center (let's say grid).
Something like
grid:
region: center;
panel:
layout: border;
css: "padding: 40px"