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"');
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
I would like to have a small mp3 played every time a new panel is shown in the carousel. I used the audio xtype with autoplay but this results in an cacophony of sounds on startup. The problem occurs on all devices (simulators, Chrome, ipad and nexus7). Now, I use a button that activates the sound but I would like it to autoplay when it is needed (on active panel). It "sounds" so simple but I can't get it to work. Any help is appreciated.
This is one carousel item (with a button):
{
layout: {
type: 'vbox',
align: 'stretch',
},
items: [
{
flex:4,
xtype: 'image',
src: 'resources/images/hond.png',
},
{
xtype: 'button',
text: 'Play',
iconCls: 'arrow_right',
cls: 'knopsound',
handler: function() {
Ext.getCmp('hond').toggle();
this.setText(Ext.getCmp('hond').isPlaying() ? 'Pause' : 'Play');
}
},
{
xtype: 'audio',
url: 'resources/images/hond.mp3',
id: 'hond',
loop: false,
enableControls: false,
hidden:true
},
{
flex:3,
xtype: 'video',
url: 'resources/images/test.mp4',
posterUrl: 'resources/images/bekijkgebaar.png',
cls: 'videoplayknop',
autoResume: true,
autoPause: true,
enableControls: false,
}]},
You should leverage the activeitemchange(carousel, newItem, oldItem) event on the carousel to play the sound.
I would just store the url of the sound to play in a custom property of the panel. To do that you could extend Ext.Panel and add a custom property in configuration so you'd get getters and setters for that property. Or you could just have an array of sound urls and call the carousel's getActiveIndex() to play the right sound.
Once you got the url you would play it using a dummy hidden component:
Something like:
document.getElementById("dummy").innerHTML=
'<embed src="' + soundurl + '" hidden="true" autostart="true" loop="false" />';
Or if you are developing a native app using Cordova:
var media = new Media(url, onSuccess, onFailure);
media.play({ playAudioWhenScreenIsLocked : false });
I try to create treepicker but i can't done with that http://jsfiddle.net/UKFVd/
Here is my code
var Panel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5,
width: 300,
height: 100,
title: 'Filters',
items: [ {
xtype: 'treepicker',
name: 'list_id',
fieldLabel: 'Task List',
labelWidth: 60,
displayField: 'text',
store: store
}],
renderTo: Ext.getBody()
});
i check error is TypeError: k is undefined How to working with treepicker thanks
You need to include:
Ext.ux.TreePicker
if you have not.
The code in the fiddle you posted is perfectly fine, however, on the left side under External Resources, add the full URL path to TreePicker.js, and try again, and it will work.
Here is a working fiddle rev: http://jsfiddle.net/UKFVd/6/
Tree picker is not an out of box component that ships with extjs, you have to add it to your web page as an additional resource.
here is a page showing examples:
http://extjs.dariofilkovic.com/
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();
Steps to create File Upload field using Ext Js
As far as specific steps are concerned, using functionality supported in ExtJS 3x, your best best is to use this module/plugin:
http://dev.sencha.com/deploy/dev/examples/form/file-upload.html
The core script comes with the Ext JS package, in your main HTML file (where you have linked to the core Ext scripts), in the head section after your other scripts put:
<script type="text/javascript" src="nameofyourextfolder/examples/ux/fileuploadfield/FileUploadField.js"></script>
Sadly, there isnt a huge amount of documentation on this element of Ext JS- however for basic functionality, you can create a form with an async upload field using the below:
myuploadform= new Ext.FormPanel({
fileUpload: true,
width: 500,
autoHeight: true,
bodyStyle: 'padding: 10px 10px 10px 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items:[
{
xtype: 'fileuploadfield',
id: 'filedata',
emptyText: 'Select a document to upload...',
fieldLabel: 'File',
buttonText: 'Browse'
}],
buttons: [{
text: 'Upload',
handler: function(){
if(myuploadform.getForm().isValid()){
form_action=1;
myuploadform.getForm().submit({
url: 'handleupload.php',
waitMsg: 'Uploading file...',
success: function(form,action){
msg('Success', 'Processed file on the server');
}
});
}
}
}]
})
What this code will do is create a new formpanel with an upload field and an upload button. When you click the upload button- the selected file will be sent to the serverside script handleupload.php (or whatever you call it). It is then this script that handles what you want to do with the file. An example of this could potentially be:
$fileName = $_FILES['filedata']['name'];
$tmpName = $_FILES['filedata']['tmp_name'];
$fileSize = $_FILES['filedata']['size'];
$fileType = $_FILES['filedata']['type'];
$fp = fopen($tmpName, 'r');
$content = fread($fp, filesize($tmpName));
$content = addslashes($content);
fclose($fp);
if(!get_magic_quotes_gpc()){
$fileName = addslashes($fileName);
}
$query = "INSERT INTO yourdatabasetable (`name`, `size`, `type`, `file`) VALUES ('".$fileName."','".$fileSize."', '".$fileType."', '".$content."')";
mysql_query($query);
Which would inject the file into a SQL DB. The thing to remember is the server side file handles an upload just as a normal HTML form would...
Hope this helps!
If you look at the examples available at www.ExtJS.com, you'll find this one.
Although it is based on the standard HTML file upload - just like this answer suggests.
setting the id only will result in the $_FILES array name to be the same as the id. If you need to use something else then set the name config option and it will use that instead.
items: {
xtype: 'form',
border: false,
bodyStyle: {
padding: '10px'
},
items: {
xtype: 'multifilefield',
labelWidth: 80,
fieldLabel: 'Choose file(s)',
anchor: '100%',
allowBlank: false,
margin: 0
}
},
Live demo for ExtJS 4.2.2 is here