Develop Reference

Sencha Touch Chart, visible in browser, but not in my android phone

I trying to build an application using Sencha Touch 2.4.1,
and using cordova packager.
My simple application show chart, when i use
"start sencha web start" application for browsing.
(picture 1).
But when i pack the app to android apk,
on my android phone, it doesn't show the chart,
only starting animation..
(picture 2)
However if i remove line with xtype: 'companystockchart',
my application (on phone) is working (of course without chart)!
What am i doing wrong?
Source code:
app.js:
Ext.require([
]);
Ext.application({
name: 'app',
views: ['CompanyStockChart'],
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'fit',
title: 'Chart',
iconCls: 'overview',
items:[{
xtype: 'companystockchart'
}],
listeners: {
activate: function() {
}
}
})
}
});
app.view.CompanyStockChart.js:
Ext.define('app.view.CompanyStockChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.companystockchart',
config: {
store: {
fields: ['name', 'value'],
data: [
{ name: 'Jan', value: 110},
{ name: 'Feb', value: 252},
{ name: 'Mar', value: 952},
{ name: 'Apr', value: 325},
{ name: 'May', value: 123},
{ name: 'Jun', value: 52},
{ name: 'Jul', value: 1122},
{ name: 'Aug', value: 35},
{ name: 'Sep', value: 172},
{ name: 'Oct', value: 752},
{ name: 'Nov', value: 810},
{ name: 'Dec', value: 410}
]
},
animate: false,
interactions: ['panzoom'],
series: [
{
type: 'line',
xField: 'name',
yField: 'value',
style: {
fill: 'rgba(0,40,170,0.3)',
stroke: 'black'
}
}
],
axes: [
{
type: 'numeric',
position: 'left',
title: 'Number of Hits',
minimum: 0,
maximum: 1200,
grid: {
fill: '#efefef',
odd: {
fill: '#cdcdcd'
},
even: {
lineWidth: 3
}
}
},
{
type: 'category',
position: 'bottom',
title: 'Month of the Year',
grid: true,
style: {
estStepSize: 1
}
}
]
}
});
Next i try to debug the app, and i see next issue:
(picture 3)

Enter / Go key on Android keyboard when focusing a numberfield

my problem is that I can't catch any event on pressing enter key while "inside" a numberfield.
I started by listening to action event, then tried to catch keyup event and check the keycode. None of those are working for me:
xtype: 'numberfield',
cls: 'bordered_input',
label: '',
name: 'value',
itemId: 'stavif_value',
listeners: {
keyup: function(numberfield, e){
if(e.event.keyCode == 13)
console.log('KEYUP CATCHED');
},
action: function(){
console.log('ACTION CATCHED');
}
}
Then I moved the numberfield inside a form.Panel and tried to catch the beforesubmit event:
var form = Ext.create('Ext.form.Panel', {
submitOnAction: true,
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'numberfield',
cls: 'bordered_input',
label: '',
name: 'hodnota',
itemId: 'stavif_hodnota'
}
],
listeners: {
beforesubmit: function(form, values, options) {
console.log('BEFORESUBMIT inside FIELDSET');
}
}
}
],
listeners: {
beforesubmit: function(form, values, options) {
console.log('BEFORESUBMIT inside form.Panel');
}
}
});
I've put the 'listeners' thingy to fieldset aswell (originally I've had it without the fieldset), just to be sure that I'm not missing anything. However I didn't succeed once again.
What makes me confused is that when I use textfield instead of numberfield I am able to catch the keyup and the action events (dunno about the beforesubmit though, didn't try that).

There is a special key event listener for numberfield. Try
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
console.log('Enter pressed');
}
}
}

