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
Related
I want to render a view which I create when the button on another view is clicked.
Here is my controller code, and I am following the MVC architecture
Ext.define('demo.controller.LoginController' , {
extend: 'Ext.app.Controller',
config: {
refs:{
loginAction: 'button[action=login]'
},
control:{
loginAction: {
tap:'loginProcess'
}
}
},
loginProcess:function(button,e,opts){
// Render View here
}
});
I have searched and I came across getMainView().push() and Ext.ViewPoart.add() but it's not working. According to the MVC pattern how should call this view from a controller?
EDIT
code of profilecontainer
Ext.define('demo.view.ProfileContainer',{
extend:'Ext.Panel',
xtype:'profilecontainer',
requires: [
'Ext.Label'
],
config: {
items:[{
xtype:'label',
html:'hi'
}]
}
});
Both of the ways you have tried should work, if you set them up correctly.
First, getMainView().push(newView) will work if mainView is an Ext.navigation.View. See the docs for this method here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.navigation.View-method-push
You can also use Ext.Viewport.setActiveItem(newView), assuming you have no typos (your post says ViewPoart). (Ext.Viewport.add will add the panel to the Viewport, but not set it as the active Card in the layout)
If neither of these are working, then you probably are not configuring your controller correctly. If that is the case, ensure that your loginProcess method is being called. If it is not, then your selector, button[action=login], is not correct.
Let's say we have
Ext.application({
name: 'APP',
//this is my global helper method.
determineSomething: function() {
return true;
}
});
and a view that should access the method determineSomething():
Ext.define('APP.view.Main', {
extend: 'Ext.Panel',
config: {
myConfigValue : APP.app.determineSomething()
}});
This will work fine as long as you use the Sencha class loading system (because the js-file with this Main-View is loaded by Sencha after APP is available.).
But now let's say we want to minify our script. This means that the browser parses the Main.js file before the Sencha application is loaded. But at this time APP is not yet ready and we can not access it.
One solution would be to simply make a non ext config class / array / whatever with the method but is this a nice solution? What would be a clean solution for this problem?
I would keep my helper functions into a singleton Helper class which gets instantiated whenever app is loaded. For example this is how my helper class look like:
Ext.define('MyntraTabApp.util.Helper', {
singleton : true,
alternateClassName : 'Helper',
determineSomething : function(){
// do something
}
});
I can use it like this wherever I want
Helper.determineSomething();
I'm trying to wrap my head around Ember at the moment, but all the magic is making this difficult.
I've set LOG_TRANSITIONS: true and Ember.LOG_BINDINGS = true; which gives me some minimal logging to the console, but I really need more than that.
I'm particularly struggling with seeing what's going on when Ember is automagically creating Controllers, Views and Templates.
Is there a way to log this aspect of the framework - to see where Ember is looking for Templates/Views/Controllers and when it is creating one on its own volition.
For example, I have the following routes set up:
App.Router.map(function() {
this.route("example_items", {path: "/"});
});
with:
App.ExampleItemsRoute = Ember.Route.extend({
model: function() {
return App.ExampleItem.find();
}
});
Ember renders my ApplicationController and its application.handlebars template:
<header class="page-header">
<h1>Application Template</h1>
</header>
{{outlet}}
But fails to render my example_items.handlebars template. I get no exception or warning, and if I check the DOM, I can see ember has created a generic view in its place.
The bindings logging shows me that Ember has transitioned to example_items, but it seems it hasn't used either my ExampleItemsController, ExampleItemsView or template.
How can I debug a situation like this if I receive no errors or messages?
Edit:
App.ExampleItems View:
App.ExampleItemsView = Ember.CollectionView.extend({
templateName: 'example_items'
});
And App.ExampleItemsController:
App.ExampleItemsController = Ember.ArrayController.extend({
});
I'm particularly struggling with seeing what's going on when Ember is automagically creating Controllers, Views and Templates.
Is there a way to log this aspect of the framework - to see where Ember is looking for Templates/Views/Controllers and when it is creating one on its own volition.
Yes. With the latest ember you can now LOG_ACTIVE_GENERATION to see console.log output whenever ember generates something for you.
Another new setting that might be helpful is LOG_VIEW_LOOKUPS
Here's your problem: CollectionView won't use your template. It takes an array as its content property (usually set up as a binding to the controller) and creates childViews manually. Without a content set it'll appear as a blank view.
If you add classNames: ['my-view'] to your view definition, you should see that the view it's instantiating and inserting is actually your view class, just empty. Add contentBinding: 'controller' and it should render itemViews for each item in the array, as well.
It'd be super useful if I could access instances of my views and controllers in my ext.js application from Chrome's console. Does anyone have a clue how to do this?
coffeescript:
window.cms = Ext.create 'Ext.app.Application',
name: 'CMS'
controllers: [
'MyController'
...
It would seem that cms.getController('MyController') would do what I want, but I get a constructor back instead of the instance I'm looking for.
You need to create an application instance reference in the Application. Like this:
Ext.application({
name: 'CMS',
controllers: ['MyController'],
launch:function () {
CMS.app = this;
...
}
});
then you can use
CMS.app.getController('MyController') ...
You can use:
CMS.getApplication().controllers.get('ControllerName')
then you will get the actual instance of the controller
I don't think you get a constructor, it's just that chrome shows constructor when you call console.log on an Ext-JS object
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();