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).
Related
I want Bake to add a custom TimestampBehavior to every table which has the fields created_at, modified_at, proved_at. I also want to remove the Validators for these fields.
Whether a model is added the TimestampBehavior is programmed in Bake/src/Shell/Task/ModelTask.php. I don't want to edit the file in the vendor folder, because my file might be overridden by an update.
Moving the file to my plugins folder doesn't work since i get the error message "class ModelTask is already defined".
Is it possible to extend the ModelTask somehow or to use a custom ModelTask.php in my plugins folder for bake to achieve my goal?
Thanks for your help!
Moving the file to my plugins folder doesn't work since i get the error message "class ModelTask is already defined".
It doesn't work because you probably haven't changed the namespace. Fix the namespace to the one the plugin uses and you're done. You can even extend classes of the same name by using uses Foo as Bar and then Foo extends Bar.
I have a plugin installed that has its own layout overrides for different controllers. However I'm having trouble understanding the mechanism for modifying the paths.
In the plug-in controller if I tell it to use my layout
$this->layout = 'default_dashboard';
Which is in app/Views/Layout and references an image in app/webroot/default_images.
All the relative links work fine to default_images when I do this, but would like to use some of the Plugin template overides for other actions.
However if I modify the default.cpt file to include some of the images, like say a logo that is used in default_dashboard.ctp. It is unable to map to the same image location.
For example in default.ctp:
echo $this->Html->image('default_images/logo.png',array('alt' =>
'Logo','width'=>'284','height'=>'82'));
produces a path to /img/default_images/logo.png. The Plugin is configured to use the /img location, whereas I want to direct to /default_images in this case. I could make this ../default_images/logo.png, but this isn't very clean.
In addition I have js and css which is having a similar problem. Can someone please explain the mechanism for using a site-wide default.ctp so that it works with inherited plugin templates?
From hard coding the links into the template not using the Html Helper, I see that the browser's relative path is confused because of the routing. For example the first one works with the root specified, the second doesn't.
<img src="/default_images/logo.png" alt="works" width='284' height='82'>
<img src="default_images/logo.png" alt="lost" width='284' height='82'>
What's the best way to make sure that the Plugin layouts and non-plugin layouts can all find the correct path to /default_images ?
Following are the steps that you can follow to resolve relative path problem:
Create a file abc_constants.php in app\Config folder.
Include the file in app\Config\bootstrap.php
require_once(abc_constants.php);
abc_constants.php should contain:
define('HTTP_HOST', "http://" . $_SERVER['HTTP_HOST'].'/');
define('SITE_URL', HTTP_HOST.'your_app_name/');
define('IMAGE_HTTP_PATH', SITE_URL.'app/webroot/default_images/');
Use these constants in your view file accordingly.
<?php echo $this->Html->image(IMAGE_HTTP_PATH.'logo.png',array('alt' => 'Logo','width'=>'284','height'=>'82'));
It looks a bit lengthy process at first time, but once implemented, you can use these constants in Ajax calls in view files, controller's code etc.
I'm using EXTJS 4.1 and I'm naming my components as follows. If I create a store I end it with Store and I do the same for Controllers, Models, etc. So I may have UserStore.js. I then put it in a controller. Now EXTJS will create getter and setters for it but the way it does it, is they append the name "Store" to the end so I now have the following: getUserStoreStore(). Which I don't like.
But I want to append Store to my file names so I know what files I'm working in. So for example I may have a UserModel.js, UserStore.js, UserView.js, UserController.js. If I didn't I would have 4 files Called User.js and it would be a pain to always have to remember which file I'm working in.
So my question is there a config to change the way EXTJS names these getters and setters, or do I have to live with getUserStoreStore. It gets even uglier is I have sub dir under stores so for example if I have the following:
-store
-user
-UserStore.js
-UserPersmission.js
I define the store like this:
Ext.define('MyApp.store.user.UserStore'
I then get the following setter:
getUserUserStoreStore()
Yuck! Any idea or do I just live with this?
The short answer is No
You can only change it by overriding the method that creates the 'getter', cause there is no config. Other than, f.e. .Net ExtJS uses namespaces to identify the type (f.e. the controller namespace) and not a applied suffix. In addition; other suffixes are applied by the array into which the class has been placed (f.e. store, model, view).
I recommend you to just divide by namespaces.
I am trying to include a miscellaneous library class from outside my app (it gets used by different apps).
My app is located at:
/var/www/websites/my_website/app/
And the class is located at:
/var/www/websites/libs/CakePHP/MyClass.php
In my bootstrap I'm struggling to figure out how to add the path for loading the classes from that directory:
App::build(array('Lib' => array('/var/www/websites/lib/')));
App::uses('MyClass', 'CakePHP');
$myClass = new MyClass();
Loading shouldn't be done in your bootstrap, but in your AppController's beforeFilter method instead.
Also, there is a reserved place for non-Cake libraries, being the app/Vendor directory. You can place all your classes in there and then load team easily with:
App::uses('MyClass', 'Vendor');
If it really needs to be in an alternative path, you need to specify and call the full path instead. And make sure to use the same names. Right now, you're specifying Lib, yet calling CakePHP as if that was a build by itself (which it's not). This won't work. It should look like this instead:
App::build(array('Lib' => array('/var/www/websites/lib')));
App::uses('MyClass', 'Lib/CakePHP'); // Define the subdirectory here
Also check the documentation on loading vendor files, it has quite some examples.
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
}