View Full Version : Am I going at it the right way?

26 Jul 2013, 10:57 AM
In my application, I have 3 main views. Login, Dashboard and Main. In both Login and Dashboard, the views are pretty straightforward where one view leads to another, via routes. In Main, I have roughly 20 possible views; think old school website where you have a sidebar with 20 links docked to the left and a right container for those links' content.

I am trying to setup my Main view to work like that. Sidebar updates the route, which loads the Main view and based on the route, loads the appropriate page in the container. What I just describes works, I can load the 20 views with the Sidebar correctly showing you what page you're on.


Where I am stuck/stumped/inexperienced is switching between the views in my Main view. I originally thought, when the route changes, Main would loads from scratch again but what's happening is when the route changes, Main is duplicating itself and my main container is loading on top of each other. Due to this duplication, I have not been able to figure out how to switch between the items.

view = Ext.Viewport.setActiveItem(route.id); view.show();

So I don't know;

1) if I simply need to find out how to properly set an item via an id so that I can manipulate it once it's been added to the viewport

2) how to avoid the duplication

3) if my current structure is the right way to go, I tried to look at the Kitchen Sink but there's defiantly something that I haven't look at.

4) should I just step 20 views similar to my Login and Dashboard views? My reason for 1 Main view was to avoid loading what's common in my 20 views, mainly, the sidebar navigation.


29 Jul 2013, 5:36 AM
I don't think you should be changing the active items on the Ext.Viewport. I try to stay away from using that and manipulating the views I specifically create. And yeah, the Kitchen Sink seems like the perfect example to get you started. Use the Main view as a parent that holds the sidebar, and the main-subview. In the Main controller you can then create and destroy the subviews when the views are changed with the sidebar. Also you should not use id's with your components and use itemId's to avoid duplicate id's when destroying/recreating instances.

30 Jul 2013, 11:14 AM
Thanks for your input. I have made changes to my application to ensure markup is not being duplicate as it was and my application is working more like the Kitchen Sink application. My next task is understanding two things;

1. How to destroy items/views?
In my main view, I set an item as my container which will hold all my views.

id: 'mainscreen',
xtype: 'container',
layout: 'card',
scrollable: true,
flex: 1

This view holds a method that allows me to push the views that I need

this.config.mainscreen = Ext.getCmp('mainscreen');
xtype: this.routeParams.xtype,
record: this.routeData,
listeners: this.listeners,
conrol: this.control

Should I simply keep track of the items and instead of using 'add', I should use 'setActiveItem'? This question also leads me to my next question and something you pointed out.

2. How to properly identify components in order to get them call it's methods
To give you an example, the only way I have been able to access methods in my Main view is to give it an id so that I can at least do <pre>Ext.getCmp('main');</pre>. Without setting an id, I haven't been able to figure out how to do it.

Again, thanks for your input. My app is in a much better place right now.

31 Jul 2013, 5:33 AM
I would only use setActiveItem if you are working with a limited amount of views. Adding more screens will likely slow the device down over time (more noticeable on the slower devices).

Look into using Controllers to store all your component references and functions/methods. Controller (http://docs.sencha.com/touch/2.2.1/#!/api/Ext.app.Controller)s make it easy to reference and control your components using the refs (http://docs.sencha.com/touch/2.2.1/#!/api/Ext.app.Controller-cfg-refs)/control (http://docs.sencha.com/touch/2.2.1/#!/api/Ext.app.Controller-cfg-control)configs (you can even have a controller for each view if you wanted, but it would be best to group the major functionality).

In the Controller you can create references to your components by using an identifier - I use an itemId for consistence. You can also reference components using the down (http://docs.sencha.com/touch/2.2.1/#!/api/Ext.Container-method-down) and up (http://docs.sencha.com/touch/2.2.1/#!/api/Ext.Component-method-up) functions that come with components. So say you have a button with the itemId: 'loginButton' then you can reference it like:

//say toolbar is already referenced
var loginButton = toolbar.down('#loginButton');

//or if the mainView has the toolbar that holds the login button
var loginButton = mainView.down('#loginButton');

If you were using a Controller, it'd be something like this:

Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
//this searches for a button with the selector of an itemId equaling 'loginButton'
loginButton: 'button[itemId=loginButton]'
//may also be able to use loginButton: '#loginButton'
control: {
loginButton: {
tap: 'doLogin'
doLogin: function() {
//called whenever the Login button is tapped

Once you have references to your views, you can call the destroy() function when you are done with it, and then re-create another instance when needed. That should help keep your app speedy :)

I also suggest you try to stay away from using 'this' everywhere to avoid ambiguity when reading your code. I like to set var me = this; in my functions off the bat and then it helps when I may need to do something out of that function's scope.