ExtJS 7 - How to customize the modern.jsonp manifest file? - extjs

I'm trying to get my head around ExtJs 7 code. Seeing various default examples
There is a file defining the manifest modern.jsonp / classic.json
As a rule, a huge number of libraries are included in these files. Tell me how to customize the manifest yourself and only connect what I need?
Ext.Microloader.setManifest(
{"paths":
{
"Ext":"ext/modern/modern/src"
}
,"loadOrder":
[
{"path":"ext/packages/core/src/Ext.js","requires":[1],"uses":[],"idx":0},
{"path":"ext/modern/modern/overrides/init.js","requires":[],"uses":[],"idx":1},
{"path":"ext/packages/core/src/lang/Error.js",
"requires":[0],"uses":[],"idx":2},{"path":"ext/packages/core/src/lang/Array.js",
"requires":[0,2],"uses":[4],"idx":3},{"path":"ext/packages/core/src/lang/Assert.js",
"requires":[0,2],"uses":[],"idx":4},{"path":"ext/packages/core/src/lang/String.js",
"requires":[0,3],"uses":[],"idx":5},{"path":"ext/packages/core/src/lang/Date.js",
"requires":[0,5],"uses":[3],"idx":6}
And there are hundreds of such lines .. many files are clearly not required by my project, but if I remove some line, then for some reason an error occurs.
All these lines are linked to each other.
How do I generate a new jsonp?
My project is meant to be a website I basically don't need compilation

Basically you want these files to be added to your .gitignore, because they are auto-generated by Sencha CMD.
The files inside the *.json and *.jsonp are added by your requirements.
example
Ext.define('MyNamespace.view.main.Main', {
extend: 'Ext.Panel',
xtype: 'app-main',
requires: [
'MyNamespace.view.List',
'PackageA.TestView'
],
uses: [
'MyNamespace.helper.Dom'
]
});
Sencha CMD runs through the main and finds requires. In order it will add all requirements after the main view.
As soon as it finds uses it will add these at the end, because it seems they are not important for the order.
answer
You can controll the order of the files by changing the requirements or use uses.

Related

Hugo change layout

I have a following structure in my Hugo & Doks project:
- content
- docs
- working.md
- working-as-well.md
- get-started2
- working.md
...
- get-started.md
...
- layouts
- get-started2
- single.html
- get-started.html
Content placed in docs and get-started2 has customized layout and works as expected. Great!
However, I have huge pain to set-up custom layout for get-started.md. I cannot do it like with get-started2 - place it into a folder. Client requests to have get started URL as:
www.SomeProject.com/get-started
so it must not be placed in folder (like get-started2)
www.SomeProject.com/get-started2/working
Do you have any hints please?
You have at least three options:
Use front matter to set the "type":
In content/get-started.md set type: mytype in front matter.
The layout will be located at (for example) layout/mytype/single.html.
Use front matter to set the "layout":
In content/get-started.md set layout: mylayout in front matter.
The layout will be located at (for example) layout/_default/mylayout.html
Or use a subdirectory, but make it the section index:
The file is located at content/get-started/_index.md
The layout will be located at (for example) layout/get-started/list.html
Notice that the template name has changed from "single" to "list", but you can still write your layout in exactly the same way.
I use "(for example)" because Hugo has an enormous list of directories/filenames it searches through to find its templates, and if an earlier matching template is found, the custom layout gets ignored.

CakePHP2.x Plugin consisting of single Pages view

My understanding of the CakePHP2 doc leads me to believe I can create a simple plugin that consists of a single view and that view can (if done correctly) override the default view.
For example, if the application has a app/View/Pages/foo.ctp that simply displays the text "Foo", then a Plugin in app/Plugin/Bar/View/Pages/foo.ctp that contains the text "Bar"
I've made sure that the bootstrap.php loads the plugin with CakePlugin::load('Bar');
And I've deleted app/tmp/cache//
From what I understand I'm not required by Cake to need a Controller or Model.
Yet, the application only displays "Foo" instead of the intended override of displaying "Bar".
From what I've described, what parts of my understanding or implementation approach seem wrong? (And why?) And what are the simple/better ways to implement this plugin view?
TIA
(I have read http://book.cakephp.org/2.0/en/plugins.html and http://book.cakephp.org/2.0/en/views.html)
Themes?
A theme is just a collection of template files that can be used to override the templates used in an application; whereas plugins also contain classes - are you looking for themes?
Creating a template in a plugin is not enough
Alone is not sufficient to just create a template file and load a plugin. To render it you'll need to either:
Explicitly render the file
I.e. In any controller:
$this->render('Bar.template_name')
Create an actual plugin
I.e. Create plugin files:
$ Console\cake bake plugin Bar
$ Console\cake bake controller Some --plugin Bar
$ etc.
$ echo "Something" > Plugin/Bar/View/Some/index.ctp
And request: http://yourapp.com/bar/index
See the docs on how to create a plugin for more information.

dart path dependencies not working (across multiple projects)

I was attempting to make a "library" type of project in dart and then "depend" on that library from another project (all using the path dependency functionality of the yaml file). I understand that I might be able to get the dependency stuff to work if I hosted my library or if I used GIT, but I don't want to do either, because I feel that pure filesystem based dependencies should be a "no brainer".
So, without further adieu, here is my situation. I have a very simple dart library/project based on web_ui that contains two files:
esrvdartui.dart
---------------
library esrvdartui;
import 'dart:html';
import 'package:web_ui/web_ui.dart';
part 'esrvradiobutton.dart';
esrvradiobutton.dart
--------------------
part of esrvdartui;
class ESrvRadioButton extends RadioButtonInputElement
{
ESrvRadioButton ()
{
}
}
I then created another very small/simple web_ui based project called "ExampleForm" that wants to use my esrvdartui project above. Both of these projects exist in the same directory structure. My ExampleForm project contains the following yaml file:
pubspec.yaml
------------
name: ExampleForm
description: A sample WebUI application
dependencies:
js: any
browser: any
web_ui: any
esrvdartui:
path: ../esrvdartui
No matter what I set my path to in the above yaml file, I never see my web\packages directory underneath of my ExampleForm project get updated with my files from the esrvdartui project and as such, I cannot use the files in my library using the file based dependency method, because the build fails for my ExampleForm project.
"Pub install" does not complain with the above path and it doesn't complain when I use an absolute path, so I know that "Pub install" see my dependent project. It just doesn't copy the darned files for me.
Any thoughts?
My pubspec.lock file for ExampleForm is:
# Generated by pub
# See http://pub.dartlang.org/doc/glossary.html#lockfile
{"packages":{"logging":{"version":"0.5.0+1","source":"hosted","description":"logging"},"source_maps":{"version":"0.5.0+1","source":"hosted","description":"source_maps"},"unittest":{"version":"0.5.0+1","source":"hosted","description":"unittest"},"pathos":{"version":"0.5.0+1","source":"hosted","description":"pathos"},"analyzer_experimental":{"version":"0.4.7+1","source":"hosted","description":"analyzer_experimental"},"web_ui":{"version":"0.4.6+1","source":"hosted","description":"web_ui"},"js":{"version":"0.0.21","source":"hosted","description":"js"},"csslib":{"version":"0.4.3","source":"hosted","description":"csslib"},"esrvdartui":{"version":"0.0.0","source":"path","description":{"relative":false,"path":"C:/Users/Jason/dart/esrvdartui"}},"html5lib":{"version":"0.4.3","source":"hosted","description":"html5lib"},"args":{"version":"0.5.0+1","source":"hosted","description":"args"},"browser":{"version":"0.5.0+1","source":"hosted","description":"browser"},"meta":{"version":"0.5.0+1","source":"hosted","description":"meta"}}}
My pubspec.lock file for esrvdartui is:
Generated by pub
See http://pub.dartlang.org/doc/glossary.html#lockfile
{"packages":{"meta":"version":"0.5.0+1","source":"hosted","description":"meta"},"browser":{"version":"0.5.0+1","source":"hosted","description":"browser"},"args":{"version":"0.5.0+1","source":"hosted","description":"args"},"html5lib":{"version":"0.4.3","source":"hosted","description":"html5lib"},"analyzer_experimental":{"version":"0.5.0+1","source":"hosted","description":"analyzer_experimental"},"csslib":{"version":"0.4.3","source":"hosted","description":"csslib"},"web_ui":{"version":"0.4.6+1","source":"hosted","description":"web_ui"},"pathos":{"version":"0.5.0+1","source":"hosted","description":"pathos"},"js":{"version":"0.0.22","source":"hosted","description":"js"},"source_maps":{"version":"0.5.0+1","source":"hosted","description":"source_maps"},"unittest":{"version":"0.5.0+1","source":"hosted","description":"unittest"},"logging":{"version":"0.5.0+1","source":"hosted","description":"logging"}}}
I finally got this to work, but for the life of me, I couldn't find this documented anywhere. All you have to do is create a project in the Dart IDE. Then, create a top level folder in that project called "lib" (blow all other directories away other than the top level "packages" folder). Now, create your main library's .dart file. Let's call it "mylibrary.dart". This contents of this file will look something like this:
mylibrary.dart
library mylibrary;
import 'dart:json';
part 'src/libraryfile1.dart';
Now, create a sub-directory underneath of "lib" to place your library's source files into. This can really be named anything, but I choose to name it "src". Place your libraryfile1.dart file there and it should look something like this:
src/libraryfile1.dart
part of hix_lib;
.
.
.
All import statements should always be placed in your top-level main library file: mylibrary.dart.
Now, in the project that you wish to use this file-based library in, you must add your "mylibrary" to your project's pubspec.yaml file and choose: "Source: path". On my machine, because all projects are in the same directory, my path simply points to: ../mylibrary
And that's all there is to do!!!!!

Changing Extjs 4 default MVC folder structure

I am writing an application that has both extjs and sencha touch version. my current folder structure is like
root
...extjs4application
......app
.........model
.........store
.........view
.........controller
...senchatouch2application
......app
.........model
.........store
.........view
.........controller
model and store are similar in both application so i need to organize my folder structure in such a way that both application could share single/common model and store folders. What could be the possible solution? Please help
Based on a cursory glance over the source for Ext.app.Application it looks like it's possible to change the paths without overriding anything.
The path to the app folder is controlled by the appFolder config which defaults to "app." You can change this as you see fit but it's not necessary to do so.
Also included in the application class is an undocumented config called paths which is an object containing simple (key, value) pairs. Example:
paths: {
"Ext": "/path/to/Ext",
"Ext.ux": "/path/to/Ext/ux"
// etc...
}
The Ext.app.Application constructor checks for the presence of the paths config and calls Ext.Loader#setPath for each entry. You can read more about Ext.Loader at Sencha Docs
I don't like including disclaimers with my answers, but in this case I feel I should: I haven't personally used this to create an application so I can't completely vouch for its correctness, but it should be a start. If this should fail, you may need to override or extend the library classes to suit your needs (probably either Ext.app.Application or Ext.Loader).

ExtJS MVC, dynamic loading and i18n

I would like to translate my ExtJS application in different languages. My issue is that I'm using ExtJS MVC framework, and most of my JS files are downloaded dynamically by the framework itself.
The ideal solution (that I thought of) would be to have an extra option in the Ext.Loader (or in my Ext.app.Application) that would define the language to use, and depending on this to automatically download such file as "a.MyClass.fr.js" after loading my "a.MyClass.js" (which would contain an Ext.apply, overriding my string resources). That's probably not available in the ExtJS framework at the moment.
The alternative solution I can see, is to perform a trick on the server-side. First, a cookie would be created on the client, to set to the language. On the server-side, I could catch all the requests to JS files, then if a cookie is set (='fr' for example), I'd combine the requested JS file (MyClass.js) with its i18n's friend (MyClass.fr.js) dynamically on the server and return the result. That would work, but it's really tricky because it implies other things (caching...).
Maybe the best way is to implement the first behavior I described in the ExtJS framework myself...
What do you think? I'm looking for a really clean and neat way of doing it! Thanks :)
I recently struggled with the same problem.
Finding a clean way to do this was quite a challenge - most alternatives were either..
1) Duplicate your code base per locale (WTH)
2) Download localized files overriding each of your components (Maintenance hell? What about the poor translators?)
3) Use/generate a static file containing translations and refer to it (All languages are downloaded? Extra build step to generate it? How do you keep them in synch?)
I tried to get the best of all worlds and ended up with a utility class responsible for:
1) Loading the ExtJS translation files (which basically apply overrides to extjs base components)
2) Loading a locale specific property resourcebundle (specifying which locale to load) from the server.
3) Prototyping String with a translate() method which queries the loaded store (containing the message bundle from the server) and returns the translation based on the value of the string.
This is the gist of things:
Bundle & prototyping:
localeStore.load({
callback : function(records, operation, success) {
// Define translation function (NB! Must be defined before any components which want to use it.)
function translate() {
var record = localeStore.getById(this.valueOf()) ;
if(record === null) {
alert('Missing translation for: ' + this.valueOf()); // Key is not found in the corresponding messages_<locale>.properties file.
return this.valueOf(); // Return key name as placeholder
} else {
var value = record.get('value');
}
return value;
}
String.prototype.translate = translate;
callback.call(); // call back to caller(app.js / Ext.Application), loading rest of application
}
});
As an example from a view:
this.copyButton = Ext.create('Ext.button.Button', {
disabled: true,
text: 'DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON'.translate(),
action: 'openCopyDialog'
});
Bundle on the server (mesages_en.properties):
DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON=Copy file
etc..
Pros:
No-fuss code, 'Your_key'.translate() makes it easy to read and aware that this is a localized string
None/little maintenance overhead (Keeping an override file for each locale? Jesus..)
You only load the locale you need - not the whole shabang.
If you really want to, you could even have your own translation for the ExtJS locale files in the same bundle.
You could write unit tests to ensure that all bundles contain the same keys, thus avoiding orphaned translations later
Cons:
Synchronous - the store must be loaded before your main app starts. I solved this by adding a callback from the utility class which was called once all texts were loaded.
No real-time population of texts.. though I didn't want to make my users overload the server either :P
So far my approach has worked out pretty well for my requirements.
Site load isn't noticeably slower and the bundles (containing ~200 keys/values per bundle) measure out at ~10kb during load.
There is currently no solution so I decided to create my own hack/addon on the Ext.Loader. I uploaded the code on GitHub: https://github.com/TigrouMeow/extjs-locale-loader. It's exactly what I needed and I really hope it will help others as well!
You should first complete your development phase and build your project or use ext-all.js file to I18s translate your UI
see: http://docs.sencha.com/ext-js/4-0/#!/example/locale/multi-lang.html
The appropriate language modifier script (/ext/local/ext-lang-xxx.js) needs to be loaded after ext is loaded (including dynamically loaded classes). In the example above, I would have probably used Ext.Loader.loadScriptFile but they eval a downloaded one directly. The only other thing is that your classes need to be built in different languages or you just use variables and reference the lang-specific variable file.
you could also use a variable in the Loader paths:
var lang='fr';
Loader
{
paths:
{
'Ext': '.',
'My': './src/my_own_folder'+'/'+lang
}

Resources