Is there default way to apply localization packet globaly to all Application from /extjs/locale/ in ExtJS 4.1 MVC?
Maybe some Ext.Application or Ext.Loader metods/properties?
I don't think so.
You have to load the appropriate file in extjs/locale/
For example(tomcat server),
in index.jsp
You can do something like
<script type="text/javascript" src="extjs/locale/ext-lang-<%=language %>.js"></script>
(You can also load locale file dynamically via JS)
To localizate Built-in Ext JS component, add the following code your app.js:
launch: function() {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "extjs/locale/ext-lang-" + navigator.language;
head.appendChild(script);
}
To localizate custom Ext JS component, use Locale.js.
We have used it in two Ext JS projects. Pretty simple.
Related
I am using React-Router-Dom-6. my public folder structures are:
I have some external javascript libraries for template design in the main public and my index.html is:
<!--=============== scripts ===============-->
<script src="%PUBLIC_URL%/assets/js/jquery.min.js" type="text/babel"></script>
<script src="%PUBLIC_URL%/assets/js/plugins.js" type="text/babel"></script>
<script src="%PUBLIC_URL%/assets/js/scripts.js" type="text/babel"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
above javascript files are working or loading on the first page when the application gets started. But these libraries are not working when redirecting to another page. at that time route changed but the js files are not loading. I tried many ways but couldn't get the solution. I am using react-router-dom v6 for routing.
You should make use of them in the App.js component, call them with useEffect hook before your render method... this process should work on every route changed
for example:
useEffect(() => {
const script = document.createElement("script");
script.src = "/path/to/jquery.js";
script.async = true;
document.body.appendChild(script);
},[])
or this link should do
https://betterprogramming.pub/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668
I am new to angular js. I have downloaded ui-grid.js and ui-grid.css to implement ng-grid in our existing angular js project. I have added the path for both of them in Index.html like below.
<link href="app/assets/vendor/css/ui-grid.css" rel="stylesheet" />
<script src="app/assets/vendor/scripts/ui-grid.js"></script>
But when I try to use it in tPController.js file like below, the page is not loading, application itself is not coming up.
(function () {
angular.module('dApp',['ui.grid']).controller('tPController', function ($timeout, $scope) {
var vm = this,
---------------
});
})();
Note that i have not yet started using ng-grid in the html file. Only using ['ui.grid'] in .js file is causing the issue.
In my project i want to drag external files with extension ".opgs" into the browser drop zone.
How can i achieve this using angular js ?
I used an module: ng-file-upload - https://github.com/danialfarid/ng-file-upload.
Install with bower bower i ng-file-upload -S.
Load it in your head tag:
<script src="/admin/assets/vendor/ng-file-upload/ng-file-upload.min.js"></script>
You hook the drop action to your dom element like this:
<div ngf-drop="upload($files)"></div>
Inject it into your app:
your_app = angular.module('your_app', ['ngFileUpload'], function () {
Then you get the file in the controller like this:
$scope.upload = function (file) {
console.log(file)
var extension = file[0].name.match(/\.(.*)$/)[0]
if (extension == 'opgs') {
upload_service.upload(file[0])
}
}
Works quite well.
Use ng-file-uplaod plugin
it give different directive to upload / drag-drop file
<div ngf-drop="upload($files)" ngf-accept="[YOUR FILE TYPES]" ngf-multiple="true"></div>
See the DEMO page
I am working on a Backbone.js application. We are using underscore.js templates to load the contents to the View. Currently we have all the templates inside the index.html file, so the size of the file is increasing. Can anyone help me to find a solution for separating these templates to other files? Thanks in advance.
EDIT
Recently I have visited the Backbone patterns and I found that we can use JST templates to create separate template files for each template. They explained that we can create a jst.js file to put all our template code:
// http://myapp.com/javascripts/jst.js
window.JST = {};
window.JST['person/contact'] = _.template(
"<div class='contact'><%= name %> ..."
);
window.JST['person/edit'] = _.template(
"<form method='post'><input type..."
);
<script src="http://myapp.com/javascripts/jst.js"></script>
Now all the templates are in the jst.js file. But if you have lots of templates and you want to move the templates to separate files you can create separate template files:
// http://myapp.com/javascripts/jst.js
window.JST = {};
//http://myapp.com/javascripts/contactPerson.template.js
window.JST['person/contact'] = _.template(
"<div class='contact'><%= name %> ..."
);
//http://myapp.com/javascripts/editPerson.template.js
window.JST['person/edit'] = _.template(
"<form method='post'><input type..."
);
<script src="http://myapp.com/javascripts/jst.js"></script>
<script src="http://myapp.com/javascripts/contactPerson.js"></script>
<script src="http://myapp.com/javascripts/editPerson.js"></script>
Please let me know if there is any simpler idea. Thanks!
You can have templates in seperate html files and can load them as text using requirejs. There is a plugin called text which will help you to do that.
Example:
define([
'text!templates/sampleTemplate.html'
], function(tmpl){
var Sampleview = Backbone.View.extend({
id: 'sample-page',
template: _.template(tmpl),
render: function() {
$(this.el).html(this.template());
return this;
}
});
return SampleView;
});
The html file "templates/sampleTemplate.html" will be taken from the root path specified in the require.js config
Load them via xhr. The lib requirejs (requirejs.org) loads html file dependencies this way. This will work when in development, but the templates should be compiled into the js files in production.
I use a lot of script in an application, some of them are not required to load the application, I want to load them just before their use if possible, knowing that my application is coded in ExtJS, and uses many ajax calls
You could look at using LABjs which is a script loader.
Old and busted:
<script src="framework.js"></script>
<script src="plugin.framework.js"></script>
<script src="myplugin.framework.js"></script>
<script src="init.js"></script>
New hotness:
<script>
$LAB
.script("framework.js").wait()
.script("plugin.framework.js")
.script("myplugin.framework.js").wait()
.script("init.js").wait();
</script>
Update:
If you want to load jQuery you could do something like this from this blog post.
<script type="text/javascript" src="LAB.js">
if (typeof window.jQuery === "undefined") {
$LAB.script("/local/jquery-1.4.min.js");
}
You can load an external file using javascript only when/where you need it:
function LoadJs(url){
var js = document.createElement('script');
js.type = "text/javascript";
js.src = url;
document.body.appendChild(js);
}
LoadJs("/path/to/your/file.js");
Here's a great post on the topic with a proposed solution you might want to check out: http://www.nczonline.net/blog/2011/02/14/separating-javascript-download-and-execution/