1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    39
    Answers
    1
    Vote Rating
    0
    ashapiro75 is on a distinguished road

      0  

    Default Unanswered: getItems() only returning 2 items even though there are more.

    Unanswered: getItems() only returning 2 items even though there are more.


    I'm not sure where to put this, I'm not sure if I am doing something wrong of if this is a bug or what so please move this to wherever it should be...

    Here is the issue, I have a container and inside that container I have a tool bar and 5 sub containers stacked up vertically. The parent container is using a vbox layout and each child takes up 20% .

    I have a controller action that fires when a button inside the tool bar is pressed. Right now all the controller action does is the following:

    Code:
    var mainContainer = this.getParentContainer();  //there is a controller reference set up for this.
    console.log(mainContainer);
    That's it, it outputs the object to the console. When I open up the object inside the console it only shows 2 items in the Items array, one being the tool bar and the second being the last container that was added to the mainContainer.

    I can clearly see there are 6 items in that container and when I try to get access through the code to the other items, I'm getting undefined errors.

    So if I were to do this:
    Code:
    var containerA = mainContainer.child('#containerA');
    var containerB = mainContainer.child('#containerB');
    console.log(containerA); //This would come back as undefined.
    console.log(containerB); // This would give me an object.
    I double checked myself by using:
    Code:
    console.log(mainContainer.getItems());
    And it still only returns two items. If I try to use mainContainer.getAt(2), it's undefined.


    I must be missing something here, can I not have more than 2 items in a container? Do I need to use a panel to have multiple children inside it?

    If I set up controller references for all the children I can get to them all just fine but if I try to do it this way, no dice...
    While I know controller references are probably the better way to do it, if I wanted to dynamically add items to a container and then dynamically access those items, I don't believe the controller reference method would work.

    MVC is still very new to me, so is Sencha Touch so maybe I am just going about this the wrong way.

    Thanks in advance for any help.
    Last edited by ashapiro75; 27 Apr 2012 at 4:24 AM. Reason: added a bit more information

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    39
    Answers
    1
    Vote Rating
    0
    ashapiro75 is on a distinguished road

      0  

    Default


    Ok, so just to add a note to this - It must be that I can't do it with a container... I just tried the exact same thing with a set up of Panels instead of Containers and it does exactly what I wanted to do.

    This to me is baffling, confusing and pretty inconsistent, unless like I said, I am missing something. All the documentation I've read on Sencha Touch 2.0. So is this wrong then?

    A Container has all of the abilities of Component, but lets you nest other Components inside it. Applications are made up of lots of components, usually nested inside one another. Containers allow you to render and arrange child Components inside them. Most apps have a single top-level Container called a Viewport, which takes up the entire screen. Inside of this are child components, for example in a mail app the Viewport Container's two children might be a message List and an email preview pane.

    Containers give the following extra functionality
    Adding child Components at instantiation and run timeRemoving child ComponentsSpecifying a Layout

    Layouts determine how the child Components should be laid out on the screen. In our mail app example we'd use an HBox layout so that we can pin the email list to the left hand edge of the screen and allow the preview pane to occupy the rest. There are several layouts in Sencha Touch 2, each of which help you achieve your desired application structure, further explained in the Layout guide.
    And why on the page about Ext.Container is the example using Ext.Panel?


    //this is the Panel we'll be adding belowvar aboutPanel =Ext.create('Ext.Panel',{ html:'About this app'});//this is the Panel we'll be adding tovar mainPanel =Ext.create('Ext.Panel',{ fullscreen:true, layout:'hbox', defaults:{ flex:1}, items:{ html:'First Panel', style:'background-color: #5E99CC;'}});//now we add the first panel inside the secondmainPanel.add(aboutPanel);
    When in the code Sencha Architect uses it's creating the container by extending the Ext.Container ?

    Is the documentation wrong? Is the SDK that Sencha Architect uses different than the Sencha Touch 2.0 SDK? Is this just an issue with misleading documentation? Or out of date copied over from Sencha Touch 1.0 documentation?

    It's kind of hard to learn this stuff when you don't know if what you are doing is wrong or the documentation is wrong or maybe the documentation isn't wrong but maybe it's out of date.

    Thankfully you guys are a great help through the forums because I would still be struggling quite a bit if I only had the documentation and the videos to rely on.

    I don't mean to or complain but when I INVEST hours into learning something I want to make sure my time isn't being wasted by going on wild goose chases through documentation. I was recommended to look into this framework by a friend of mine who does touch panels and I did and it's a great framework. Now I am trying to sell the company I work for on using it as the mobile platform of choice but in order to do that , I need to produce something to show them and I need to become the resident "expert" on it first. I keep hitting these stumbling blocks that make this frustrating.

    So thanks again for all the help through the forums.

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,198
    Answers
    61
    Vote Rating
    120
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Moved to the Sencha Touch 2 general Q&A forum.

    What other items are direct children of the container you are talking about? Could you post the definition?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    39
    Answers
    1
    Vote Rating
    0
    ashapiro75 is on a distinguished road

      0  

    Default


    I think I figured out what the issue was... I don't have the original file anymore because I had used panels instead and moved on but in my quest to recreate it for you, I think I figured it out.

    If items share an ItemID they only show up as 1 child. So if I have 10 containers inside a single container and they all have a common ItemID then the container will show only 1 child. Here is the definition:


    Code:
    Ext.define('MyApp.view.mainContainer', {
        extend: 'Ext.Container',
        alias: 'widget.mainContainer',
    
    
        config: {
            id: 'mainContainer',
            itemId: 'mainContainer',
            items: [
                {
                    xtype: 'container',
                    id: 'containerA',
                    itemId: 'container'
                },
                {
                    xtype: 'container',
                    id: 'containerB',
                    itemId: 'container'
                },
                {
                    xtype: 'container',
                    id: 'containerC',
                    itemId: 'container'
                },
                {
                    xtype: 'container',
                    id: 'containerD',
                    itemId: 'container'
                },
                {
                    xtype: 'container',
                    id: 'containerE',
                    itemId: 'container'
                },
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    id: 'containerToolBar',
                    items: [
                        {
                            xtype: 'button',
                            id: 'containerButton',
                            text: 'MyButton1'
                        }
                    ]
                }
            ]
        }
    
    
    });
    I have a reference set up for mainContainer.

    Here is my controller action:

    Code:
    var testContainer = this.getMainContainer();
    
    
    console.log(testContainer.getItems());

    So I guess this more about me not knowing what I am doing but I was under the impression ItemID's didn't have to be unique. For example if I had 5 objects and they each have a unique ID I could give them a common ItemID, then I could use that ItemId in a controlQuery to reference any of those items. So if I had 10 buttons, each one had an id from 1-0 and I had an ItemId = NumberButton, I could set a reference or a Control Action to query for #NumberButton, then if a NumberButton was pushed, I could grab it's ID to figure out what number was pressed. Instead of having to create a reference or a Control Action for each individual NumberButton hased on it's own ID. It was this line of thinking that prompted me to assign a common ItemID to each container.

    Thanks again.

Thread Participants: 1