We Keep Coding

EXTJS inline initComponent method within items config

Disclaimer: I am relatively new to ExtJS (version 5.01). I am hoping to reach some ExtJS experts to point me in the right direction:
I am getting an error when specifying an initComponent method within an items config. The code below generates the error:
"Uncaught TypeError: Cannot read property 'items' of undefined"
The error disappears when the 'initComponent' function of the north-child panel is commented out. I have the feeling I missed something on initialization order.
Q: How can I specify an initComponent method of a child item within the items configuration?
Ext.define('MyApp.view.TestView', {
extend: 'Ext.panel.Panel',
title: 'Parent',
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
title: 'North Child',
/* Problematic function: If commented, it works */
initComponent: function(){
console.log("test north child");
this.callParent(arguments);
}
}],
initComponent: function(){
console.log("Test parent");
this.callParent(arguments);
}
});

Short answer: You can't define initComponent on a child, because you can't do anything there that can't be done anywhere else.
InitComponent is executed when an instance of the component 'MyApp.view.TestView' is created (you only defined it here, using Ext.define). It can be created using Ext.create('MyApp.view.TestView',{, or by creating another view that has this component added as an item, or by deriving another component (extend:'MyApp.view.TestView').
All the child components are also created when 'MyApp.view.TestView' is created, so the initComponent function on the child would be superfluous, because the child cannot be created without the parent, so the initComponent of the parent can be used for everything that you want to do in the child's initComponent.
If you need sth. to be calculated before the items can be addded, you would proceed as follows:
Ext.define('MyApp.view.TestView', {
extend: 'Ext.panel.Panel',
title: 'Parent',
height: 300,
layout: 'border',
initComponent: function(){
var me = this,
tf = Ext.getCmp("someTextField"),
myTitle = (tf?tf.getValue():'');
Ext.applyIf(me,{
items: [{
xtype: 'panel',
region: 'north',
title: myTitle,
}]
});
this.callParent(arguments);
}
});
Please refer to the docs what exactly Ext.applyIf does (and how it differs from Ext.apply, because that function also comes handy sometimes).

Sencha dynamically adding to component not work in build

Sencha Touch 2.2.1
Cmd 3.1.342
I have a sencha web app used to display data using Sencha Charts and carousel. The data is obtained via ajax. Components are created according to the amount of data that is received from the server.
Everything works fine in development. However, when I create a production build, the components are created, but not populated with the carousel and the app crashes. It seems that this happens when I try to add the carousel the carousel to the container using: Ext.getCmp(siteNamex+'Cont').add(thecarousel);
It then dies and console log says:
Uncaught TypeError: Cannot call method 'substring' of undefined
Ext.ClassManager.parseNamespace
Ext.ClassManager.get
Ext.ClassManager.instantiate
Ext.ClassManager.instantiateByAlias
Ext.apply.factory
Ext.define.factoryItem
Ext.define.add
Ext.Ajax.request.success
Ext.apply.callback
Ext.define.onComplete
Ext.define.onStateChange (anonymous function)
Here is the code which creates the container:
newcontainer = Ext.Container({
xtype : 'container',
flex: 1,
margin: '0',
id: siteNamex+'Cont',
itemId: siteNamex+'Cont',
height: '100%',
items: [],
cls:'siteContainer',
html: '<h2 class="siteName" style="'+snStyle+'">'+siteName+'</h2>'
});
This code seems to be working and creates the container as required.
Charts populate an array. The size depends on the data received via ajax:
var allcharts = new Array(); //initializing
Create gauge chart:
chartgx = Ext.chart.Chart({
xtype: 'chart',
renderTo: Ext.getBody(),
cls: 'thegauge',
itemId: 'gauge'+tt2,
store: gaugeStore,
width : 'auto',
background: 'white',
animate: true,
insetPadding: 50,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: gaugemax,
steps: 10,
margin: 10
}],
series: [{
type: 'gauge',
field: 'CurrentValue',
donut: 30,
colorSet: ['#f6821f;', '#e0e2e4']
}]
});
Then I put this gauge in a container and add to array:
chartgx2 = Ext.Container({
xtype : 'container',
flex: 1,
layout: 'fit',
cls: 'gaugeContainer',
items: chartgx,
html: gaugeText
})
allcharts.push(chartgx2);
The carousel is then created using:
thecarousel = Ext.Carousel({
xtype: 'carousel',
width: '100%',
height: '100%',
itemId: 'thecarousel_'+siteName,
cls: 'chartscarousel',
id: siteNamex+'_carousel',
defaults: {
styleHtmlContent:true
},
items: allcharts
})
and is added to the container using Ext.getCmp(siteNamex+'Cont').add(thecarousel);
As I said earlier, this all works fine in development, but in the production build it throws up the error mentioned.
My app.js has the following:
requires: [
'Ext.field.Select',
'Ext.Ajax',
'Ext.Button',
'Ext.carousel.Indicator',
'Ext.carousel.Infinite',
'Ext.carousel.Item',
'Ext.carousel.Carousel',
'Ext.fx.easing.EaseOut',
'Ext.util.TranslatableGroup',
'Ext.chart.Chart',
'Ext.chart.axis.Gauge',
'Ext.chart.theme.*',
'Ext.util.Format',
'Ext.MessageBox',
'Ext.form.Panel',
'Ext.Panel',
'Ext.fx.Parser',
'Ext.Container',
'Ext.data.*',
'Ext.dataview.List',
'Ext.dataview.component.Container',
'Ext.chart.theme.Base',
'Ext.chart.theme.TitleStyle',
'Ext.chart.theme.GridStyle',
'Ext.chart.Toolbar',
'Ext.chart.legend.View',
'Ext.chart.Legend',
'Ext.chart.series.Bar',
'Ext.chart.series.Column',
'Ext.chart.series.Gauge',
'Ext.chart.series.Series',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.draw.Surface',
'Ext.draw.Draw',
'Ext.draw.Matrix',
'Ext.draw.engine.Canvas',
'Ext.draw.CompositeSprite',
'Ext.fx.Frame',
'Ext.draw.Sprite',
'Ext.fx.Sprite',
'Ext.Component',
'Ext.ComponentManager',
'Ext.ComponentQuery',
'Ext.TitleBar',
'Ext.draw.sprite.Sector',
'Ext.draw.sprite.Rect',
'Ext.chart.interactions.Abstract',
'Ext.chart.axis.Axis',
'Ext.util.SizeMonitor',
'Ext.chart.grid.HorizontalGrid',
'Ext.chart.grid.VerticalGrid'
],
When I run build command there are no errors.
Sencha Touch 2.2.1
Cmd 3.1.342
Update:
I rebuilt the gauge using this code exactly as it appears on the page. This did not resolve the problem

I would debug it like this:
Open your app in Chrome
Open dev tools
Go in "Sources" tab
Click two times on the pause symbol ("Pause on uncaught exceptions", bottom left arrow in the image bellow)
Do the thing that makes your application crash, or reload if it crashes on loading
The debugger will kick in just before throwing the exception you've noted
In the call stack, select the line Ext.ClassManager.instantiateByAlias (second arrow)
In the "Scope Variables" tab, you'll see the name of the culprit (circled bellow)
The variable name may be different because of the minification process, but you should be able to identify it easily. Optionally, you can disable compression in the file .sencha/app/production.properties to see the real code and make it easier.

Sencha Touch 2: data intigration or how to share dynamic information between sencha and javascript

I'd like to start quick.
What is my problem:
Within ST2 I structured my application with the MVC pattern. I have a store, a model, a controler and the views (for more information scroll down).
Workflow:
I click a list item (List View with a list of elements from store)
Controller acts for the event 'itemtap'
Controller function is looking for main view and pushes a detail view
Record data will be set as data
Detail view uses .tpl to generate the output and uses the data
Problem
Now I want to add a button or link to enable audio support.
I thought about a javascript function which uses the Media method from Phonegap to play audio
and I want to add this functionality dynamicly within my detail view.
Do you have any idea how I can achive that behavoir? I'm looking for a typical "sencha" solution, if there is any.
Detail Overview of all files starts here
My list shows up some data and a detail view visualize further information to a selected record.
The list and the detail view a collected within a container, I'll give you an overview:
Container:
Ext.define('MyApp.view.ArtistContainer', {
extend: 'Ext.navigation.View',
xtype: 'artistcontainer',
layout: 'card',
requires: [
'MyApp.view.ArtistList',
'MyApp.view.ArtistDetail'
],
config: {
id: 'artistcontainer',
navigationBar: false,
items: [{
xtype: 'artistlist'
}]}
});
List
Ext.define('MyApp.view.ArtistList', {
extend: 'Ext.List',
xtype: 'artistlist',
requires: [
'MyApp.store.ArtistStore'
],
config: {
xtype: 'list',
itemTpl: [
'<div>{artist}, {created}</div>'
],
store: 'ArtistStoreList'
}
});
Detail View
Ext.define('MyApp.view.ArtistDetail', {
extend: 'Ext.Panel',
xtype: 'artistdetail',
config: {
styleHtmlContent: true,
scrollable: 'vertical',
title: 'Details',
tpl: '<h2>{ title }</h2>'+
'<p>{ artist }, { created }</p>'+
'{ audio }'+
'',
items: [
//button
{
xtype: 'button',
text: 'back',
iconCls: 'arrow_left',
iconMask: true,
handler: function() {
var elem = Ext.getCmp("artistcontainer");
elem.pop();
}
}
]
}
});
And finally the controller
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
artistContainer: 'artistcontainer',
},
control: {
'artistlist': {
itemtap: 'showDetailItem'
}
}
},
showDetailItem: function(list, number, item, record) {
this.getArtistContainer().push({
xtype: 'artistdetail',
data: record.getData()
});
}
});
Puh, a lot of stuff to Read

