Is it possible that two or more views in extjs share the same viewModel?
For example, if I have two views as presented in the code below, both views do not have the same view model, but instances of that viewModel. Maybe that was intention, but how to achieve to have global field that would be accessible across several views with the same declaration for viewModel.
So, I would like to bind the field name, so the change in one view automatically causes changes in all corresponding views.
Ext.define('MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name : '',
}
});
Ext.define('View1', {
extend: 'Ext.Container',
xtype: 'view1',
viewModel: {
type: 'main'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Name:',
bind: {
value: '{name}',
}
}
]
});
Ext.define('View2', {
extend: 'Ext.Container',
xtype: 'view2',
viewModel: {
type: 'main'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Name:',
bind: {
value: '{name}',
}
}
]
});
I don't think it is possible to do this they way you are asking. When you bind to a data element the system will first check the current components view model if it is does not find the value it will go up the parent and look and will continue this until it finds a match or there are no more parents. So if you want to share data in a view model you should store the data in a parent viewModel.
Here is a fiddle
The fields have two way binding so as you type in one it will update the view model and then the other field will be updated. On the fiddle edit each field and the other field will change. You can set either the property in the viewModel or either one of the two fields.
This fiddle shows setting the value of the field and the data in the parent viewModel via a button.
Related
Having form panel with combo box in it
Ext.define('MyApp.admin.view.UserAddView', {
extend: 'Ext.form.Panel',
requires: [
'MyApp.admin.controller.UserAddViewController'
],
controller: 'userAdd',
autoScroll: true,
frame:true,
items: [{
xtype:'combobox',
fieldLabel: 'Roles',
collapseOnSelect: true,
editable: false,
multiSelect: true,
queryMode: 'remote',
queryParam: undefined,
displayField: 'authority',
bind: {
store: '{role}'
},
name: 'authorities'
}]
});
Then I want to set values dynamically to this combobox from the view controller
var ob = {'authorities': 'ROLE_ADMIN_USERS'};
var panelToAddName = Ext.create('MyApp.admin.view.UserAddView', {});
panelToAddName.getForm().setValues(ob);
Every time I receive an error
Uncaught TypeError: undefined is not a function
in the following line
panelToAddName.getForm().setValues(ob);
There is no such a problem if the store is specified locally inside combobox
store: ['ROLE_ADMIN_USERS']
I guessed there is a problem related to remote list is not loaded when setValue is called, but setting queryMode: 'local', and loading store with list from view controller doesn't fix the issue.
Is there a way to set value to the combobox with remotly loaded list from view controller?
I think the problem is with bind config of your combobox. In Ext5 doc, there is not config with name bind for combobox.
If your store name is role, try writing store:'role' instead of bind.
Hope this will work.
I've finally figured the issue out by setting
queryMode: 'local'
then loading store from the view controller
var storeRole = me.getViewModel().getStore('role');
storeRole.load();
then bindStore of the combo box
var combobox = panelToAddName.items.getAt(0).items.getAt(0).items.getAt(0).items.getAt(2);
combobox.bindStore(storeRole);
If somebody knows how to get combo box in more simplistic way you are welcome to comment. The following does not have a bindStore() method
Ext.ComponentQuery.query('combobox')[0]
What I want to achieve is very simple, I want to have a main menu all across my application, with the same functionality for all the views.
I would like to create a view that contains exclusively the menu portion plus its own viewcontroller. What would be the [best] way to achieve this?
I am using ExtJS 5 implementing the MVVM paradigm.
Thanks!
This is a pretty broad question about how to architect the app that is pretty difficult to answer without knowing more about other parts of the app.
Generally, anything application global (that is not the application container/viewport) is probably easiest to implement with MVC. Menu controller (MVC controller) would listen to menu events and then it would drill down the component hierarchy to call components' API methods to execute the actions.
I could be more specific if I knew the app.
I would create a main view, in which you define the fixed parts of the application, as well as a container with layout 'fit' to hold the changing "views". Instead of layout 'fit', this could also be a tab panel or something. Nothing prevents you from add behaviour to the fixed part of this main view using a view controller for it of course.
Pretty straightforward in fact. Then, you'll change the current app view by putting it into the main view's central container. You'll need some kind of decision logic and configuration data to define the available views in your application. This would probably best to wrap that in a single place dedicated to this very task only, that is an app controller (rather than the view controller).
Here's an example fiddle, and bellow is the reasoning explaining the different parts of the code:
So, you'd start with a view like that:
Ext.define('My.view.Main', {
extend: 'Ext.container.Container',
xtype: 'main', // you can do that in ext5 (like in touch)
// shortcut for that:
//alias: 'widget.main',
controller: 'main',
layout: 'border',
items: [{
xtype: 'panel',
region: 'west',
layout: {type: 'vbox', align: 'stretch', padding: 5},
defaults: {
margin: 5
},
items: [{
xtype: 'button',
text: "Say Hello",
handler: 'sayHello'
}]
},{
// target for app's current view (that may change)
xtype: 'container',
region: 'center',
layout: 'fit'
}]
});
Ext.define('My.view.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
sayHello: function() {
Ext.Msg.alert("Controller says:", "Hello :-)");
}
});
Then, you set this main view as the "viewport" of your application. I also add a method to change the center view. I think the Application instance is a good place for that, but you could move this method to another dedicated app controller...
Ext.application({
name : 'My', // app namespace
// in real life, Main view class would lie in another file,
// so you need to require it
views: ['Main'],
// from ext 5.1, this is the config to auto create main view
mainView: 'My.view.Main',
// we also register a ref for easy retrieval of the main view
// (the value 'main' is the xtype of the main view -- this is
// a component query)
refs: {
main: 'main'
},
setCenterRegion: function(cmp) {
// getter generated by refs config
// you could another layout in the main view, and another component query of course
var center = this.getMain().down('[region=center]');
// replace the current center component with the one provided
center.removeAll();
center.add(cmp);
}
});
So, now, you can change the view with code like this:
My.getApplication().setCenterRegion(myView);
You could wire it through the ViewController of the main view, and using it as handlers in your view. For example, in your ViewController:
changeView: function() {
// retrieve the next view, this is application specific obviously
var myView = ...
// My.getApplication() gives you the instance created by
// Ext.getApplication in namespace 'My'
My.getApplication().setCenterRegion(myView);
}
And, in your main view, use an item like this:
{
xtype: 'button',
text: "Change view (by view controller)",
handler: 'changeView'
}
That could be fine for simple applications, nevertheless that seems like mixing of concern. Deciding about application level view swapping seems more like an application controller's business. So, I would rather recommend to put the changeView method in an app controller, and exposes it to components with a component query, like this:
Ext.define('My.controller.Main', {
extend: 'Ext.app.Controller',
config: {
control: {
// components will have to match this component query
// to be animated with the change view behaviour
'#changeView': {
click: 'changeView'
}
}
},
changeView: function() {
My.getApplication().setCenterRegion(/*
...
*/);
}
});
And you would hook the behaviour to components in any view like this:
{
xtype: 'button',
text: "Change view (by app controller)",
// will be matched by the controller component query
itemId: 'changeView'
}
In my app I have the viewport with one item, a main view, which it is a simple class extending from Ext.container.Container.
I have a main controller too, and I'm trying to get the view instance, so dynamically I can push the corresponding items if the user is logged or not.
I've tried using views: ['MainView'], refs[ { selector: 'thextype' }], etc with no luck.
I was using the reference (ref) in sencha touch to do this kind of things, can you help me with Extjs v4.2 ?
Just for clarification, I'm not trying to get the DOM element, I'm trying to get the view instance with the associated methods.
Thanks in advance,
Define xtype of your view:
xtype: 'mainview'
and then in your controller:
requires: ['...'] // your view class
// ...
refs: [{
ref: 'mainView',
selector: 'mainview' // your xtype
}]
and then you can get the instance of your view in the controller with this.getMainView()
I've tried that without good results.
What I'm trying to do is something like. Based on your response should work
Ext.define('MyApp.view.MainView', {
extend: 'Ext.container.Container',
alias: 'widget.mainContainer',
cls: ['mainContainer'],
items: [
{
xtype: 'panel',
items: [
{
html: "my view"
}
]
}
]});
Ext.define('MyApp.controller.MainController', {
extend: 'MyApp.controller.BaseController',
refs: [
{
ref: 'mainContainer',
selector: 'mainContainer'
}
],
init: function() {
this.getApplication().on({
openDashboard: this.onOpenDashboard
});
},
onOpenDashboard: function() {
var mainContainerView = this.getMainContainer();
mainContainerView.showSomething(); //mainContainerView should be an instance of the view.
}});
Where, openDashboard event is fired if after a login success.
After some time debugging, it seems the problem was the context where it was being called the function.
I've added in the init method a line like:
var openCrmDashboardFn = Ext.Function.bind(this.onOpenCrmDashboard, this);
and it worked.
Thank you!
I've specified showCondition custom property for some items inside view config. How can I query all such components?
I've tried Ext.ComponentQuery.query(). The problem is, that query() returns to me correct number of elements, but there are not 'real' components, that is, when I try to do elements[0].hide(), is makes no effect.
I noticed, that when I get the same element using ref in controller class, hide() works perfectly.
After that I've console.log-ed results of both ways of getting the element and noticed strange things. First, returned element have different html id attributes (textfield-1115 and textfield-1089). Second, the element which is returned by query() method already has hidden=true property (that's why hide() has no effect). Both elements are textfield components.
Below are related code parts. The important is in onAfterRenderForm().
In view:
Ext.define('MyApp.view.Test', {
extend: 'Ext.container.Container',
alias: 'widget.test',
layout: 'fit',
initComponent: function() {
Ext.apply(this, {
items: [
{
title: 'form',
itemId: 'myForm',
xtype: 'form',
items: [
{
xtype: 'textfield',
fieldLabel: 'code',
showCondition: 'is-root',
allowBlank: false,
vtype: 'alphanum'
}
]
}
]
});
this.callParent(arguments);
}
});
In controller:
Ext.define('MyApp.controller.Test', {
extend: 'Ext.app.Controller',
requires: [
'MyApp.view.Test'
],
refs: [
{
ref: 'codeField', selector: '[showCondition]'
}
],
init: function() {
this.control(
{
'#myForm': {
afterrender: this.onAfterRenderForm
}
);
},
onAfterRenderForm: function(oForm) {
var elements = oForm.query('[showCondition]');
console.log(elements[0]);
console.log(this.getCodeField());
if(elements[0].id == this.getCodeField().id)
alert('Elements are not the same!!!');
}
});
This:
refs: [{
ref: 'codeField', selector: '[showCondition']
}]
is subtly different from oForm.query('[showCondition]')[0].
For the ref you a grabbing the first component found with a defined showCondition value. In oForm.query, you are grabbing the first component found that is a child of oForm which has a defined showCondition value.
That means that if you have other fields in any view within your app that have showCondition defined on them, the call to the generated getter for the ref could return any one of those fields. It depends on what order Ext decides to put them in.
It sounds to me like a couple things are happening
You have other fields in your app that have showCondition defined but are not on the form your controller is looking at.
Your view is being rendered in the hidden state. Is is being added as an item in a card layout or something like that?
In my MVC application I have a controller defined like this:
Ext.define('NE.controller.MyController', {
extend: 'Ext.app.Controller',
stores : [...'StoreAgents'..],
views: [ ...'MyView'...], // * alias w_view
init: function() {
this.control({
'w_view': {
render: function() { this.getStore('StoreAgents').load(); }
}
});
}
});
And in the view MyView I have a combobox defined like this:
{
xtype: 'combobox',
name : 'id_agent',
forceSelection: true,
fieldLabel: 'Agent',
store: 'StoreAgents',
queryMode: 'local',
displayField: 'name',
valueField: 'id'
}
I would expect combobox list to be updated every time the view is rendered, am I wrong?
Currently the combobox remains with no options, even if I see (through firebug) that the application fires the request which correctly returns all agents data.
Furthermore, I noticed that whenever I browse through another view, managed by another controller, which in turn declares another StoreAgent and calls its load() method.. well, if I come back, now I see the combobox populated.
What I am missing?
Thank you
Edit:
I noticed that the store is {buffered: true}. If I switch it to false, then the store fires the 'datachange' event; otherwise it does not. So the question now is: why if buffering is enabled the load() does not fire 'datachange'?
This may be due to a filtered out situation. If the combobox is being filled with a value before the store loads, a filter will be put on the store that filters out all the values before they exist, and then when new records are added they are not displayed either. Try this.
init: function() {
this.control({
'w_view': {
render: function() { this.getStore('StoreAgents').load();
this.getStore('StoreAgents').clearFilter();}
}
});
}