Good day. Sorry but I've stumbled upon a problem that I can't seem to figure out for the past couple of hours. I downloaded this printing class to be able to print a Form that I have in my web application. I copied the Ext.ux.Printer folder in my scripts folder inside resources. The file path looks like: resources/scripts/Ext.ux.Printer and the resources folder is on the same level as the app folder.
My Loader looks like:
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux.Printer': 'resources/scripts/Ext.ux.Printer/Printer'
}
});
And the Application looks like:
Ext.application({
requires: [
'Ext.Loader',
'Ext.layout.container.Absolute',
'resources.scripts.Notification',
'Ext.layout.container.Column',
'Ext.ux.Printer.Printer'
], //models, views, controllers, follow after
and I try to use it in my code as such:
Ext.ux.Printer.print(form);
However, I am given an Uncaught TypeError: Cannot read property 'Printer' of undefined whenever I try to execute the line of code above.
Can anyone help me? I'm a beginner in ExtJS4 and I'm just trying to follow examples I see around the internet - it is possible that I tried to appropriate my code incorrectly with something I saw online.
Any help is very much appreciated, thank you.
UPDATE 1
Upon discussion with Guilherme Lopes below we did the following steps:
Import the js files by adding it as a js resource in Sencha Architect. Make sure that the file path is correct.
Check the includeAfterAppJS checkbox. Due to a bug in Architect, sometimes the JS Files are added in before the ExtJS.
Open index.htmluse ext-all.js instead of ext-dev.js. Note that Sencha Architect overwrites/resets this file every time you save your project. A quick fix is to go to project settings and uncheck updating index.html.
Try Ext.ux.Print.print(form);
By the developer instructions, you should import the script files using your main html document, the same way you do with ExtJS classes (if you are not using the bootstrap).
These lines should be added after you import the ExtJS library:
<script type="text/javascript" src="Printer.js"></script>
<script type="text/javascript" src="renderers/Base.js"></script>
The library currently comes with renderers for Ext.grid.GridPanel, and Ext.tree.ColumnTree.
These can be included as required:
<script type="text/javascript" src="renderers/GridPanel.js"></script>
<script type="text/javascript" src="renderers/ColumnTree.js"></script>
And your calls to Ext.ux.Printer should start working.
If you are using Architect, add your external JS files clicking on: + => Resources => JS Resource
And then change the URL to the path you need (do this for every file you wish to add)
* I would just uncheck the x-compile and x-bootstrap
Related
I use ExtJS together with Grails. I have already two ExtJS applications in that project and now I want to add a third one.
The new application runs fine in development mode, but when I am starting it in production mode and then try to open it in the browser the screen stay white and the chrome console tells me that the bootstrap.js is missing in the production build folder. Which is true, there is no such file.
First I looked for a configuration to add this file when building in prod, but then I noticed that in the other two working application, that I already have, there is no bootstrap.js file either in the production build. Instead there are microloader.js files. Unfortunately I wasn't the one who set those ext applications up,so I don't know the reason for that.
Then another difference I noticed between my new not working application to the two working ones was in the index.gsp files.
The new one:
<g:if env="production">
<base href="../path">
<script id="microloader" data-app="1234..." type="text/javascript"
src="bootstrap.js"></script>
</g:if>
<g:else>
<base href="..path">
<script id="microloader" data-app="1234..." type="text/javascript"
src="bootstrap.js"></script>
</g:else>
And one of the working ones:
<g:if env="production">
<base href="../path/">
<script id="microloader" data-app="4321..." src="microloader.js"></script>
</g:if>
<g:else>
<base href="../path/">
<script id="microloader" data-app="4321..." type="text/javascript" src="bootstrap.js">
</script>
</g:else>
Changing the new index.gsp accordingly only leads to microloader.js being missed instead of the bootstrap.js
Another thing that I noticed is that the index.html which is created in the build folders look different.
The old ones look very plain and basic and in the new one there is lots of code, which seems to be equivalent with the code that is in the microloader.js files in the working apps.
I have the following assumptions:
If the file is called bootstrap.js or microloader.js doesn't matter, it just a different name, but the same thing.
Because we use the index.gsp files the index.html files in the production build folders aren't used.
Somewhere there is a configuration in the old applications that tells the application to use the microloader.js instead of the code in the index.html, which I am missing in the new one.
Is here maybe anyone who had a similar problem or has any idea how to solve this problem?
I am using ExtJS 7.5.1 in the old and the new applications. But the new one uses the modern toolkit instead of the old ones who are using the classic toolkit.
Grails 2.5.6 is used.
Please let me know, if you need any other info.
Thank you very much in advance.
I was able to figure it out. My third assumption was correct and the second one probably as well. Per default the microloader.js is added to the index.html. Since in my case I use the index.gsp, we have to add a configuration to tell sencha, that it writes the microloader into a seperate file. The configuration is in the app.json and looks like this:
"production": {
"output": {
"microloader": {
"embed": false
},
"appCache": {
"enable": false,
"path": "cache.appcache"
}
},
"loader": {
"cache": "${build.timestamp}"
},
"cache": {
"enable": true
},
"compressor": {
"type": "yui"
}
}
The important bit here is this:
"microloader": {
"embed": false
},
When this configuration is added and we run "sencha app build" again, then there will be a seperate file microloader.js
And then I can change the new index.gsp to look like the index.gsp files of the old applications.
I hope this will help someone in the future.
Best regards
I am trying to run an ExtJs application without using SenchaCmd. These are the scripts I load in the index HTML file:
<script type="text/javascript" language="javascript" src="dev/ext-all-debug.js"></script>
<script type="text/javascript" language="javascript" src="dev/all.js"></script>
The all.js file contains all the views, controllers, stores and models concatenated into one file using a gulp task (including app.js and Application.js files). The problem is that after these 2 files are loaded, The Ext Loader is still trying to load the required Controllers/Views one by one.
I tried adding the following code into the Application.js file but nothing changed:
constructor: function() {
this.callParent(arguments);
Ext.Loader.setConfig({enabled:false});
},
Any ideas? Why is the Ext.loader trying to load all the requires if they are included in the all.js file? Thanks.
What version of Ext JS? If you're using 5.0.1 the "ext-all-debug.js" file in the root of the ext directory will not work - you want the one in the "build" directory...
I think I know why the Ext.Loader didn't work as expected...
The concatenated files need to be in the right order because on each Ext.define the loader is searching for the dependencies specified in the requires section and if the dependencies are not loaded it will try to load them.
It works recursively until the dependency tree is loaded.
There is a Grunt plugin doing this: https://www.npmjs.com/package/grunt-sencha-dependencies
However I am still not satisfied of the development workflow with ExtJs because when using "app watch", in dev mode, you could be loading hundreds of JS files on a page refresh if your app is big enough and this impacts the performance quite a bit.
I have got extjs 5 which contains many folders (.sencha, build, cmd, examples, licences, overrides, packages, plugins, src, and welcome). I want to use charts in a web application, so what I did is that I copy/paste ext-all-debug.js file that was in the build folder. This gave me the possibility to display a panel, but there was no css. So I copy/paste the css files that I found in \ext-5.1.0\build\packages\ext-theme-neptune\build\resources. So the panel is displaying fine with css.
Then I want to use charts, but, for a reason I don't understand, charts are not included in ext-all-debug.js file. So I copy/paste "ext-charts-debug.js". And now I'm able to display simple cartesian charts (others do not work), but their behaviour is not normal (wrong axis, legend always in bottom when it locked it right or left, etc.). The code I wrote to display the chart has been tested on sencha fiddle and is working perfectly.
So my question is: What should I inlcude in my web application lib folder to let me use EVERY sencha components (with css). Thanks a lot !
PS: Here is my current web application lib folder:
For ExtJS 5 you really should read the documentation on Sencha Command, it's by far the easiest way to get your project running.
If you really want to manually add the files, copy the build folder from the ExtJS Framework to your project's folder and then add this to your index.html:
<link rel="stylesheet" href="build/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" />
<link rel="stylesheet" href="build/packages/sencha-charts/build/crisp/resources/sencha-charts-all.css" />
<script src="build/ext-all-debug.js"></script>
<script src="build/packages/sencha-charts/build/sencha-charts.js"></script>
Your Sencha Charts are not being displayed correctly because you forgot to add the css for your sencha charts theme.
PS: Really, really read the docs on Sencha Command.
I am new to EXT JS environment. I am working on a dynamic java project in eclipse indigo where i want to use ext-js calendar in one of my jsp.I saw the EXT_JS calendar demo from downloaded 'ext-4.1.1' sdk(index.html file in ext-4.1.1a\examples\calendar).
I want to create a .js file as like ext-js calendar page. So for that i followed the path given in
http://loianegroner.com/2010/11/spket-setting-up-eclipse-ide-for-ext-js-and-jquery-development/ to integrate ext-js in eclipse.
But now when i copy index.html to my webcontent folder then it is not working(Originally it is showing nothing). But when i copy the entire ext-js source code to my workspace web content then running the index.html file in example/calendar folder of ext-4.1.1a giving me required result.But I don't think this as a solution.
I could not find any way also how to start to do my task.
So Pls anybody help me here...
Regards :
Dev
When nothing shows up on the screen, it is commonly a case where the ExtJS library isn't loaded. Without seeing the code, it's hard to pinpoint the issue.
Using Chrome Dev tools or Firebug for Firefox, take a look at the console and/or network output.
The files you're looking for will be included in the <head> section of your index.html. There should be ext-all.js or possibly ext-all-debug.js at a minimum, plus the style sheets.
If this is your issue, then you need to include the proper paths to the ExtJS library. This can be the local installation, or you can use a CDN. For example:
<script src="http://cdn.sencha.com/ext-4.1.1-gpl/ext-all.js"></script>
There is a symfony 2 project with extjs4 frontend. I started with an extjs bundle which contains now the entire extjs app. The problem is it will be difficult to manage as the project grows.
I think , the best solution would be to relocate all extjs file to the related bundle
(e.g.: to the UserBundle all forms, panel, grid etc. ) and use a central Extjs bundle to load them.
What is the best practice to organize a project in this manner?
And how to include the js files from another bundle?
Or should I create extjs app to every bundle (I'm not sure it would be wise) ?
I'm not sure this is best practice, but I know this works on ExtJs 4.0.7.
So for example I have the following folder structure:
proj
index.htm
proj
app.js
app
view
SimpleIFrame.js
So in app.js I have the following code:
Ext.Loader.setConfig(
{
enabled: true
});
Ext.Loader.setPath('proj.view', './proj/app/view');
Ext.Loader.require([
'proj.view.SimpleIFrame'
])
In SimpleIFrame I have the following code:
Ext.define('proj.view.SimpleIFrame', {
extend: 'Ext.Panel',
alias: 'widget.simpleiframe',
...
});
So then later in app.js I can do the following:
var panel = Ext.create('adminClaiming.view.SimpleIFrame', {
title: 'Hello',
...
});
That allows me to separate the whole app.js into separate files. Up until I figured this out I kept getting the dreaded:
Uncaught TypeError: object is not a function
Which just meant that I'd forgotten to call Ext.Loader.setPath.
Now don't quote me on this next bit, but it seems that if you remove the Ext.require then SimpleIFrame.js is loaded in the global namespace, which is not really what you want, but it's still loaded, and it does work, which is more important.
Hope that helps. And mind you I will be most likely all be wrong ;), and had just gotten lucky in my case; what can I do, I'm still a n00b.
You could make separates bundles with your JS files inside Resources/public/js of each of them.
Then, on your main html template you could include all your JS Files using assetic.