events flow of Panel in sencha touch 2 - sencha-touch

Question

This is my application architecture.
var loginView = Ext.create('Ext.Panel',{
id: 'LoginView',
.....
});
var homeView = Ext.create('Ext.TabPanel',{
id: 'HomeView',
items: [
{
xtype: 'list',
title: 'Home',
store: Ext.create('TweetStore'),
disableSelection: true,
....
},
{
title: 'Reply',
....
},
{
title: 'DM',
....
}
]
});
var mainView = Ext.create('Ext.Panel',{
id: 'MainView',
layout: 'card',
items: [ loginView, mainView ]
});
Ext.define('TweetStore', {
extend: 'Ext.data.Store',
config: {
fields: ...
pageSize: 25,
autoLoad: true,
proxy: {
type: 'ajax',
url: '/home',
pageParam: 'page',
limitParam: 'count',
reader: {
type: 'json'
}
}
}
});
There are two panels in MainView. LoginView is a login page where user input his username and password. When the authorization succeed, the second panel HomeView shows.
My questions:
I want the data in TweetStore to be loaded after the authorization, that is, when the HomeView shows, the data begins to load. But the show event is triggered even the
panel is still hidden. What event should I catch.
When the application starts, I want to send a ajax request to check whether the user is login, if true, the LoginView hide and the HomeView shows. In which event should I check this?

Answer 1

Q. 1) You should listen for painted() event.
Fires whenever this Component actually becomes visible (painted) on
the screen. This is useful when you need to perform 'read' operations
on the DOM element, i.e: calculating natural sizes and positioning.
Q. 2) Send the ajax request for user authentication on initialize() event.
Fires when the component has been initialized

Answer 2

- 1st question:
painted event seems good but in fact, it's terribly full of bugs in current release of Sencha Touch 2, as my experience. Do NOT rely on its existence and documentation.
According to what you've described, it's clear that you want to load your store after a specific event (authorization), so how about firing a custom event after that? For example:
loginForm.fireEvent('authenticated', this) (or any extra-params you need)
then in your controller, just listen to event authenticated on loginForm view.
- 2nd question:
As you said, you want to run some processes right after your application started. So the right place to put your code is in launch() function of your app.js. Just simple.