I have a servlet that returns a PDF. What i trying do is loading the PDF to Ext.Window. Below is the sample source
Ext.getCmp('hisAmpPhyWin').load(
{
url:'servlet/Servlet/',
params: {xhtml:xhtmlData},
text: 'Loading PDF...',
scripts: false
});
Where 'hisAmpPhyWin' is a Ext.Window instance.
The thing is its showing the PDF content (i mean ascii characters) not the actual PDF in the browser.
Please help to fix this issue.
I think you might be better off using an IFRAME tag for this.
var win = new Ext.Window({
title: 'PDF Content',
width: 420,
height: 320,
plain:true,
html: String.format(
'<iframe src="servlet/Servlet?p1={0}&p2={1}" width="400" height="300" />',
xhtmlData.p1, xhtmlData.p2)
})
win.show();
Note: A browser only opens your data as PDF if it knows the content type is application/pdf, in here you are using the AJAX .load() method which ignores the content type coming back from the servlet response, however if you refer to it directly using an IFRAME the browser will apply the correct MIME format.
Dont forget to make sure every instance of your window is destroyed (closeAction = 'close', which is set by default), otherwise it'll keep opening up the same PDF document over and over again.
I don't think you can do it natively, but there is a really good UX that should do it.
http://www.sencha.com/forum/showthread.php?23983-ux.Media-.Flash-Flex-Components-2.1.2&highlight=ux.Media
Ext.onReady(function () {
Ext.create({
title: 'My PDF',
xtype: 'panel',
width: 600,
height: 400,
items: {
xtype: 'box',
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%',
src: '/files/pdf-sample.pdf'
}
},
renderTo: 'output'
});
});
Related
I have the following fieldset in a form Panel in the Admin Dashboard template using ExtJS 6.2:
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
It is working fine, but it is rendering rather strangely, as seen in the following image (I had to mask the data being presented, but the numbers are what to be selected from the combobox):
I am assuming this is a CSS issue, but have not been able to figure out what. NB: I had to copy Admin-all.css Admin-all_1.css Admin-all_2.css and Admin-all_3.css from the build/examples/admin-dashboard/classic/resources folder to the app after I created the template in order to fix a major layout issue.
Yes, this is a CSS issue. The Admin Dashboard example and its CSS have been compiled using Sencha Cmd, so the CSS file contains only the styles required by the example. Since there is no combobox in the example, the combobox styles have not been added and the combobox you inserted does not render correctly.
The only solution would be to use Sencha Cmd to recompile from source and fix the layout issue along the way, which I guess is caused by a missing requires directive.
You might want to read the [update] first, as the nature of the problem has changed.
I am trying to add charting to an AngularJs app. I get the following error
angular.js:13236 Error: Please set height and width for the chart element
at validateHeightAndWidth (https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.js:138:15)
at link (https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.js:106:7)
at http://localhost/plafotrm_2/js/angular/angular.js:9486:44
at invokeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:9492:9)
at nodeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8978:11)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8226:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13) <div id="chart1" ac-chart="chartType" ac-data="chartData" ac-config="chartConfig" class="ng-isolate-scope">
However, in my index.html, I <link rel="stylesheet" href="css/charts.css" /> and in css/charts.css, I
.chartStyle
{
width: 500px;
height: 500px;
}
and the chart is supposed to go into
<div
data-ac-chart="bar"
data-ac-data="chartData"
data-ac-config="chartConfig"
class="chartStyle" >
</div>
It all looks fine to me, and I copied from a Plunk.
I am sure that I am pulling in the correct CSS File, because if I rename it, I get an error in the developer console. But even with no error about the CSS file, I get the error shown above.
Any ideas, anyone?
[Update]
After applying #SteveCampbell 's comment and answer, there are now no errors in the developer console - alas, there is also no chart on the page :-(
The HTML looks like this
<div data-ac-chart="'bar'" data-ac-data="chartData" data-ac-config="chartConfig" class="chartStyle ng-isolate-scope"></div>
no height or width, so that waitForHeightAndWidth : true is only masking the problem :-(
I think I need to read the docs ...
I have this in the controller ...
$scope.chartConfig = {
title: 'Products',
tooltips: true,
labels: false,
waitForHeightAndWidth : true,
mouseover: function() {},
mouseout: function() {},
click: function() {},
legend: {
display: true,
//could be 'left, right'
position: 'right'
}
};
$scope.chaartData = {
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data: [{
x: "Laptops",
y: [100, 500, 0],
tooltip: "this is tooltip"
}, {
x: "Desktops",
y: [300, 100, 100]
}, {
x: "Mobiles",
y: [351]
}, {
x: "Tablets",
y: [54, 0, 879]
}]
};
The issue is not related to CSS. Probably it occurs because the chart element is not initially visible on the first digest cycle, and thus it gets an error when trying to determine the height and width.
The readme on https://github.com/chinmaymk/angular-charts implies that you can set config.waitForHeightAndWidth to true to avoid this problem.
I'm trying to set a loadmask for an extjs4 Iframe while generating a pdf report
var WinReporte=Ext.create('Ext.Window', {
title: 'Reporte de Clientes',
width: 750,
height: 400,
layout: 'fit',
xtype: 'panel',
modal:true,
html:'<iframe src="pdf.php" onLoad="javascript:window.parent.WinReporte.body.unmask();" style="height:100%;width:100%"></iframe>',
listeners: {
show: function(){
WinReporte.body.mask('Creating report...please wait!')
},
}
});
I got a typo error in console:
Uncaught TypeError: Cannot read property 'body' of undefined
so the loadmask never hide
Is there anything glaringly wrong here?
thanks
Looks good, you can also would be use :
WinReporte.setLoading( true )
WinReporte.setLoading( false )
docs setLoading
When I move between views in my Sencha Touch app I see the animation (slide), then the original view(the one I started at) is shown again. At that point, if I click anywhere in the app the view will change to the correct newly active item.
I'm using Sencha Touch, XCode 4, iOS 5 SDK, and PhoneGap 1.3.0.
Thanks in advance!
here's the code for the main viewport:
plantanalyzer.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(plantanalyzer.views, {
login: new plantanalyzer.views.Login(),
plantDetail: new plantanalyzer.views.PlantDetail(),
buildingList: new plantanalyzer.views.BuildingList()
});
Ext.apply(this, {
items: [
plantanalyzer.views.login,
plantanalyzer.views.plantDetail,
plantanalyzer.views.buildingList
]
});
plantanalyzer.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
and for the viewController:
plantanalyzer.controllers.viewController = new Ext.Controller({
index: function(options) {
plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.plantDetail, options.animation);
},
show: function(options) {
plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.buildingList,
options.animation);
}
});
and this is the code for one of the views:
plantanalyzer.views.PlantDetail = Ext.extend(Ext.Panel, {
width: 320,
height: 480,
items: [
{
xtype: 'panel',
html: '<img src="images/logo.jpg"/>',
tpl: '{name}',
cls: 'plantToolbar'
},
{
xtype: 'button',
name : 'buildingSelect',
text: 'Select Building',
cls: 'standardButton',
listeners: {
'tap': function () {
'use strict';
Ext.dispatch({
controller: plantanalyzer.controllers.viewController,
action: 'show'
});
}
}
},
{
xType: 'panel',
cls: 'infoBoxes',
html: 'Efficiency (kw/ton)<br><canvas id="eff"></canvas>'
},
{
xType: 'panel',
cls: 'infoBoxes',
name: 'totalTons',
html: 'Total Plant Tons: '
},
{
xType: 'panel',
cls: 'infoBoxes',
name: 'totalCost',
html: 'Real-time Plant Cost: '
},
{
xType: 'panel',
name: 'uodateTime',
cls: 'lastUpdate',
html: 'Last Update: '
}
]
});
The code looks fine in both sections. When i had issues with phonegap and sencha touch doing this i generally found there was a javascript error occurring or extra html markup was in between the body tag of the index.html file. The first thing would be to open the console in chrome or safari and check the javascript console to determine if it is a javascript error. If you can't run it in them i would suggest the Wienre application that will give you a console and was written to debug phonegap applications (wienre will also allow you to view the html markup to make sure it is correct)
The problem must be somewhere in the view files. The code you have shown is correct.
Well, for what it's worth, after rebuilding the app I found the issue. It was some custom css that was screwing up the app. Specifically the width that was being set on some of the components.
Hopefully, this will save somebody else some time and heartache.
Thanks, Darren and Ilija for your help!
I'm trying to load an outside webpage in an iframe in my sencha touch app. The webpage is of dynamic height so I need the iframe to be scrollable within the sencha touch app. I have been able to get the page to scroll, but the underlying iframe does not render any of the web content below the initial viewport. Here is my code. Does anybody have any ideas?
App.views.Help = Ext.extend(App.views.Base, {
title: 'Help',
mainLevel: 10,
subLevel: 1,
backButton: 'dashboard',
forceTab: App.OTHER_TAB,
forceSideTab: App.HELP_TAB,
layout: 'fit',
bodyPadding: 0,
items: [{
xtype: 'panel',
scroll: 'both',
items: [{
id: 'iframe',
layout: 'vbox',
width: '100%',
height: '2000px',
html: [
'<div style="width:100%;height:2000px;position:fixed;top:0;left:0;background-color:Transparent;float:left;z-index:99;"></div>',
'<iframe style="position:fixed;top:0;left:0;float:left;z-index:1;" width="100%" height="2000px" src="http://mvretail.assistly.com/customer/portal/topics/118700-mobile-basics"></iframe>'
]
}]
}]
/* OLD attempts
html: '<iframe style="overflow-y: scroll; -webkit-overflow-scrolling: touch" width="1000px" height="1200px" src="http://mvretail.assistly.com/customer/portal/topics/118700-mobile-basics"></iframe>'
html: '<div style="overflow-y: scroll; -webkit-overflow-scrolling: touch"><iframe width="1000px" height="1000px" src="http://mvretail.assistly.com/customer/portal/topics/118700-mobile-basics"></iframe> </div>'
*/
});
Ah, a familiar problem. After trying and trying for ages, I've figured this one out. Here's a link to the blog post I made to help solve this for everyone else (and myself
Tech-Talk-Tone : Scrolling External Webpages in Sencha Touch with iFrames & More
Here's the fix ::
Ext.Ajax.request({
url: ‘your/external/web/page/url.html’,
success: function(response, opts) {
Ext.getCmp(‘YourPanelId’).update(response.responseText);
}
});
To make this work for external links, you need to enable either Cross Domain or Cross Browser Ajax requests on the server that you host the app on (or Phonegap). Once you do that, it works fine :)