I would like to open an Ext.Window in ExtJS, that will open an html file that contains external javascript from LinkedIn.
I have the following code:
Ext.create('Ext.window.Window', {
title: 'About us',
height: 400,
width: 800,
layout: 'fit',
items: [{
autoLoad: {
url: 'linkedin_emp1.html',
scripts: true
}
}]
}).show();
and the linkedin_emp1.html file is:
List of people
The html file is loaded and I see inside the window just the "List of People" string but not the content that comes from the linkedin javascript.
When I open the same html file from the browser I see everything fine.
It looks like I cannot run an external javascript inside an html.
Any ideas how to do that?
You can use iframe element using autoEl config inside of ExtJS.
new Ext.Window({
title : "About us",
width : 400,
height: 800,
layout : 'fit',
items : [{
xtype : "component",
autoEl : {
tag : "iframe",
src : "linkedin_emp1.html"
}
}]
}).show();
Related
I have to display a MS World text (about 150 pages) in a ExtJS panel (in modal window I have two tabs, the first is a picture and the second should be the picture description).
I can prepare thix text olso in PDF format but stil have no idea how to do it good.
The iframe tag defines a rectangular region within the document in which the browser can display a separate document.
var panel = Ext.create('Ext.panel.Panel' {
width: 400,
height: 600,
modal : true,
items: [{
xtype: 'component',
html : '<iframe src="give path to your pdf here" width="100%" height="100%"></iframe>',
}]
});
Another solution is xtype: uxiframe. http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.ux.IFrame
var panel = Ext.create('Ext.window.Window', {
width: 400,
height: 600,
modal : true,
layout:'fit',
items: [{
xtype: 'uxiframe',
title: 'myPDF title',
src: 'path to your pdf'
}]
}).show();
For see another way to use this component (with fiddle) take a look at this: https://www.sencha.com/forum/showthread.php?299797-Ext-ux-IFrame
How do I add a text beside the icon in Extjs Panel tool type?
Example:
Below code displays print icon at top right corner of the Panel.
tools : [
{
type: 'print',
// text : 'Print document',
handler : function(){
Ext.Msg.alert('print', 'you clicked print icon');
}
}
]
I like it to render it as ["print icon" space "Print document"]
I don't think you can write a text to a tool (well you could "hack" it using CSS). But you can create custom header for your panel and put a button there.
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
height: 250,
width: 400,
header: {
title: 'My Panel',
items: [{
xtype: 'button',
text: 'Print Document',
iconCls: 'x-fa fa-print'
}]
}
});
Working fiddle https://fiddle.sencha.com/#view/editor&fiddle/1qit
We have a config iconAlign : String possible inputs are'top'
'right'
'bottom'
'left'`
I've created a PDF with TCPDF in app/webroot/files/Users.pdf. Now when I put an URL in browser I get a PDF downloaded and it works great.
But when I put the same URL in Ext-JS 4 in one panel I get:
No FilesController found
How can I disable mod_rewrite if I really want URL /php/app/webroot/files/Users.pdf?
Thank you very much. :)
This is the panel:
var tab = controller.tabs.add(Ext.widget('panel', {
//icon: 'icons/doc_pdf16.png',
title: module,
layout: 'fit',
id: tabid+'Tab',
closable: true,
items: [{
xtype: 'box',
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%',
src: 'php/app/webroot/files/Users.pdf'
}
}]
}));
EDIT!
URL CHANGED TO: src: 'php/files/Users.pdf'
Now it downloads it, but I want it to be rendered in my tab. Some headers or something? :)
The decision between download and display depends on a header. So set the Content disposition to inline: header('Content-Disposition: inline; filename="??.pdf"');
I have a Panel layout with a TreePanel in one region. A user clicks on an node in the tree and a TabPanel should be displayed in another region with information, editing tools etc. for that tree node.
I have a working layout with tree panel and an on('click') event that fires. However, I don't seem to be able to get the TabPanel to be able to render in the layout.
If I allow the TabPanel to render as part of the panel rather than in the on click event it works as expected.
I'm not sure what I'm missing in terms of rendering the tab panel into a named element. Any help would be appreciated.
Below is the code in question.
Many Thanks
Stephen
var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title : 'Site Tree',
region : 'center',
height : 300,
minSize: 150,
autoScroll: true,
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,
dataUrl:'admin.page.getSiteTreeChildren',
root: {
nodeType: 'async',
text: 'nowt here',
draggable: false
}
});
treePanel.on('click', function(n){
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
renderPageTabs(n.id);
});
function renderPageTabs(resourceid) {
pageTabPanel.render('contentpanel');
alert('resourceid'+resourceid);
}
var pageTabPanel = new Ext.TabPanel({
activeTab: 0,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Page Overview',
html: 'This will be the page overview detail tab'
},{
title: 'Content Editor',
html: 'This will be the page editor tab'
},{
title: 'Property Editor',
html : 'This will be the property editor tab'
},{
title: 'Workflow',
html : 'This will be the workflow tab'
}
]
})
var contentPanel = {
id : 'contentpanel',
region : 'center',
margins : '0 0 0 0',
border : false
};
// TODO perhaps the tool bar should be in a north region of this panel
var dashPanel = new Ext.Panel({
layout : 'border',
height : 500,
items : [{
layout : 'border',
id : 'site-nav',
region : 'west',
collapsible : true,
border : false,
split : true,
margins : '0 0 0 0',
width : 275,
minSize : 100,
maxSize : 500,
items : [actionPanel, treePanel]
}, contentPanel],
renderTo : 'dashboardPanel'
});
I don't think you are using the render method in the correct way.
Tab Panel: render
If you are using a Container object to house this Component, then do not use the render method.
Is your tree going to allow a tab to be opened any time a tree node is clicked? Will there be multiple tabs at one time? If so, I think maybe you just want to use .add(), instead of .render(). After you do .add(), you will also need to call .doLayout() on the container panel as well so it will show up.
You may need to alter your renderPageTabs function so that it builds the pageTabPanel object inside of it for each tab, then uses .add() to place it in the contentpanel object.
I assume pageTabPanel isn't defined at the time you trigger the handler.
Try to remove the var keyword in front of "var pageTabPanel =" to make it a global variable.
If that works, it's a scope/variable issue.
The better solution is to give the tabpanel an id and call Ext.getCmp('tabpanelid').render('contentpanel') in your renderPageTabs method.
Hope that helps.
Regards,
Steffen
I'm trying to create a mini browser inside a window using extJS.
Here's what i have so far :
panelContent = new Ext.Panel({
region: 'center',
margins: '0 0 0 0',
autoScroll: true,
html: '<iframe style="overflow:auto;width:100%;height:100%;" frameborder="0" src="http://www.google.com"></iframe>'
});
var tb = new Ext.Toolbar();
var combo = new Ext.form.ComboBox({
width:435,
});
tb.addField(combo);
tb.doLayout();
browser = new Ext.Window({
title: 'Internet Browser',
tbar: tb,
closable: true,
closeAction: 'hide',
width: 600,
height: 600,
border:false,
plain: true,
layout: 'border',
items: [panelContent],
});
I'm trying to get the iframe load the content of what's typed inside the combobox, but i can't find out how to 'tell' him to load a page, and i could not even 'get' when the user hits 'enter'. Maybe replacing the combobox by inputbox ? don't know how to do this (starting with extjs).
Thank you for your help.
You can try this:
Ext.IframeWindow = Ext.extend(Ext.Window, {
onRender: function() {
this.bodyCfg = {
tag: 'iframe',
src: this.src,
cls: this.bodyCls,
style: {
border: '0px none'
}
};
Ext.IframeWindow.superclass.onRender.apply(this, arguments);
}
});
var w = new Ext.IframeWindow({
id:id,
width:640,
height:480,
title:"Knowledge Control Solutions Iframe Window Sample",
src:"http://www.google.es"
})
w.show();
Regards
If you're serious about working with iframes in Ext JS you really should be using the ManagedIFrame user extension. Working with a raw iframe within Ext (especially inside layouts) is not the easiest thing to try and do from scratch.