1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Canada
    Posts
    27
    Vote Rating
    0
    so.phis.ti.kat is on a distinguished road

      0  

    Default Am I going at it the right way?

    Am I going at it the right way?


    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.
    Code:
    Ext.Viewport.setActiveItem({.....});
    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.
    Code:
    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.

    Thoughts?
    -- Marlon Valenzuela Web Developer www.marlonvalenzuela.net

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Location
    Canada
    Posts
    27
    Vote Rating
    0
    so.phis.ti.kat is on a distinguished road

      0  

    Default


    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.
    Code:
                        {
                            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
    Code:
            this.config.mainscreen = Ext.getCmp('mainscreen');
            this.config.mainscreen.add({
                xtype: this.routeParams.xtype,
                record: this.routeData,
                listeners: this.listeners,
                conrol: this.control
            });
            this.config.mainscreen.addCls(this.routeParams.productId);
            this.config.mainscreen.addCls(this.routeParams.pageId);
    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.
    -- Marlon Valenzuela Web Developer www.marlonvalenzuela.net

  4. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    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. Controllers make it easy to reference and control your components using the refs/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 and up functions that come with components. So say you have a button with the itemId: 'loginButton' then you can reference it like:
    Code:
    //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:
    Code:
    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.

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi