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>
Related
I realized that, by default, the umi project does not have manifest.json. I added the file to the public folder manually. Then, after compiling the application through the umi build command, my custom file is merged with thedist folder.
But is there any way to add the meta header to the self-generated index.html file?
I have not been able to find anything in the UMI docs. My guess, I need to build a script to insert it into the file after it is fully compiled.
Anything would be helpfull.
If you are using the pro.ant.design, you can find the index.html in /src/pages/document.ejs. It is a templated version of the index page.
I'm using the react-ckeditor in project this is load ok.
but I need to use ckeditor full version as editor in the page
how could I use react-ckeditor full version not the standard version?
From the documentation:
By default, the CKEditor 4 React component loads the standard preset of the latest CKEditor 4 release from the CDN when creating the first editor. This behavior can be altered by changing the value of the CKEditor.editorUrl variable to point to the desired CKEditor script location:
CKEditor.editorUrl = 'https://your-website.example/ckeditor/ckeditor.js';
A zip file can be downloaded from https://ckeditor.com/ckeditor-4/download/ and upzipped inside your source code (e.g. inside public/ckeditor-4 folder if using create-react app).
I was also facing the same issue as I wanted to include all the available options in my toolbar. Turns out all you need to do is mention the type of distribution in your CDN link as full-all, to include full preset together with all other plugins created by CKSource.
I changed it from standard to full-all in my CDN link as given below-
<script src="https://cdn.ckeditor.com/4.16.0/full-all/ckeditor.js"></script>
Also, check the version. This is my source of info: https://cdn.ckeditor.com/
Hope this helps :)
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.
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
I was unable to find any open source video recorder that can be integrated with an angularjs app. I came across Youtube-direct-lite but I have no idea how to integrate this with an angular app. I am trying to host my own instance of youtube-direct-lite
I have already configured the config.js as been told in this doc. Should I just copy paste all the js, css files to my project and use the index.html as a partial to display the recorder?
about configuring direct lite:
in config.js enter your developer-key and client-id.
then read the README file
download nodejs console
browse to the folder with the source in it
run this command : node r.js -o app.build.js
and it'll build the minified source for you, then copy and paste that source into your website and use the index.html & admin.html as the
and i'll work just fine.
about angular with direct lite:
I've seen so far only one implementation for it that is in youtube/dev/demos
http://www.youtube.com/yt/dev/demos.html#/upload
if you opened the sources, you'll find that it is uses angular, and it applies ytdirectlite, but I don't know how to use it and I still cannot find the opensource for it.