I have RowEdit in my view. I would like to able to call the controller so i can save the model.
My View
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
afteredit: function () {
// i want to call the controller from here
}
}
});
Ext.define('Pandora.view.MaterialsList', {
extend: 'Ext.grid.Panel',
alias: 'widget.materialslist',
store: 'Materials',
title: 'Materials',
plugins: [rowEditing]
}
I appreciate i may be going about this the wrong way and should be trying to catch this event in my controller but I have been unable to catch the event in my controller.
According to the docs, the event you want is edit not afteredit. Try listening to that in your controller.
In case you still want to be able to do what you've asked:
In one of your controllers, in the init code, you will need to assign the application to a global variable. APP = this.application
Then, anywhere in your application, you can say APP.getController('myController').myMethod()
Related
Current scenario is I have data manipulation function inside a class and I call this function when I get data from REST service inside my controller loadData function. Then I update the store of my viewModel.
Now I was wondering Is their a way by which I can concentrate the data manipulation function and store update to view model and from controller I call viewmodel function pass the data from rest service.
Yes you can define function inside of viewmodel and call from controller.
In this FIDDLE, I have created a demo using view-model and controller. I hope this will help you or guide you to achieve your requirement.
Code Snippet
Ext.application({
name: 'MYDEMO',
launch: function () {
Ext.define('FormController', {
extend: 'Ext.app.ViewController',
alias: 'controller.formcntr',
//this will fire on get data button tap
onGetDataButtonTap: function (btn, e, eOpts) {
this.getViewModel().doGetData();
},
//this will fire on set data button tap
onSetDataButtonTap: function (btn, e, eOpts) {
this.getViewModel().doSetData();
}
})
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myViewModel',
//For setting data inside of viewmodel or somthing diffrent opetraion
doSetData: function (data) {
Ext.Msg.alert('Success', 'doSetData method of ViewModel, called from Controller/view');
//set data from here
//or you can put your logic here whatever you want
//Depend on your requirement
},
//For getting data inside of viewmodel or somthing diffrent opetraion
doGetData: function () {
Ext.Msg.alert('Success', 'doGetData method of ViewModel, called from Controller/view');
//return data from here
//or you can put your logic here whatever you want
//Depend on your requirement
}
});
Ext.create({
xtype: 'panel',
title: 'Users Profile',
fullscreen: true,
layout: 'vbox',
controller: 'formcntr',
viewModel: {
type: 'myViewModel'
},
tbar: [{
text: 'GET Data',
handler: 'onGetDataButtonTap'
}, {
text: 'SET Data',
handler: 'onSetDataButtonTap'
}],
renderTo: Ext.getBody()
});
}
});
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 have a panel with around 10 items. For all those items I have implemented "after render" event handler in respective controllers of each item.
This is how I have registered afterrender events in Controller's init method:
init: function() {
this.control({
'#myFirstPanel': {
afterrender: this.afterrender
}
});
}
My panel code is like:
Ext.define('App.view.popUpWindow', {
extend: 'Ext.panel.Panel',
initComponent: function(){
this.callParent();
},
id: 'popup',
layout: 'fit',
items: [
{
xtype: 'panel'
items: [
{
// One of my custom component
xtype:'FirstGrid'
}....//10 items in total
]
}]
});
When I get hasListeners property of my panel's object after my app loads by following code
Ext.getCmp('popup').hasListeners
It returns me this object
{afterrender: 10, tabchange: 1}
Now when I destroy my panel by this command
Ext.getCmp('popup').destroy()
and open my app again(my app is a sub Extjs app of a another Extjs app)
Ext.getCmp('popup').hasListeners
It returns me this object
{afterrender: 20, tabchange: 2}
My question is that why even after call to destroy(), hasListeners is some how keeping record of old Listeners? I know this object doesn't show the number of listener (I read api) but what is going here then?
Can someone explain this to me? As I have to manually remove old listeners(my other question about this), why not .destroy() is automatically destroying all references?
Thank you.
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 try to develop an app with MVC architecture. I've the following Controller code:
Ext.define('PM.controller.Projects', {
extend: 'Ext.app.Controller',
models: ['Project'],
stores: ['Projects'],
views: [
'projects.Tree',
'Toolbar',
],
init: function(config) {
var tree = this.getProjectsTreeView();
var rootNode = tree.getRootNode();
console.log(rootNode);
this.callParent(config);
}
});
And this view code:
Ext.define('PM.view.projects.Tree', {
extend: 'Ext.tree.Panel',
xtype: 'projectsTree',
title: 'Projects',
hideHeaders: true,
root: {
text: "Projekte"
}
});
It try to get the root node from my tree view in the controller but I get the error that getRootNode() is not a valid function in my controller. Can anybody tell me why I get this error? My target is to add new children to this root node from an ajax request.
Thanks
The methods Ext generates for each string in the views array return constructors that can be used to create the respective views. That seems bizarre, but that's how it is.
If you want to access the actual view component, you'll need to create a ref for it. Your init method should not assume that the view exists yet. It's very likely that it won't since the controller's init method is called before the application's launch method which is probably where all the views are getting added to the page.
You want to put your logic in the controller's onLaunch template method which is called after the application has been launched and your view has been added.
Ext.define('PM.controller.Projects', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'projectsTreeView',
selector: 'projectsTree'
}],
init: function() {
// It's safe to add selectors for views that don't exist yet.
this.control(/*...*/)
},
onLaunch: function(config) {
var tree = this.getProjectsTreeView();
var rootNode = tree.getRootNode();
console.log(rootNode);
}
});
If this doesn't work, that means you aren't actually adding your view anywhere. One place you could add it is in the application's launch method. Something has to add the treeview.
Ext.application({
// ...
views: ['projects.Tree']
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [new this.getProjectsTreeView()]
});
}
});
So the chronology of events is this:
Application#constructor
Controller#constructor
Controller#init (can't assume the view exists)
Application#onBeforeLaunch
Application#launch (view is now added)
Controller#onLaunch (do something with the view that is now available)
Also, your view alias may need to be 'widget.projectsTree' not just 'projectsTree'.