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
Related
I have this form and I want to populate a new window when I click a given button. Anyone who can help?
I tried creating a new panel and attaching it to a constructor but this is not working. If a reference to solving this issue will be appreciated.
If you want to create a window you can simply use the Ext.window.Window.
And if you try to show an image you can use Ext.Image.
Here is an example:
Ext.create('Ext.window.Window', {
title: 'Hello',
itemId: 'window-image',
height: 500,
width: 350,
bodyPadding: 5,
layout: 'fit',
items: [{
xtype: 'image',
src: 'https://www.w3schools.com/tags/img_girl.jpg'
}]
}).show();
And here is a sencha fiddle: example
Im recieving from server a JSON containg info about 'colaboradores', for each colaborador i'm creating a panel, like this
var objChildren=[];
responseObj.map((colaborador)=>{
var newColab =Ext.create({
xtype: 'panel',
height: 425,
margin: 10,
width: 350,
border: true,
bodyBorder: false,
bodyCls: 'panelColab',
items: [
{
xtype: 'panel',
items: [
{
xtype: 'image',
baseCls: 'image-cropper',
style:{
backgroundColor:'white',
backgroundImage: 'url('colaborador+imageUrl+')'
}
}
//more nested items
]
}]
})
objChildren.push(newColab);
})
Ext.getCmp('PanelColab').removeAll();
Ext.getCmp('PanelColab').add(objChildren);
The problem is when this responseObj has like, 1k+ colaboradores, the browser informs me that one page is making my browser slower, and asks me if i want to stop the page from loading (I'm using firefox).
This approach is correct for this quantity of components?
Increasing the quantity of components may slow down the page.
You should use DataView with store containing 1k records instead of creating a 1k components.
DataView Example
Displaying image in a window sounds a simple task but i have problem with it.
I want to show my image (with variable size) to show in a window (or panel) with size 300*400. Then, by clicking on image or maximizing window, user sees image in its original size.
Following code works for stretching image to 300*400 thumbnail in initial view, but when maximizing it also stretches to full screen.
var myImage = Ext.create('Ext.Img', {
src: imgSrc,
});
picWin = Ext.create('Ext.window.Window', {
title: "My Picture",
width: 300,
height: 400,
maximizable: true,
maxWidth: myImage.getWidth(),
maxHeight: myImage.getHeight(),
layout: "fit",
items: [myImage]
})
picWin.show();
Take a look at my example: https://fiddle.sencha.com/#view/editor&fiddle/26eo
Seems to work. I removed the set max width and height.
Finally, i came to a solution like this. First we need to use card layout. Then we define two containers for specified image, one for initial view and one for maximized view. At last, we need to change these cards when window is maximized and when restored.
Code is as follows:
// Two image for when maximizing and when in initial view
var myImage = Ext.create('Ext.container.Container', {
layout: 'fit',
items: [{
xtype: 'image',
src: imgSrc
}]
});
var myImage2 = Ext.create('Ext.container.Container', {
scrollable: true,
items: [{
xtype: 'image',
src: imgSrc
}]
});
picWin = Ext.create('Ext.window.Window', {
title: "my title",
width: 300,
height: 400,
maximizable: true,
layout: "card",
activeItem: 0,
items: [myImage,myImage2],
listeners: {
maximize: function(){
this.setActiveItem(1);
},
restore: function(){
this.setActiveItem(0);
},
}
})
picWin.show();
What if we changed the layout from 'fit' to 'hbox' instead? This seems to give you what you want - when the window is maximised, the image does not stretch. Center and vbox also seemed to work, so there are probably a few layouts you could use to make it work. But since you only have an image in the window, it probably doesn't matter.
picWin = Ext.create('Ext.window.Window', {
title: "My Picture",
width: 300,
height: 400,
maximizable: true,
layout: "hbox",
items: [myImage]
})
picWin.show();
}
I have a vbox panel on the right side of my page:
{
xtype: 'panel',
region: 'east',
itemId: 'clipboard',
autoScroll: true,
width: 200,
layout: {type:'vbox',align: 'stretch',pack: 'start'},
collapsible: false,
split: true,
border: false,
}
When an event occurs, I need to add a new image with text beneath it to the 'clipboard' strip:
var clipboard = Ext.ComponentQuery.query('panel[itemId=clipboard]')[0];
clipboard.add(
{
xtype: 'panel',
layout: { type: 'vbox', align: 'center',pack: 'start'},
data: data,
margin: '5 0 5 0',
items: [{
xtype: 'image',
src: 'resources/images/clipboardItem.png',
height: 32,
width: 32
}, {
xtype: 'box',
html: 'This text needs to wrap around because it is too wide to fit in the clipboard strip.'
}]
});
The image is correctly centered over the text. The text should wrap around, so that it's not wider than the clipboard. However, its container is not shrinking to the width of the strip. The text length is determining the width of its immediate container.
What configuration changes do I need to make so that each item I add to the clipboard has a centered image, followed by a block of text that potentially wraps around within the bounds of the clipboard, and everything adjusts when the user changes the width of the clipboard?
http://jsfiddle.net/nxSmS/
Just add a width to the box...
xtype: 'box',
width: '100%',
html: '<p>This text is super long and will be too wide for the panel</p>',
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();