I'm trying to access a function from a component initialize. New to Sencha Touch/Ext.js, so not sure how scope works. I have 'spin' listeners in the 'control' which seem to work well, when incremented.
Simplified Code:
Ext.define('App.view.CreateChallenge', {
extend: 'Ext.Container',
fullscreen: true,
xtype: 'CreateChallenge',
config:{
items[
xtype: 'spinnerfield',
itemId: 'mySpin',
initialize:function(){
App.view.Challenge.doThis();
}
],
control:{
'#mySpin' : {
spin: 'doThis'
}
}
},
doThis:function(){
console.log('dooing this');
}
});
Thanks,
Steve
First of all, you should not override initialize method in the config block, the proper place for that is in Ext.define.
Then, in initialize, you can call App.view.CreateChallenge.doThis(). But it just an ordinary function, its scope is the global window object, so you don't have access to the object of App.view.CreateChallenge.
To find a container reference from its children, you can use Ext.Component.up(). In your case, it will look like:
initialize: function() {
…
this.up('CreateChallenge').doThis(); // find container by xtype then call its method
}
We are not there yet! If you try, you are going to get an undefined from this.up(…). This is because the container isn't finished constructing while its children are initializing. So, if you need a reference of the container in the initialize method, you need to wait until the container is ready, such as the painted event.
Then, you will end up something looks like:
initialize: function() {
…
this.on('painted', function () {
this.up('CreateChallenge').doThis(); // find container by xtype then call its method
}, this);
}
I would simply use
VIEW/This .getParent()
Related
In controller
listen: {
global: {
'ontest': 'ontestfunction'
}
},
ontestfunction: function(){
alert('oks 31');
}
In view
listeners: {
element: 'element',
click: function(){
Ext.GlobalEvents.fireEvent('ontest');
}
}
It is the only way I've found to work, you know some other way?
You can get any controller using Ext.app.Controller.getController.
Since application is derived from controller, all you have to know is the name of your app and the desired controller; and calling the function is a piece of cake:
var configController = MyAppName.app.getController("MyAppName.controller.Configuration");
configController.ontestfunction();
Since you're using EXT 6, I assume you're using viewcontrollers and not controllers.
Ext is going to resolve the scope as the view's controller automatically, no need to write any extra code.
First make sure you define the viewcontroller as the controller of the view:
controller: 'aliasofviewcontroller'
after that you can basically assign any of the controllers functions to the handlers of the components on the view.
Let's say you have the following function in your controller:
onClickCustomHandler:function(e){
...
}
Using the following syntax, the function is going to get called every time you're button is clicked:
Ext.create('Ext.Button', {
text: 'My button',
handler: 'onClickCustomHandler'
});
Or using xtype:
{
xtype:'button',
text:'My button',
handler: 'onClickCustomHandler'
}
For further reading: http://docs.sencha.com/extjs/6.0.2/guides/application_architecture/view_controllers.html
I'm trying to navigate the Sencha class system, and seem to be failing in this aspect.
I have a Carousel that I'm adding Components too. I have a Store with records, and I'm looping through the records and adding a custom Component to the Carousel in each iteration. Here's the code for that...
var carousel = Ext.create("Ext.Carousel", {
fullscreen: true
});
sights.each(function(sight, index, length){
carousel.add(Ext.create("Parks.view.ImageView", {
imageName: sight.get("img"),
titleName: sight.get("name")
}));
});
My custom Component has the following code, but is failing to execute because of the getImageName() function. It's complaining it's not defined. But, based on my understanding of the Sencha class structure, it should have been defined by the constructor on initialization?
Ext.define("Parks.view.ImageView", {
extend: "Ext.Panel",
fullscreen: true,
config: {
imageName: "",
titleName: ""
},
constructor: function(config){
this.initConfig(config);
},
items: [
{
xtype: "img",
layout: "fit",
src: getImageName()
}
]
});
There's a mistake hiding another mistake in your code.
First, it should be this.getImageName(). But even then it will not work because you need this to point to an instance of your class to call this method (maybe you should read about scope in Javascript a bit... That's quite a spicy subject!).
Here, you must realize that your function will be called before the constructor, and even before Ext.define for that matter (because the return value of your method is needed for the src property of the object that is in the items property of the object that you pass as argument to Ext.define).
When you need to do some processing (i.e. execute a function) to create the configuration of a component, override its initialize method, like this:
Ext.define("Parks.view.ImageView", {
extend: "Ext.Panel",
fullscreen: true,
config: {
imageName: "",
titleName: "",
layout: "fit"
},
// This is not needed, and it will break everything. You're extending from
// a class that already calls initConfig for you. And you don't call the parent
// method, so you're completely removing the component initialization cycle.
//
// constructor: function(config){
// this.initConfig(config);
// },
initialize: function() {
// you should test that you have a value in imageName before using it
this.add({
xtype: "img",
layout: "fit",
src: this.getImageName()
});
// this one is probably not needed because the parent method is empty (it is
// is what Ext calls a template method), *but* it is more safe to call it
// anyway -- in case some override put some code in this method upper in
// the class hierarchy
this.callParent(arguments);
}
});
Edited: my answer applied to ExtJS, it didn't work with Touch...
I'm trying to extend Ext.grid.Panel to build one who would come with "prebuild" listeners (that will check for a store, and tell the store to add the nulber of records in the title of the gridpanel). I'm stuck at the very beginning of this process, I can't find the right way to do this despite browsing the doc for a while:
//Extending a grid with a simple hello world...
Ext.define('MIS.Ext.GridExtraHeaderData', {
extend: 'Ext.grid.Panel',
alias: 'widget.gridExtraHeaderData',
listeners:{
beforerender:function(){
console.log('hello world');
}
}
});
I replaced Ext.grid.Panel with MIS.Ext.GridExtraHeaderData and the grid is working very well, but I can't see any "hello world" in my console...
When I look to the created object, I have "listeners:null" and "proto.listeners" filled.
I tried constructor, initComponent, no success.
Don't attempt to bind them in the listeners block, since they are going to clash with any user defined listeners. Instead, bind them in code:
Ext.define('MIS.Ext.GridExtraHeaderData', {
extend: 'Ext.grid.Panel',
alias: 'widget.gridExtraHeaderData',
initComponent: function() {
this.on('beforerender', function() {
}, this);
this.callParent();
}
});
I have a controller, and I want to pass a simple string value to the next View.
For that, I am creating the View like this.
var nextView = Ext.create('MyApp.view.NextView', {
content: 'value'
});
Ext.Viewport.add(nextView);
Ext.Viewport.animateActiveItem(nextView, {
type: 'slide',
direction: 'left'
});
On the NextView, I have a label and I want to set the HTML property of the label to the value that I am passing from the controller. ie. value.
My NextView looks like this.
Ext.define('MyApp.view.NextView', {
extend: 'Ext.form.Panel',
config: {
content: 'null',
items: [{
xtype: 'label',
html: 'value'
}]
}
});
I am not sure how to proceed from here. I can't have the NextView as a form. I just need to pass one string value in this situation.
What's the best way to achieve this?
Use initialize method to access config data like this:
Ext.define('MyApp.view.NextView', {
extend: 'Ext.form.Panel',
config: {
content: 'null',
items: [
{
xtype: 'label',
html: 'value'
}
]
},
initialize : function(){
this.callParent();
var val = this.config.content;
this.down('label').setHtml(val);
}
});
PS Feel free to use your favourite selector in down function
I know the question has been answered. But I just digged up a pretty natural way to pass data from controller to a view (using view's constructor). I use this in my integration of web desktop to my app.
In controller, pass data to the constructor of the view as followed:
loiTab = Ext.create('Iip.view.giips.admission.DetailedLoiTab', {closable: true, selectedLoiData: selected[0].data});
In the view, spin up a constructor as followed:
constructor: function(selectedLoiData) {
Ext.applyIf(this, selectedLoiData);
this.callParent();
},
The following method lives in the same file as the constructor. You can access selectedLoiData from any where in the view the constructor lives as followed:
initComponent: function(){
console.log(this.selectedLoiData);
}
I am trying to write a reusable item selection panel where the user has a grid with items he can choose from and a small text field that he can use to filter the content of the grid. Right now the (simplified) view code looks like this and works.
Ext.define('MyApp.view.items.ItemSelectorPanel', {
extend: 'Ext.panel.Panel',
require: 'MyApp.view.items.SimpleItemGrid',
alias: 'widget.ItemSelectorPanel',
layout: 'form',
config: {
itemStore: false
},
constructor: function(config) {
this.initConfig(config);
this.superclass.constructor.call(this, config);
this.add([
{
fieldLabel: 'Filter',
name: 'filter'
},
{
xtype: 'SimpleItemGrid',
collapsible: true,
store: this.getItemStore()
}
]);
return this;
}
});
As you can see the ItemSelectorPanel uses the config property to expose an interface where the calling site can specify which item store to use.
Calling site (in this case the panel is added to a TabPanel):
var panelToAdd = {
xtype: 'panel',
title: 'New Selection',
closable: true,
padding: 10,
items: [{
title: 'Select node',
xtype: 'ItemSelectorPanel',
itemStore: itemStore
}]
};
Now, I love the declarative style of ExtJS 4 and how it helps to follow the MVC pattern. I would prefer to have the least amount of code possible in the views. Unfortunately this does not work:
Ext.define('MyApp.view.items.ItemSelectorPanel', {
/* ... same as above ... */
constructor: function(config) {
this.initConfig(config);
this.superclass.constructor.call(this, config);
return this;
},
items: [
{
fieldLabel: 'Filter',
name: 'filter'
},
{
xtype: 'SimpleItemGrid',
collapsible: true,
store: this.getItemStore // <-- interesting part
}
]
});
Is there a way to expose the config of a nested/sub component via the config property of the parent property in a declarative manner?
First something in general
Never add an object outside a function within a class definition unless you exactly know what you are going to do. Cause if you do so all instances will share the same instance of that object. I think I do not need to mention where this leads to...
If you have a need to place a object there you should clone it within the constructor.
To your code
I dunno what this.initConfig(config); does but the config variable is not the one from your class, it is the one from the constructor argument. I recommend you also to use initComponent() for initialization instead of the constructor() unless you have a defined need for using the constructor, which in your case you don't seem to have.
Also a 'config' is not forwarded cause it don't get executed up->bottom but bottom->up where a config get's hand up and all other properties are (already) inherited.
I still do not exactly know what your goal is, therefore I cannot give you any advice how you should do this but I can say for sure that the way you do it will lead to problems.
Edit
I still not sure that I have fully understand your needs but the following should work (if you need the listeners too you might take a look at the Ext.util.Bindable mixin)
Ext.define('MyApp.view.items.ItemSelectorPanel', {
extend: 'Ext.panel.Panel',
require: 'MyApp.view.items.SimpleItemGrid',
alias: 'widget.ItemSelectorPanel',
layout: 'form',
initComponent: function() {
// Initialize the store (might be a instance or a storeId)
var store;
if (this.itemStore) {
store = Ext.data.StoreManager.lookup(store);
}
this.itemStore = store || null;
// Add is not valid (at least not before the parent inits are executed)
this.items = [{
fieldLabel: 'Filter',
name: 'filter'
}, {
xtype: 'SimpleItemGrid',
collapsible: true,
store: this.getItemStore()
}];
this.callParent(arguments);
},
getItemStore: function() {
return this.itemStore;
}
});
No, you can't do it in the way you've described. The reason is pretty simple, let's take this as an example:
Ext.define('MyClass', {
someProp: this.foo(),
foo: function(){
return bar;
}
});
Here, we call the define() method and we pass it an object as the configuration. As such, the whole object (including the call to foo()) is evaluated before it's even passed to define, so the class/method doesn't even exist at that point.
Even if you could do that, here's also the complication that foo is an instance method on the class, but the way you're attempting to call it is as though it's a static method.
So, the answer is, you'll need to use some kind of method to do so, initComponent is typically preferred over the constructor.
You can define items in declaration of your class but you cannot call any method from your class at time of declaration. To solve it, define only items without store and than use initComponent method to set store for your view.
I didn't see an answer that addressed the original question. Here is what I've found to work ...
Creating an instance of myClass, passing in a config 'foo' with value 'bar'
var myClassInstance = Ext.create('MyApp.view.myClass', {
foo: 'bar'
});
myClass is defined as follows :
Ext.define('MyApp.view.myClass', {
extend: 'Ext.container.Container',
alias: 'widget.myclass',
config: {
foo: 'defaultVal'
},
constructor: function(configs) {
this.callParent(arguments); //create class, calls initComponent
var try1 = getFoo(); //try1 is 'defaultVal'
this.initConfig(configs); //initializes configs passed in constructor
var try2 = getFoo(); //try2 is 'bar'
},
initComponent: function() {
//myClass declaration here ...
this.callParent();
}