I'm new to ExtJS 4 and need some help understanding how the Ext.define works, please.
In fact what I want to do is something similar to the portlets in the portal example, in my application I will need so many objects to add in my different tabs, so in order to organize my code and not have just one very big script, I want to define each component I need in a separate file and then call it in the main script when I need it (I will mainly use the examples so this is why I want to know how Ext.define works so I can adapt those examples and make them work the way I want).
I hope I was clear.
And thank you in advance for your help.
Ext.define ( String className, Object data, Function createdFn ) : Ext.Base
Ext.define is used to define a class. Example:
// creates My.computer.NoteBook Class
Ext.define('My.computer.NoteBook', {
extend:'Ext.panel.Panel',
config: {
hardware:'Dell',
os:'Linux',
price:500
},
constructor:function(config) {
this.initConfig(config);
return this;
}
});
// creates instance of My.computer.NoteBook Class
var myComputer = Ext.create('My.computer.NoteBook', {
hardware:'MacBook Pro',
os:'Mac OS X',
price:1800
});
so, with Ext.define you make a mold, witch you can use later in many cases. You can define width, height, id, css, so later you just call that mold/class. In your case you can define a class for every tab, and then when you make a function to open/create that tab you can say:
if(existingTab){
mainPanel.setActiveTab(existingTab);
}else{
mainPanel.add(Ext.create('My.computer.NoteBook', {id:tabId})).show();
}
...
You can put every Class in your separate .js file, later, on production you will make a class.js with all classes in one minified .js file!
You can define a class and then say:
items: Ext.create("My.computer.NoteBook",{
...
})
Ext JS 4 has a new way to extend... it's call Ext.define and it incorporates Ext.extend, Ext.reg and Ext.ns that we had to do in Ext JS 3 and before into one method call...
Ext.define('com.sencha.MyPanel', {
extend : 'Ext.panel.Panel',
alias : 'widget.mypanel',
...
...
});
Ext.define takes two params, first is the full class name (will act as Ext.ns to create the path and will create the Object) and the config. In the config you specify what class you are extending using the extend config. You set up an XType using the alias config. The alias config is a little different as it has two parts... first part is the type (widget in this case) and then the XType (mypanel).
Related
we are using subdirectories in our projects no separete views and controllers but in models we didn’t learn yet. Recently I’ve found this https://github.com/cakephp/cakephp/issues/60451 and actually routes and plugins we are already using, we just want to separete our models like this:
Model
-Entity
–Financial
—Money.php
-Table
–Financial
—MoneyTable.php
I’ve tryed put like this then controller is not able to find his model. How can I do to organize it, and make it work?
Things that we've tried:
Use $this->setAlias('TableModel');
Call in controller:
$this->TableModel = $this->loadModel('Subfolder/TableModel');
didn't work for SQL build, and other classes.
CakePHP uses the TableRegister to load models. That class can be configured to use a class that implements the LocatorInterface, and CakePHP uses the TableLocator as the default.
The only thing you can do is configure your own LocatorInterface instance in your bootstrap.php. You would have to create your MyTableLocator and have it change the className for tables to point to subdirectories. What rules for this class name rewritting are used is purely up to you.
bootstrap.php:
TableRegister::setTableLocator(new MyTableLocator());
MyTableLocator.php:
class MyTableLocator extends TableLocator {
protected function _getClassName($alias, array $options = [])
{
if($alias === 'Subfolder/TableModel') {
return TableModel::class;
}
return parent::_getClassName($alias, $options);
}
}
The above isn't working code.
I'm just demonstrating what the function is you need to override, and that you need logic in place to return a different class name.
You can check if the $alias contains the / character, and if so. Return a class name by extracting the subfolder name from the $alias. Take a look at the TableLocator to see how it's using the App::className function.
Can't find any relevant information in the sencha documention about this question :
Is it possible to call Ext.create(...) with a parameter which does not depend on the application's name?
So that if I change the app's name I don't have to rewrite that line of code?
Normally I would use Ext.create(AppName.model.MYMODEL) but that's too tied to the app's name for me.
Still need help :)
Create using class alias
When using Ext.define to define your class, you can provide an alias property. You've probably seen this on UI components which use aliases like widget.panel. Those aliases can be used with Ext.create.
Ext.define('MyApp.SomeClass', {
alias: 'app.someclass', // Independent of class name
/* ... */
});
Ext.create('app.someclass', {
/* ... */
});
You can set the alias on a class after it has been created by using Ext.ClassManager.setAlias.
Helper function using application name
If you don't have the option to set an alias, you could create a function that wraps Ext.create which supplies your base namespace automatically.
The problem here is that Ext.application doesn't return the application object. I'm not sure how Sencha Architect generates the application code but you may need additional overrides to allow you to retrieve the application object.
function appCreate(className, config) {
var appName = someMethodThatGetsTheApplicationName();
return Ext.create(appName + '.' + className, config);
};
// Example usage: Creates object of MyApp.model.MyModel
var myObj = appCreate('model.MyModel', { /* ... */ });
How to get the application name at runtime
By default, Ext JS does not retain a reference to the application object when using Ext.application, so we need an override to do it. I'm using Ext.currentApp as the property to store this object, but you can change it to whatever you'd like.
Ext.application = function (config) {
Ext.require('Ext.app.Application');
Ext.onReady(function () {
Ext.currentApp = new Ext.app.Application(config);
});
};
Now that you have this, you can access the application name by simply using Ext.currentApp.name. Or, if you'd feel more comfortable using a getter you can use the following.
Ext.app.Application.addMembers({
getName: function () {
return this.name;
}
});
// Example usage:
function someMethodThatGetsTheApplicationName() {
if (!Ext.currentApp) {
Ext.Error.raise('Current app does not exist.');
}
return Ext.currentApp.getName();
}
You can use any class name in Ext.create there is no naming convention imposed there as long as the class was already defined. If you want Ext.create to load the correct file using Ext.loader you will need to configure the loader to conform with the naming convention you need.
The way to do it :
You need a controller that will in it's INIT function (before UI Loading/Initiating) do the following
APPNAME = this.getApplication().getName();
Where APPNAME is a global variable.
Then when you Ext.create something you will be able to write the following
Ext.create(APPNAME +'model.MyModel');
That way you can change you app name without having to check everywhere in your code to change every single Ext.create to the new app's name.
It also give you the ability if you are to use this.getApplication().setName() to have infinite cache storage has you get 5/10mb per AppName.
I have 10 grids in my project where I want to define one extra header, and that header will open menu on double click, single click will return null. This functionality works fine in my 3.4 version. But somehow i am not able to extend 'Ext.grid.header.container' class. Any suggestion why?? Please refer below my code.
Ext.define('Ext.grid.HeaderColumnModel', {
extend: 'Ext.grid.header.container',
initComponent: function()
{
this.callParent();
}
}
Usage
columns : new Ext.grid.HeaderColumnModel()
OR
colModel: new Ext.grid.HeaderColumnModel()
I'm building a module using hook_preprocess_node()
I've made a new view mode for the node entity called ´vacancy_teaser´ using the hook_entity_info_alter()
this shows up in my node display settings and view
so I want to use the template included in my module when this view mode is used.
my code:
/**
* Implements hook_preprocess_node().
*/
function vacancies_preprocess_node(&$vars) {
if($vars['view_mode'] == 'vacancy_teaser') {
$vars['theme_hook_suggestions'][] = 'node_vacancy_teaser';
}
}
my template file is called: ´node-vacancy-teaser.tpl.php´ but is not used in the output of my view
$vars['view_mode'] == 'vacancy_teaser' in the view. ( tested )
but where does $vars['theme_hook_suggestions'][] = 'node_vacancy_teaser'; looks for the template file? somehow it's not included / used.
apparently in drupal 7 useing dubble underscores is required for some reason.
node_vacatures_vacancy_teaser.tpl.php placed in the active template folder seems to do the trick... although I don't think this is a neat solution since the tpl.php file is separated from the module.
Be sure to specify the template file in the hook_theme implementation. The examples project is great for finding out the details of how to do things like this. Specifically, check out the theming_example_theme() function in the theming_example module…
function theming_example_theme() {
return array(
// …
'theming_example_text_form' => array(
'render element' => 'form',
// In this one the rendering will be done by a tpl.php file instead of
// being rendered by a function, so we specify a template.
'template' => 'theming-example-text-form',
),
);
}
Instead of appending to the end of the $vars['theme_hook_suggestions'] array, try:
array_unshift($vars['theme_hook_suggestions'], 'node_vacancy_teaser');
This will pass your suggestion to the front of the array, and it will be found first. Most likely since you are appending it to the end of the array, Drupal is finding an existing theme suggestion first and using it instead (such as node.tpl.php).
With ExtJS 3.x, I was able to use the "fields" property of a Store, but it seems with ExtJS 4 I have to absolutely use a Model. It's fine, but in my case, it's not a static Model, and I need to define the fields on the fly and sometimes to change them.
I could re-create a Model, but I need to use a different name as it's apparently not possible to modify an exisiting Model, neither delete it. If I try to use Ext.regModel with the same name, ExtJS crashes.
Thanks for your help!
4.1 UPDATE:
As an update... in 4.1 there is now a static method setFields which can be used to define the model prototype fields. It works well in a controller's init method.
When I did this, I wanted to have some static fields defined in the model class and then set some more dynamically. Unfortunately the new setFields method replaces all fields with the argument, it was easy enough to handle though.
This example uses the MVC pattern where my model and store are included in the controller's model array and store array (providing me with the handy getters used below):
Ext.define('ST.controller.Main', {
extend: 'Ext.app.Controller',
models: ['User', 'Reference'],
stores: ['CurrentUser', 'PermissionRef'],
views: ['MainPanel'],
init: function() {
var me = this;
me.getPermissionRefStore().on('load', function(store, records) {
var model = me.getUserModel();
// this returns the static fields already defined
// in my User model class
fields = model.prototype.fields.getRange();
// add the permission options (dynamic fields) to the static fields
Ext.each(records, function(permission) {
fields.push({name: permission.get('name'), type: 'bool'});
});
// 4.1 method to update the User model fields
model.setFields(fields);
// now load the current user (it will use the updated model)
me.getCurrentUserStore().load();
});
}
});
The User model and CurrentUser store are created exactly like regular, non-dynamic models and stores would be and included in their respective controller arrays, the 'User' model is simply missing the dynamic fields which are added as shown above.
I also went into that problem. I have a service which is responsible for fetching metadata from the server and adapting the models and stores to this metadata.
I therefore defined an empty model and configured the store to use this model.
When the meta data is processed, I add the new/additional fields to the prototype of the model like this (metaDataStore is the store containing the meta data, model is the model which can be obtained from the model manager):
var fields = [];
metaDataStore.each(function(item) {
fields.push(Ext.create('Ext.data.Field', {
name: item.get('field')
}));
});
model.prototype.fields.removeAll();
model.prototype.fields.addAll(fields);
When I then call load on a store using this model or create new model instances the new fields are processed correctly.
Here's a very simple example. Just use a normal Ext.data.Store but instead of a model, specify the fields property:
// you can specify a simple string ('totally')
// or an object with an Ext.data.Field ('dynamic')
var fields = ['totally', {name : 'dynamic', type : 'string'}];
var newStore = new MyApp.store.Object({
fields : fields
// other options like proxy, autoLoad...
});
Don't specify a model property - it seems that it would override the fields property.
I also wanted to change the columns and content of an existing grid dynamically:
// reconfigure the grid to use the new store and other columns
var newColumns = [
{header: 'Totally', dataIndex: 'totally'},
{header: 'Dynamic', dataIndex: 'dynamic'}
];
myGrid.reconfigure(newStore, newColumns);
From the Ext JS 4 documentation about the "fields" property of Ext.data.Store:
This may be used in place of
specifying a model configuration. The
fields should be a set of
Ext.data.Field configuration objects.
The store will automatically create a
Ext.data.Model with these fields. In
general this configuration option
should be avoided, it exists for the
purposes of backwards compatibility.
For anything more complicated, such as
specifying a particular id property or
assocations, a Ext.data.Model should
be defined and specified for the model
config.
So be careful - Sencha may remove it in the future.