We Keep Coding

Fail to catch tab change event

I'm using button to move between tabs. But for that I have to remember the user's tab position. So my buttons keep working when the user leaves the screen and returns later.
The tabchange event should be the event to use for that, however I cannot get it to trigger.
View:
Ext.define('MyApp1.view.Home',
{
extend: 'Ext.form.Panel',
requires:
[
'Ext.tab.Panel'
],
xtype: 'home',
config:
{
itemId: 'home',
layout: 'fit',
items:
{
xtype: 'tabpanel',
tabBarPosition: 'top',
height: 500,
renderTo: document.body,
listeners:
{
beforetabchange: function (tabs, newTab, oldTab)
{
console.log('tab is going to change');
},
tabchange: function ()
{
console.log('recorded tab change from listener');
},
change: function ()
{
console.log('change of tab from listener');
}
},
items:
[
{
title: 'one'
},
{
title: 'two'
}
]
}
}
});
Controller:
Ext.define('MyApp1.controller.HomeController',
{
extend: 'Ext.app.Controller',
requires:
[
'MyApp1.view.Main'
],
config:
{
refs:
{
home: 'home'
},
control:
{
home:
{
beforetabchange: 'onTabChange',
tabchange: 'onTabChange',
change: 'onTabChange'
}
}
},
init: function()
{
console.log('HomeController initialized');
},
onTabChange: function ()
{
console.log('active tab changed');
}
});
So I see the initialization text in the log but none of the tab change events when I click the tab buttons.

First off it seems you can only implement these listeners on the tabBar of the tabPanel
Having looked through the source code though it seems that this never get's fired even though it is documented. http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/source/Bar3.html#Ext-tab-Bar-event-tabchange
What I could suggest is either as you pointed out to hook into the activeitemchange event on the panel or activetabchange (which strangely is firing twice) event of the tabbar as activeitemchange also seems not to work as intended.
https://fiddle.sencha.com/#fiddle/g44

Turns out I was looking at the ExtJs 5 docs, instead of the Sencha 2.4.1 docs...
Which only has the 'activeitemchange' event.

Sencha Tap listener not firing

