1. #1
    Sencha User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    nello is on a distinguished road

      0  

    Default Unanswered: Problems with adding an item instance to a component definition

    Unanswered: Problems with adding an item instance to a component definition


    Hi,

    I've been bashing my head against this for a couple of days now, so I'm hoping there are some wiser heads out there who can steer me in the right direction.

    I'm building an app that has a number of ways to get to what is essentially a single map with different markers or overlays depending on context. To this end, I have defined my own component to wrap up a single map instance in an xtype-able way for navigation components to use:


    Code:
    var myMap = Ext.create('Ext.Component', {
        html: 'Map should be here'
    });
    
    Ext.define('Proximity.view.result.ResultMap', {
        extend: 'Ext.Container',
        xtype: 'resultmap',
        alias: 'widget.resultmap',
    
        config: {
            layout: 'fit'
        },
    
        initialize: function() {
            me = this;
            console.log('adding the map');
            me.add([myMap]);
            console.log(me);
        }
    });

    We're already in deepish water for me here. I would much prefer if there were a way to just declare an instance item element for an already-created component and avoid the xtype factory business, but if there is I can't find it.

    Now for the weirdness.

    I have two separate views that then want to use this 'resultmap' component. I have a DetailView for which this works perfectly, consisting of 2 cards that I can flip between (the first being a carousel and the second this map view):


    Code:
    Ext.define('Proximity.view.detail.DetailView', {
        extend: 'Ext.Container',
        xtype: 'detailview',
        alias: 'widget.detailview',
    
    
        config: {
            layout: {
                type: 'card',
                animation: 'flip'
            },
    
    
            items: [{
                xtype: 'carousel',
    
    
                items: [
                    {
                        html: 'Item 1',
                        style: 'background-color: #5E99CC'
                    },
                    {
                        html: 'Item 2',
                        style: 'background-color: #759E60'
                    },
                    {
                        html: 'Item 3'
                    }
                ]
            },{
                xtype: 'resultmap'
            }]
        }
    });

    And I have a ResultView, sitting inside a tab panel, for which this appears to be hopelessly broken. :-(

    Code:
    Ext.define('Proximity.view.result.ResultView', {
        extend: 'Ext.tab.Panel',
        xtype: 'resultview',
        alias: 'widget.resultview',
    
    
        stores: ['SearchStore'],
    
    
        config: {
            xtype: 'tabpanel',
            title: '',
    
    
            tabBar: {
                ui: 'dark',
                docked: 'bottom'
            },
    
    
            defaults: {
                scrollable: true
            },
    
    
            items: [
                {
                    title: 'Price',
                    iconCls: 'cart',
                    cls: 'card2',
                    layout: {
                        type: 'card',
                        animation: 'flip'
                    },
                    items: [{
                        xtype: 'resultlist'
                    },{
                        xtype: 'resultmap'
                    }]
                },
    
    
                {
                    title: 'Settings',
                    iconCls: 'settings2',
                    cls: 'card6',
                    layout: {
                        type: 'fit'
                    },
                    items: [{
                        html: '<h1>Settings</h1>'
                    }]
                }
            ]
        }
    });
    When I flip to the resultmap, nothing displays, just as if the component were not there. The console tells me that myMap is definitely added to the resultmap component, I can see it in the items array, but nothing.

    If I replace the initialize() wiring in the resultmap with an inline xtype/html configuration (thus meaning multiple copies of eventual real map instances and not at all what I want) like this:

    Code:
    Ext.define('Proximity.view.result.ResultMap', {
        extend: 'Ext.Container',
        xtype: 'resultmap',
        alias: 'widget.resultmap',
    
    
        config: {
            layout: 'fit',
            items: {
                html: 'not the map you wanted'
            }
        }
    });


    Then everything works fine.

    What on earth am I doing wrong?
    Last edited by nello; 2 Jun 2013 at 5:19 AM. Reason: formatting and clarity

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Answers
    13
    Vote Rating
    9
    in4p will become famous soon enough

      0  

    Default


    @Nello, really hard to read your code. You should embed it in the code tag (it's the # on the editor toolbar).

    To create an instance of a class that you've declared, you can use Ext.factory

    At a quick glance, you look to have issues with you tabpanel class. I'm also going to guess that some of your issues are being caused by your layout configs.

  3. #3
    Sencha User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    nello is on a distinguished road

      0  

    Default


    Hi, thanks for the tip about [CODE] formatting. I couldn't figure out which of the various symbols would do that (especially as it's only visible in the 'advanced' controls once you've submitted a post).

    I don't want to create an instance of a class I've created, or at least, I know how to do that and it's not my problem.

    I want to create a single instance of a component and then have it available from all instances of my class. Effectively like a singleton, or a static instance.

    I agree that it's probably some sort of layout problem, but I have absolutely no idea why it would work with my last code snippet and not my first one.

    Any thoughts would be most welcome. This has pretty much stalled my project until I figure it out...

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Answers
    13
    Vote Rating
    9
    in4p will become famous soon enough

      0  

    Default


    Quote Originally Posted by nello View Post
    I don't want to create an instance of a class I've created, or at least, I know how to do that and it's not my problem.

    I want to create a single instance of a component and then have it available from all instances of my class. Effectively like a singleton, or a static instance.
    When you add an xtype in the items section of a config, sencha creates an instance of that component. If you define the id property for the component, you will later be able to component query that specific instance. This is helpful if you are dynamically showing a view, which I'm not 100% sure is what you are after.

    Quote Originally Posted by nello View Post
    I agree that it's probably some sort of layout problem, but I have absolutely no idea why it would work with my last code snippet and not my first one.

    Any thoughts would be most welcome. This has pretty much stalled my project until I figure it out...
    First off, it looks like you have some issues in how you are using the tab panel:

    Code:
    {
                    title: 'Price',
                    iconCls: 'cart',
                    cls: 'card2',
                    layout: {
                        type: 'card',
                        animation: 'flip'
                    },
    ///////////*******////////BELOW IN ITEMS YOU SHOULD ONLY BE PROVIDING 1 ITEMIF YOU WANT TO DO A CARD LAYOUT WITH 2 ITEMS IN IT, YOU SHOULD DEFINE A NEW CLASS THAT CONTAINS THE 2 ITEMS IN IT AND REFERENCE THAT NEW CLASS HERE
                    items: [{
                        xtype: 'resultlist'
                    },{
                        xtype: 'resultmap'
                    }]
                },
    The above isn't terribly well documented. Use sencha cmd to create a skeleton app and look at how they've used the tab panel in the Main.js file.

  5. #5
    Sencha User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    nello is on a distinguished road

      0  

    Default


    Hi. I appreciate your taking the time to answer my question, but I'm sorry, you really don't seem to understand what I'm asking!

    When you add an xtype in the items section of a config, sencha creates an instance of that component. If you define the id property for the component, you will later be able to component query that specific instance.
    I know this, and it's not what I'm trying to do.

    I don't want to create an instance of the component for every tab in my tabpanel. I only want ONE instance of the map. It's my entire problem.

    When I try to do this, it doesn't render correctly in some cases and does in others.

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Answers
    13
    Vote Rating
    9
    in4p will become famous soon enough

      0  

    Default


    In that case have you thought about doing it like this:

    In a controller somewhere create the first instance of the map class.
    Then just dynamically add the map class to any other component where it's needed (via the add method of the parent class). You'll obviously need to write more logic, but I'm pretty sure it would solve you problem of ensuring that the original instance is the only one ever shown.

  7. #7
    Sencha User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    nello is on a distinguished road

      0  

    Default


    It is very kind of you to take an interest in my question, but I can't help feeling that you didn't really read my opening post. I'm sorry if the code formatting issues made it difficult, but I have fixed them now.

    If you look at the very first code snippet, it's doing exactly what you just proposed. The first 3 lines create the map, and the initialize() adds it to the parent class. And it doesn't work for me, hence the post. It renders correctly in some situations and not in others.

    I think my real problem has more to do with the ordering implications for layouts and initialize() methods, and was hoping that someone with in-depth Sencha knowledge might be able to point me in the right direction.

    I have also tried using constructor() instead of initialize(), but the results are the same.

Thread Participants: 1

Tags for this Thread