Here you can see an example of how to load audio from an external url with Sencha Touch "Audio" Component. Haven't work with it but I think it fits your needs. Declaring it is as simple as follows:
var audioBase = {
xtype: 'audio',
url : 'crash.mp3',
loop : true
};
Iwould reuse the component and load the songs or sound items by setting the url dynamically. By the way I tried it on Chrome and Ipad2 and worked fine but failed on HTC Desire Android 2.2 default browser.

Defining a Panel and instantiating it in a viewport

I am trying to get Ext.define & Ext.create working in Sencha touch 2, so that I can define everything in my library and just create stuff pre-configured.
However, Ext.define is not doing what I would expect it to in anything I've tried.
Why does the following code not create a panel inside the viewport with the field label "Tame"?
Ext.define('mobi.form.Login',{
extend:'Ext.form.Panel',
items: [{
xtype: 'textfield',
name: 'Tame',
label: 'Tame'
}
]
});
Ext.application({
viewport: {
layout:'fit'
},
launch: function(){
var form = Ext.create('Ext.form.Panel', {
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name'
}
]
});
Ext.Viewport.add(Ext.create('mobi.form.Login')); // This doesnt add anything to the viewport
Ext.Viewport.add(form); //magically this works
}
})

When using Ext.define, all configurations must go inside the config block. So your code should look like this:
Ext.define('mobi.form.Login',{
extend:'Ext.form.Panel',
config: {
items: [{
xtype: 'textfield',
name: 'Tame',
label: 'Tame'
}
]
}
});
In general the only exceptions to this are:
extend
requires
xtype
singleton
alternateClassName
Anything else should be inside the config object, but remember, only when using Ext.define.

It looks like you are trying to use the sencha MVC concept but this is wrong if this is your only piece of code.
First create the following folder structure:
MyAppFolder
index.html (include the sencha lib here)
app.js (main file)
app (folder)
controller
Main (main controller)
model (optional if no model is defined)
store (optional if no model is defined)
view
Viewport.js (your main viewport)
resources
css
style.css (your custom style)
images (your icons and images if you have)
Then in your app.js you would define something like this:
// enable loader for dynamic loading of .js classes
Ext.Loader.setConfig({
enabled : true,
paths : {
}
});
/**
* Better performance is achived when knowing which .js classes we need to load prior to execution of this class.
*/
Ext.require([
]);
/**
* This is the definition of our mobile application.
* The name of this app is MVCTest.
*/
Ext.application({
name : 'MVCTest',
controllers : ['Main'],
views : ['Viewport'],
launch : function() {
Ext.create('MVCTest.view.Viewport');
}
});
Then your main controller:
Ext.define('MVCTest.controller.Main', {
extend : 'Ext.app.Controller',
config : {
refs : {
viewport : 'mvctest-viewport'
}
}
});
Then your viewport would look something like this, according to your example:
Ext.define('MVCTest.view.Viewport', {
extend : 'Ext.Container',
xtype : 'mvctest-viewport',
config : {
fullscreen : true,
layout : 'card',
items:
[
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'mvctest-tame'
}
]
}
});
By specifying the xtype mvctest-tame it will search for this xtype and add this in as a new item to this card. So you need the tame view:
Ext.define('MVCTest.view.Login',{
extend:'Ext.form.Panel',
xtype: 'mvctest-tame',
items: [{
xtype: 'textfield',
name: 'Tame',
label: 'Tame'
}
]
});
And do not forget to add the Login view to the app.js..

Sencha Touch 2 - TabPanel does not work in MVC designed App

simple question for you today...
This works:
var carousel = Ext.create('Ext.Carousel', {
fullscreen: 'true',
//load in views view clean instantiation using
// the widget.alias's defined in each view... yea
// For some reason, putting flex on these components... oh...
// Have to call directly in by just the xtype since these are just
// references..
items: [
{
xtype: 'Main'
},
{
xtype: 'CommentList'
}
]
This does NOT work:
var tabpanel = Ext.create('Ext.TabPanel', {
fullscreen: 'true',
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
//load in views view clean instantiation using
// the widget.alias's defined in each view... yea
// For some reason, putting flex on these components... oh...
// Have to call directly in by just the xtype since these are just
// references..
items: [
{
xtype: 'Main',
title: 'The Main',
iconCls: 'user'
},
{
xtype: 'CommentList',
title: 'Comments',
iconCls: 'user'
}
]
});
As you can see, they are pretty much the same except one is a TapPanel (with the required default configs added) and the other is a carousel.
Everything else is exactly the same.... This is in the app.js of my Sencha Touch 2.0 app designed following the MVC architecture.
The result of the not-working TabPanel is that I only see the first view (Main) and no tab-bar appears in the bottom of the screen.
Any ideas what my problem might be?

I am not sure if this is an issue but in my code the line is:
Ext.create("Ext.tab.Panel", {
Not:
Ext.create('Ext.TabPanel', {

Fullscreen should be fullscreen: true instead of fullscreen: 'true'. You could also add this code to make them switch:
cardSwitchAnimation: {type: "fade", duration: 1000},
layout: "card",
Didn't test it, but it worked for me (got it from a snippet of my own code)