I have a test application with a couple of views. I am trying to invoke a simple 'tap' listener on my buttons. Even though the controller is instantiated and launched, the tap event does not seem to fire.
Here's my app.js
Ext.application({
name: 'MyApp',
requires: [
'Ext.MessageBox',
'Ext.form.FormPanel',
'Ext.navigation.View'
],
views: [
'Main',
'Tasks'
],
controllers: [
'Main'
],
models: [
'Task',
'Schedule'
],
stores: [
'Tasks',
'Schedules'
],
launch: function() {
// Destroy the #appLoadingIndicator element
try{
Ext.fly('appLoadingIndicator').destroy();
}catch(err){
console.warn("[CUSTOMWARN]Could not destroy loading indicator because of -- \n"+err);
}
var DEBUG=false;
if(!DEBUG){
// Initialize the main view
Ext.Viewport.add(Ext.create('MyApp.view.Main'));
}
}
});
Main.js -- controller
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
requires: [
'MyApp.view.Main'
],
init: function(){
// download and parse data from server here.
console.log('controller initiated!');
},
config: {
refs: {
loginBtn: 'button[action=login]'
},
control: {
loginBtn: {
tap: 'loginBtnHandler'
}
}
},
loginBtnHandler: function(){
this.callParent(arguments);
Ext.Msg.alert('here');
}
});
Main.js -- view
Ext.define('MyApp.view.Main', {
extend: 'Ext.navigation.View',
alias: 'customnavigationview',
requires: [
'MyApp.form.Login'
],
config: {
navigationBar: {
hidden: true
},
items: [
{
xtype: 'logincard',
flex: 1
}
],
}
});
Login.js -- for xtype: 'logincard'
Ext.define('MyApp.form.Login', {
extend: 'Ext.form.Panel',
xtype: 'logincard',
requires: [
'Ext.field.Password',
'Ext.field.Email',
'Ext.form.FieldSet',
'Ext.field.Toggle',
'Ext.Label'
],
// id: 'loginForm',
config: {
items: [
{
xtype : 'label',
html : 'Login failed. Please enter correct credentials.',
itemId : 'signInFailedLabel',
hidden : true,
hideAnimation : 'fadeOut',
showAnimation : 'fadeIn',
style : 'color:#990000;',
margin : 10
},
{
title: 'Please log in',
xtype: 'fieldset',
items:[
{
xtype: 'textfield',
name : 'username',
label: 'UserName'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
},
{
xtype: 'fieldset',
items: [
{
xtype : 'togglefield',
name : 'rememberLogin',
label : 'Remember Me '
}
]
},
{
xtype : 'button',
id : 'loginSubmitBtn',
itemId : 'loginSubmitItemBtn',
text : 'Login',
ui : 'action',
action : 'login',
margin : 10
}
]
}
});
Any help would be highly appreciated!
EDIT: So I tried to use Ext.ComponentQuery.query("#loginSubmitBtn") and on printing the output on console, I can see that it is pointing to the correct button. Here's the output.
0: Class
_badgeCls: "x-badge"
_baseCls: "x-button"
_disabledCls: "x-item-disabled"
_floatingCls: "x-floating"
_hasBadgeCls: "x-hasbadge"
_hiddenCls: "x-item-hidden"
_icon: false
_iconAlign: "left"
_itemId: "loginSubmitItemBtn"
_labelCls: "x-button-label"
_margin: 10
_pressedCls: "x-button-pressing"
_pressedDelay: 0
_styleHtmlCls: "x-html"
_text: "Login"
_ui: "action"
action: "login"
badgeElement: Class
bodyElement: Class
config: objectClass
currentUi: "x-button-action"
element: Class
eventDispatcher: Class
getEventDispatcher: function () {
getId: function () {
getObservableId: function () {
getUniqueId: function () {
iconElement: Class
id: "loginSubmitBtn"
initConfig: function (){}
initialConfig: Object
initialized: true
innerElement: Class
managedListeners: Object
observableId: "#loginSubmitBtn"
onInitializedListeners: Array[0]
parent: Class
referenceList: Array[4]
refreshFloating: function () {
refreshSizeState: function () {
renderElement: Class
rendered: true
textElement: Class
usedSelectors: Array[1]
__proto__: Object
length: 1
**EDIT 3: ** Found it! See answer here: Sencha Tap listener not firing

The listener for a button tap should be just 'tap' instead of 'itemtap'
tap: 'loginBtnHandler'
Hope it helps-

I think I've had this problem in the past. Try qualifying the ref in the controller with the view name to narrow the query down:
loginBtn: 'logincard button[action=login]'

Not the best, but should work:
First remove the tap listener on the controller. Also remove the 'action' property on the button, and set the handler on the button:
{
xtype : 'button',
id : 'loginSubmitBtn',
itemId : 'loginSubmitItemBtn',
text : 'Login',
ui : 'action',
//action : 'login',
margin : 10,
handler : function () {
MyApp.app.getController('Main').loginBtnHandler()
}
}

Ok, this is weird, but I found out why my buttonclick was not being handled properly. I usually use Google Chrome as my testing browser with web inspector on. I downloaded Safari and tried the same code and it worked like its supposed to. I looked at both the browsers, and the only difference was that Chrome had web inspector on, while Safari didn't. I closed the web inspector in Chrome and the button handler worked great (without reloading). I restarted the browser, pushed the inspector to a separate window, none of them worked. However, Safari works great even with inspector on. Probably a Chrome bug?
Google Chrome version: 27.0.1453.110
*EDIT: * I had the touch emulation turned on in the web inspector. With this turned on, we have to close the web inspector for the touch event to register. Otherwise, we have to turn off the touch emulation to register for the events while the web inspector is open.
TL;DR: Close your web inspector in Chrome before testing, if you have touch emulation turned on.

Sencha Touch - Calling function within view does not get called

Ive just started to explore sencha. Stuck up with this. Help Appreciated :)
This is my java script code, in the below line handler function i am calling the following the method, which in under items and parent xtype form-panel.
{
xtype:'panel',
defaults:{
xtype:'button',
style:'margin: 0.1em',
flex:1
},
layout:{
type:'hbox',
align:'center'
},
items:[
{
text:'Submit',
handler:this.makeReq,
scope:this
},
{
text:'Terms & Conditions',
}
]
}
This is the method that am calling in the above function, but it seems does not happen anyting.
makeReq: function() {
alert("Hey There");
}

I really suggest you follow the Sencha Touch 2 MVC model in this case. You can give your button an action like this:
{
text:'Submit',
action: 'submit'
}
Then you can refer this button and set the function for it inside your app's controller:
config: {
refs: {
submitButton: 'button[action=submit]',
},
control: {
submitButton: {
tap: 'makeReq'
},
},
makeReq: function() {
alert("Hey There");
}
}

SenchaTouch2 - Listening to store load event, set tab panel item "badgeText"

I'am trying to build my first little Sencha Touch 2 app. I've created some stuff that is working as expected and now I could like to create some event handling stuff.
I've created the following store:
Ext.define('Mobile.store.Blogs', {
extend: 'Ext.data.Store',
config: {
},
listeners: {
'load' : function(store,records,options) {
store.loaded = true;
console.log("fired blogCountAvailable");
store.fireEvent("blogCountAvailable");
},
'blogCountAvailable': function(store, records, options) {
console.log("blogCountAvailable has been fired");
}
}
});
This stuff works as expected, but now comes the next step.
Here is the code of my tab panel bar:
Ext.create("Ext.tab.Panel", {
xtype:'mainTabPanelBottom',
tabBarPosition: 'bottom',
fullscreen: true,
items: [
{
title: 'Blog',
iconCls: 'home',
xtype:'mainpanel'
},
{
title: 'Users',
iconCls: 'user',
xtype:'userpanel'
}
],
listeners: {
blogCountAvailable: function(tabpanel, newTab) {
var tab = newTab.tab,
badge = 10;
tab.setBadge(badge);
console.log("blogCountAvailable has been fired");
}
}
});
My question now is how I could achieve it to "fire" my custom event blogCountAvailable to the tab panel?

The easiest way is just set an id for your TabPanel and then:
Ext.getCmp('your_TabPanel_id').fireEvent("blogCountAvailable");

Defining items of an object inside the initialize function

I am trying to create items inside a component as it gets initialized, with a function.
Consider the following:
Ext.define('mobi.form.Login',{
extend:'Ext.form.Panel',
config:{
items: [{
xtype: 'textfield',
name: 'Name',
label: 'Name'
}]
});
Ext.application({
viewport: {
layout:'fit'
},
launch: function(){
Ext.Viewport.add(Ext.create('mobi.form.Login'));
}
})
I am trying to get The mobi.form.login to generate its config from a function that runs on initialize ( or whatever I can use to over write the config I specify ).
I know Sencha touch 2 has the constructor, and initialize function, but both of them seem to have arguments=[] ( eg an empty array )
This is more or less how it would look if I was doing it in ExtJS 4.x:
Ext.define('mobi.form.Login',{
extend:'Ext.form.Panel',
initComponent:function(config){
config=Ext.apply({}.config,{});//make sure config exists
config.items= [{
xtype: 'textfield',
name: 'Name',
label: 'Name'
}]
Ext.apply(this, config);
this.callParent(arguments);
}
});

If you ever wanted to do this, you could use constructor or initialize.
Constructor you would use for synchronous logic which will be fast and you want to happen before the component is initialized. You can access the configuration through the constructors first argument:
Ext.define('MyComponent', {
extend: 'Ext.Component',
constructor: function(config) {
console.log(config);
this.callParent([config]);
}
});
Ext.application({
launch: function(){
Ext.create('MyComponent', { test: 1 })
// Will log out:
// {
// test: 1
// }
}
});
Remember you will always need to callParent with the config/arguments within constructor.
In any other situation, you should use initialize which is called after all the config's have been... initialized. :) We use this a lot internally for adding listeners.
initialize: function() {
this.on({
...
});
}

you don't need to call initialize manually it is already done by constructor and when calling this function you can access items data using this.items and create panel items there
Ext.define('mobi.form.Login',{
extend:'Ext.form.Panel',
config: {
items: []
},
initialize : function()
{
this.items = [Ext.create({
xtype: 'textfield',
name: 'Name',
label: 'Name'
})];
this.callParent();
}
});
Ext.application({
viewport: {
layout:'fit'
},
launch: function(){
Ext.Viewport.add(Ext.create('mobi.form.Login'));
}
})

Use the following:
Ext.apply(this, {
items: [
....
]
});

Have you tried something similar to this? I'm just passing a config object to Ext.create, though I can't test it right now. See http://docs.sencha.com/touch/1-1/#!/api/Ext-method-create
Ext.Viewport.add(Ext.create(
{
xtype: 'mobi.form.Login',
items: [ /*A list of items*/ ]
}
));
You could stick this snippet in its own function as well, one that takes in items as a parameter. Hope this solves your problem!