I'm a bit confused by the Sencha Touch documentation. In their Create your first app tutorial, they show a bit of code to create a panel:
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Welcome'
}
]
});
}
});
In the code, the fullscreen and items properties are at the base level of the json being passed in, but when you look at the api documentation for Ext.tab.Panel, both properties are found under the 'Configs' section and not the 'Properties' section.
I know that there are instances where I would need to put json encoded properties in a config property. Like this:
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
}
});
How do I determine what should go into the config property and what shouldn't? I'm having a hard time trying to find the explanation in the documentation.
Additional clarification to selected Answer:
In the first instance where we're using Ext.create("Ext.tab.Panel",... We're creating an instance of the Panel class. We're applying the configs directly to the instance of the Panel that will be created.
In the second instance where we're using Ext.define('User', { extend: 'Ext.data.Model', ..., we're creating a class called User by extending the class Model. The properties defined in the config property will be used to configure the Model class while any other properties outside of the config property will be used to configure the User class.
The braces are the configuration you're passing to create an instance. You're passing fullscreen & items as configurations to the tab panel. You're passing title, iconCls & html to the panel.
You only need to use the config block when defining your own classes, not instantiating them.
Related
According to the docs, when building universal app with sencha cmd, one can set the app's main view using either mainView config or within the launch() method of Ext.app.Application (using setMainView method) like this:
Ext.application({
name: 'Fiddle',
launch: function () {
var app = this.getApplication();
//app.setMainView('MyApp.view.main.Main');
//app.setMainView({xtype: 'app-main'});
},
mainView: 'MyApp.view.main.Main'
});
...
A fiddle is available here: Sencha Fiddle
And, it works with the classic toolkit, but when using modern one, the things can get wrong.
If you are using the mainView config - it works as expected (this is by default when you execute sencha generate app).
If you are using the setMainView() method, however, it depends of the parameter type you pass:
you will get a blank screen when you pass the full class name of the view as string ('MyApp.view.main.Main'). The view is created (reachable via Ext.ComponentQuery.query('app-main') within the console), but is invisible
you will get an error when you pass a config object for the view ({xtype: 'app-main'})
You can try it in the Fiddle above by commenting/uncommenting rows 7,8,11 (make sure a modern toolkit is selected before hitting Run).
Any idea how to resolve this, pls?
The ability to use the launch method logic is vital - for example if you are trying to implement an app with login functionality.
If modern add the main view to the viewport otherwise just set the main view
Ext.application({
name: 'Fiddle',
launch: function () {
if (Ext.isModern) {
Ext.Viewport.add([{
xtype: 'app-main'
}]);
} else {
var app = this.getApplication();
app.setMainView('MyApp.view.main.Main');
}
},
});
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
title: 'Panel Title',
html: 'panel body data...'
});
I have an angular application using Angular Router.
My main view is a tabbed view, which has 10 tabs defined in it. For each tab there is a named view for the angular router to inject templates into. Each tab knows nothing about its content, other than a header which is configured through state definition.
state('personView', {
route: "people/:personId/",
views: {
"tab1": {
tabConfig: {
name: 'tab1',
icon: 'info_outline'
}
template: "person-details.tpl",
controller: 'personDetailsController as vm'
},
"tab2": {
tabConfig: {
name: 'tab2',
icon: 'info_outline'
}
template: "children-details.tpl",
controller: 'childrenDetailsController as vm'
}
}})
What I would like to do is include a counter in the tab header which displays how many items are inside each tab. using above example, if there were 4 children, I would like the tab header to display the number 4 as a badge. But the knowledge of the children is that of the childrenDetailsController and that alone.
So how best to get the count up into the tabbed header without giving my childrenDetailsController the knowledge that it is being used in a tabbed template? Ideally, I would configure the tabbed view to 'look into' the childDetailsController and pull out a certain property, which could be used for the counter. But binding into child scopes is not something I am familiar with.
$state.get()
get(stateName) - A method for retrieving the configuration object for any state, by passing the name as a string.
get() - Returns an array of all state config objects.
or
$state.current
Ext.define('MyApp.view.TopToolbar', {
extend: 'Ext.container.Container',
alias: 'widget.toptoolbar',
initComponent: function() {
Ext.applyIf(this, {
layout: 'fit',
cls : 'x-bottombar',
html : 'HTML FRAGMENT'
});
this.callParent(arguments);
}
});
Originally this component had contained a small fragment of html but now its going to be significantly increased. So I'd like to move it to an external file but I found no way in the docs to do this. Is there a way to do this? I don't want to have a big chunk of html in my js.
Use the loader configuration on the component:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-loader
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentLoader
I tried to create base controller and write in it:
Ext.define('My.Users.controller.Role', {
extend : 'Ext.app.Controller',
stores : [
'Modules', 'ModulesList'
],
models : [
'Modules', 'ModulesList'
]
});
But when I tried to use getters for them (in this base class, or in it's child classes, like My.Users.controller.Group), like getModulesStore(), or getModulesListModel(), I have an error that them are not functions. And in Firebug I can see there aren't this methods in child class and in it superclass. How can I to fix it?
The full description how to reproduce this bug:
1) Download ExtJS 4.1 GPL from Sencha
2) Unzip the archive, and go to directory extjs-4.1.0/examples/app/feed-viewer/
3) In file feed-viewer.html comment line <script type="text/javascript" src="all-classes.js"></script> to force dynamic loading of js files: now you can normally edit the content of project files.
4) In folder app/controller create file named Entities.js with following code:
Ext.define('FV.controller.Entities', {
extend: 'Ext.app.Controller',
models: ['Shared'],
stores: ['Shared']
});
5) In files Articles.js and Feeds.js change extend to 'FV.controller.Entities'
6) In folders app/model and app/store create files Shared.js with content
Ext.define('FV.model.Shared', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'title',
type: 'string'
}
]
});
for Model and
Ext.define('FV.store.Shared', {
extend: 'Ext.data.Store',
model: 'FV.model.Shared',
proxy: {
type: 'ajax',
url: 'test.json',
reader: {
type: 'json',
root: 'item'
}
}
});
for Store.
7) Finally, for example, in init method of Article.js try to console.log(this);
In Firebug you will not get getSharedModel() and getSharedStore() methods.
I've uploaded my sample to http://nekaka.com/d/W1_EOlnPST
Getters are generated for views if you're using refs property.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Controller - check out section 'Using refs'.
For stores just use this.getStore('Modules')
models and stores are config properties. If you look at the source of Ext.app.Controller you'll see the getters created in the constructor.
FV.controller.Articles inherent from your controller class but it has its own models and stores properties which will override the ones in your own base class. This is very much the same way as if your component has height config, it will override that of all base classes (unless the base class forces such config by overriding it in the constructor or initComponent, this is not the case with controller that uses simple config properties).
If you want this to work the class that inherent from your controller will have to explicitly merge the base class config with its new ones. Again, same like with components.
Alternatively (and probably a better solution), instead of defining your shared models and stores as config properties in your base class, you could merge these into the config the constructor gets. Something like this in the constructor of your base controller class:
Ext.merge( config, {
models: ['Shared'],
stores: ['Shared']
});
Is there someone here who made a MVC application using EXTJS 4 BETA 3? and works fine??
please help me how?, ..
I have followed step by step here .. and #Abdel Olakara help
but there is still an error ... here my firebug
[Ext.Loader] Synchronously loading 'AM.controller.Users'; consider adding
Ext.require('AM.controller.Users') above Ext.onReady
[Ext.Loader] Synchronously loading 'AM.store.Users'; consider adding
Ext.require('AM.store.Users') above Ext.onReady
this.getView('Viewport') is null
When i read this at the forum ... there are still some bug with MVC guide ...
so, if you ever make it works.. how?
this is my Application.js :
Ext.Loader.setConfig({enabled:true});
Ext.create('Ext.app.Application', {
name: 'AM',
controllers: [
'Users'
],
views: [
'user.List'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userlist'
}
});
}
});
i'm trying to learn MVC in Extjs...
sorry if my english bad..
Well, I think I should take back my words! I had some success after going through sencha blog. And finally, got my MVC "Skeleton" running!
Here is the working code:
Ext.Loader.setConfig({enabled:true});
Ext.create('Ext.app.Application', {
name: 'AM',
autoCreateViewport: false,
controllers: [],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
Please note that, the code is very minimal and have removed the common errors reported in forums and here. The next step would be to start playing with this code and add controllers, views etc onto it!
I will keep updating this answer going forward.
Update: The first two error mentioned are not actually errors. They are warnings and application works fine even if they display these warnings. The third error you mentioned is a stopper!
Solution to Viewport problem Here are two ways to solve it.
Use the autoCreateViewport: false, property and define your viewport (I see that you have defined your viewport in launch method)
Create a Viewport.js and save it in view folder. In this case, I felt my launch method empty and moved the viewport code to Viewport.js file. But I do get an error:
Uncaught TypeError: Cannot call method 'create' of null
I do use ExtJS 4.1.
In my code [Ext.Loader] Synchronously loading 'OOO.store.News'; consider adding
Ext.require('OOO.store.News') above Ext.onReady warning message was invoked if I place
stores: [
'News',
],
in my app/Application.js file instead of app/controller/OOO.js file.
So put stores:[], in controller file.