registering a component with a id (`contentview`) which has already been used.ensure the existing cmpnt has been destroyed `Ext.Component#destroy()

getting error
[WARN][Ext.Component#constructor] Registering a component with a id (`contentview`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.
My problem is if i am directly loading contacts page with json it is displaying fine and ontap is also wrking fine. But if i add a login screen before this contacts page like I am redirecting login page to contact page if login succes. In that condition getting error on ontap of that list.
in my contact view I am getting a list in contacts view once i select a list item from contacts view i have to get the details in show page. That is what i am trying to doing, but getting error please check this.
my view file is
Ext.define(
'AddressBook.view.Contacts',
{
extend : 'Ext.List',
xtype : 'contacts',
requires: ['AddressBook.view.contact.Show'],
config : {
title : 'Address Book',
cls : 'x-contacts',
store : 'Contacts',
itemTpl : [
'<div class="deal"><div class="headshot" style="background-image:url({offer_image});"></div>',
'<div class="name">{title}, {location}</div>',
'<div class="endtime">{startTime}</div></div>'].join(''),
items : [{
xtype : "toolbar",
docked:"top",
title : '<img src="resources/images/logo.png" width="130px"/> '
}]
}
});
display list item detail:
Ext.define('AddressBook.view.contact.Show', {
extend: 'Ext.Container',
xtype: 'contact-show',
config: {
title: 'Information',
baseCls: 'x-show-contact',
layout: 'vbox',
items: [
{
id: 'contentview',
tpl: [
'<div class="top">',
'<div class="headshot" style="background-image:url({offer_image});"></div>',
'<div class="name">{location} {lastName}<span>{title}</span></div>',
'</div>'
].join('')
}
],
record: null
},
updateRecord: function(newRecord) {
if (newRecord) {
this.down('#contentview').setData(newRecord.data);
}
}
});
ontap event on my controller:
onContactSelect: function(list, index, node, record) {
this.showContact = Ext.create('AddressBook.view.contact.Show');
// Bind the record onto the show contact view
this.showContact.setRecord(record);
// Push the show contact view into the navigation view
this.getMain().push(this.showContact);
},

Declare new view in app.js file

sencha templating in mvc pattern

The code below is for main view i.e main.js , where i have called intro.js i.e another view. Now i am unable to render the data on the template . I am new to sencha , i think i messed up something on declaration
Ext.define("casta.view.Main", {
extend: 'Ext.tab.Panel',
apitoken:'NULL',
requires: [
'Ext.TitleBar',
'Ext.Video',
'casta.view.Intro'
],
config: {
tabBarPosition: 'top',
items: [
{ title:'Intro',
xclass: 'casta.view.Intro' ,
iconCls:'user'
}
]
}
});
intro.js is as below. I think while declaring the variable I messed up some thing . It is showing blank screen
Ext.define('casta.view.Intro', {
extend: 'Ext.tab.Panel',
//alias: 'widget.currentDate', //this makes it xtype 'currentDate'
//store: 'CurrentDateStore',
initComponent: function(){
planetEarth = { name: "Earth", mass: 1.00 };
tpl = new Ext.Template(['<tpl for".">', '<p> {name} </p>', '</tpl>'].join(''));
tpl.compile();
//this.callParent(arguments);
},
html:tpl.apply(planetEarth)
});
below is the console log
tpl is not defined
[Break On This Error]
html:tpl.apply(planetEarth)

initComponent is going to be called at some time after the html var is set. instead define your tpl like so:
Ext.define('casta.view.Intro', {
extend: 'Ext.tab.Panel',
tpl: '<p> {name} </p>',
initComponent: function(){
//Be sure to use the var keyword for planet earth, otherwise its declared as a global variable
var planetEarth = { name: "Earth", mass: 1.00 };
this.setHtml(this.getTpl().apply(planetEarth));
}
});
This will work, following your pattern, but you probably want to define that component more like so:
Ext.define('casta.view.Intro', {
extend: 'Ext.Container',
tpl: '<p> {name} </p>'
});
Then instantiate it like:
Ext.define("casta.view.Main", {
extend : 'Ext.tab.Panel',
apitoken : 'NULL',
requires : ['Ext.TitleBar', 'Ext.Video', 'casta.view.Intro'],
config : {
tabBarPosition : 'top',
items : [{
xclass : 'casta.view.Intro',
title : 'Intro',
iconCls : 'user',
data: {name: "Earth", mass: 1.00 }
}]
}
});

How to dispatch from view to controller in Sencha Touch2 with Phonegap

My View (MyFormPanel)
var controllers = Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
username: "username"
},
},
launch: function () {
alert('Controller launched');
},
init: function () {
alert('Controller init');
},
myaction : function (options) {
alert('options');
var username = options.username;
this.render ({
xtype: 'MyATM',
username: username})}
});
var formPanel = Ext.create('Ext.form.Panel', {
fullscreen: true,
scrollable: 'vertical',
layout: {
align: 'center',
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Login Form'
},
{
xtype: 'fieldset',
items: [
{
xtype: 'fieldset',
title:'Enter user name & password',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '50%'
},
items: [
{
xtype: 'textfield',
name : 'username',
label: 'User Name',
allowBlank:false,
useClearIcon: true
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
allowBlank:false,
useClearIcon: false
},
{
xtype: 'checkboxfield',
required:false,
id: 'RememberMe',
name: 'RememberMe',
label: 'Remember Me',
labelWidth: '50%'
},
{
xtype: 'button',
ui: 'confirm-round',
text: 'Log In' ,
handler: function() {
//Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
Ext.ControllerManager.get('formcontroller').ControllerMethod({myaction: myaction});
}
}
]
}],
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
});
My controller (FormController)
Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
username: "username"
},
},
launch: function () {
alert('Controller launched');
},
init: function () {
alert('Controller init');
},
myaction : function (options) {
alert('options');
var username = options.username;
this.render ({
xtype: 'MyATM',
username: username})}
});
I am using Sencha touch2 with Phonegap 1.4 on android 2.3. When i try to move view to controller on Login button click on handler function to invoke controller , i am getting error , Ext.dispatch is not defined as function .
Tell me the actual way how to move view to controller and vice versa.
Thanks

Ext.dispatch is not the recommended way to use in Sencha Touch 2. It might be removed...
Anyway, the best way to listen to & handle events on your views from controllers is:
Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
loginButton: "#login-button" // set an id for your login button and this ref works
},
control: {
loginButton: {
tap: 'handleLogin',
}
handle_login: function(){whatever you want to do here}
}

And in Architect...
a. you go to the button's config, and
b. search for Event Handlers, and
c. you press the [+] button on the right.
d. Add a "basic handler"
e. Choose the TAP event
f. Give it a name (onButtonSendTap or whatever)
g. press DONE
h. right mouse
i. Convert to action
j. Choose [New Controller] or an existing controller
k. If you chose new controller give it a name
and voilla, you have your handler in the controller.

And in Architect...
a. you go to the button's config, and
b. search for Event Bindings, and
c. you press the [+] button on the right.
d. Add a "basic handler"
e. Choose the TAP event
f. Give it a name (onButtonSendTap or whatever)
g. press DONE
h. right mouse
i. Convert to action
j. Choose [New Controller] or an existing controller
k. If you chose new controller give it a name
and voilla, you have your handler in the controller.