We Keep Coding

how to get view references in SAPUI5?

Let's say I have my routes defined in my manifest.json like this
rootView: "sap.ui.core.sample.TargetsStandalone.targetsApp.view.App",
routing: {
config: {
targetsClass: "sap.m.routing.Targets",
viewPath: "sap.ui.core.sample.TargetsStandalone.targetsApp.view",
controlId: "rootControl",
controlAggregation: "pages",
viewType: "XML"
},
targets: {
page1: {
viewName: "View1",
viewLevel: 0
},
page2: {
viewName: "View2",
viewLevel: 1
}
}
}
Is there a way to retrieve the view references from the component(getOwnerComponent). What I want to do is, on the first controller I want to get a reference of label on "View2". It seems like there is no reference to the second view until I navigate to it. Is there a way to get the a reference to another view and its elements before I navigate to it?

When you navigate to a view, the runtime instantiate it. Before that, there is no view. You can even see in the network trace how the XML file of certain view is downloaded once you navigate to it for the first time, but not before.

Two-way binding not updating view model

I'm trying to use two-way binding in an Ext JS 6.0.2 component. However, it's not working how I would expect it to, or at all, as far as I can tell. I've created a minimal example:
Ext.define('MyComponentController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mycomponent'
});
Ext.define('MyComponentModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.mycomponent'
});
Ext.define('MyComponent', {
extend: 'Ext.Component',
xtype: 'mycomponent',
viewModel: {
type: 'mycomponent'
},
controller: 'mycomponent',
config: {
thing: 'a defualt value'
},
bind: {
thing: '{thing}'
},
twoWayBindable: 'thing'
});
var myComponent = Ext.create('MyComponent', {
thing: 'a new value'
});
// Use setTimeout to give bindings time to update.
setTimeout(function() {
console.log(myComponent.getViewModel().get('thing'));
}, 1000);
I also have a Sencha fiddle here: https://fiddle.sencha.com/#fiddle/1efk
What I would expect from running this code is to see a new value logged to the console. Instead, I get null. The value that is being set on my view is not being published to my view model, even though I have bind and twoWayBindable set. Have I misunderstood how to use two-way binding?

Take a look at this example: Fiddle
It's a fork of your example. I've added a few things:
Ext.application with a launch method and placed the creation of myComponent here.
rendered myComponent to Ext.getBody().
an update method for the thing config, which logs its value when changed.
a ViewModel binding, which logs its value when changed.
Ext does not set up bindings until the viewmodel is initialized. This does not happen until the view itself is initialized. That's why why it's necessary to render it. As Mitchell Simoens correctly pointed out, instantiating a view will initialize it and its viewmodel, even when it isn't rendered. In my example, however, the viewmodel bind callback is only executed when i'm actually rendering the view.
Also, keep in mind that bindings are scheduled and do not fire instantly.
In case you haven't seen it, here's Ext JS's two-way binding example.
I hope this clarifies things!

replace your console.log line with this:
console.log(myComponent.getThing());

Uncaught TypeError: binding.destroy is not a function in ExtJs 5

I am using Ext.util.StoreHolder mixin in my extjs 5.1 view.I found problem with Ext.destroy() method which throws error while destroying view having bindable mixin Ext.util.StoreHolder. I can not destroy that view, it giving me error
Uncaught TypeError: binding.destroy is not a function
at Ext.define.privates.removeBindings
My view is using mixin:
mixins: {
bindable: 'Ext.util.StoreHolder'
},
Is there any problem with Ext.util.StoreHolder mixin? Why can't I destroy that view?
Edit -> , please find my code
Ext.define('MyApp.view.ux.CustomPagingBar', {
extend: 'Ext.toolbar.Toolbar',
alias : 'widget.custompagingbar',
mixins: {
bindable: 'Ext.util.StoreHolder'
}
});
Find Fiddle here Grid with Paging bar destroy issue

Make sure that you are unbinding the store when destroy is called on the view.
I think this should work.
Ext.define('MyApp.view.ux.CustomPagingBar' ,{
extend: 'Ext.toolbar.Toolbar',
alias : 'widget.custompagingbar',
mixins: {
bindable: 'Ext.util.StoreHolder'
},
// other code
onDestroy: function(){
var me = this;
me.bindStore(null);
// some other custom code if you want
me.callParent();
}
});
// me.bindStore(null); this will unbind the store from the view before it is destroyed

In Ext JS 5, Ext.mixin.Bindable has a new config--"bind"-- which allows bind descriptors to be defined on components.
In my component's "bind" method is overwriting this, and so the binding cleanup process is trying to destroy a binding, but doesn't have the proper configuration for it.
Commenting "bind" method prevent the destroy issue.

ExtJS 4 create View from Controller

I have a Controller and I want to create a View in it:
var list = Ext.widget('installBaseList', params);
and this is the view:
Ext.define("FI.view.InstallBaseList", {
extend: 'Ext.grid.Panel',
require: 'FI.store.InstallBaseStore',
title: 'List',
alias: 'widget.installBaseList',
//other config
});
I get name is undefined. How do I fix it?

Most likely your view is not loaded. Check dependencies and requires. If you're using non-minified version of your app - do you see file with view class loaded or not?

Your code sort of works... Check this example http://jsfiddle.net/nscrob/EcX3Q/
The problem could be that you are trying to create the view in the init of the controler and the view is not yet defined. you could post the whole controler so we get a clearer view of your code

Sencha Touch 2 Global Variables - Access everywhere

I know this question was already posted in StackOverflow but I either didnt understand or sencha changed somewhat.
My app loads a form panel for login, then I would like to save the user info that have just loged on. This way I can change my view anytime I want and still know the name of the loged in user.
Here is my main code:
//<debug>
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>
Ext.application({
name: 'APP',
loadedUser: 'the test',
requires: ['Ext.MessageBox'],
views: ['Main', 'Home', 'Login'],
models: ['User'],
stores: ['Users'],
controllers: ['Main'],
icon: {
57: 'resources/icons/Icon.png',
72: 'resources/icons/Icon~ipad.png',
114: 'resources/icons/Icon#2x.png',
144: 'resources/icons/Icon~ipad#2x.png'
},
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
setLoadedUser: function(arg) {
this.loadedUser = arg;
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('APP.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm("Application Update", "This application has just successfully been updated to the latest version. Reload now?", function() {
window.location.reload();
});
}
});
The 'loadedUser' its what I wanted to be my global variable, and the method setLoadedUser(arg) its suposed to change that value.
I can access 'loadedUser' no problem, but I can't change its value.
Another question: loadedUser can it be an array/data structure?

How are you accessing the function? This works for me. Remember you should access it like this:
APP.app.setLoadedUser('test');
And yes, it can be any value. :)

You can also use localStorage to, set/get Your variables:
Set it as:
localStorage.setItem('currentUserId', userID)
Get it as:
localStorage.getItem('currentUserId')
You can use it, anywhere in Your script.

Yes, the works when the function is inside of the app.js file.
It does not work if the function is inside of the controller file.
So if you have a project application called IronMan, the call from the view code to the global function, flyAway(), in your app.js file would look like:
IronMan.app.flyAway();