1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    156
    Vote Rating
    3
    Answers
    8
    coolfish is on a distinguished road

      0  

    Default Unanswered: Component Query custom items fails - bug or am I doing something wrong?

    Unanswered: Component Query custom items fails - bug or am I doing something wrong?


    edit: So regardless of the mess in ComponentQuery.query, it looks like only the last item linked is showing up in the parent's getItems. Can I only have one link to one instance of a custom component? Why? What's the proper way of having a custom component, with code reuse?

    Another edit: On a hunch, I decided to change the itemId for each linked instance to something unique. I can't do a query based on the itemId anymore, but I can look at the xtype - eg query .MItem, and this seems to work. As far as I can see, there's no reason why this should be the case. ItemId is supposed to be one of those things that you can give the same name to, and query on that way, no? Thanks for any info Sencha peoples!



    Sencha Touch 2.1.1 (Architect 2.1 b678), latest chrome, latest safari, latest ios mobile safari

    Hey all. I've got a custom component in a view. I link to the custom view to create several instances of this component. When I query for the component, using the View as a root or as a part of the selector, eg #MyView component#myxtype I get 1 or 2 of the components. if I use ComponentQuery.query(component#myxtype) I get all the components (of course then I have to loop through and grab them by their id to do work on them).

    Here's the test code. Am I doing something wrong, or is this a bug?

    Custom component:

    Code:
    Ext.define('MyApp.view.MItem', {
        extend: 'Ext.Container',
        alias: 'widget.MItem',
    
    
        config: {
            height: '47px',
            id: 'mitem',
            itemId: 'mitem',
            layout: {
                type: 'hbox'
            },
            initialConfig: {
                top: 'uhh',
                bottom: 'duhh'
            },
            cls: [
                'ux-mitem',
                'x-container',
                'x-field',
                'x-layoutbox-item',
                'x-label-align-left'
            ],
            bubbleEvents: [
                'add',
                'remove',
                'tap'
            ],
            items: [
                {
                    xtype: 'container',
                    flex: 25,
                    cls: [
                        'ux-mitem-left'
                    ],
                    itemId: 'mitem-left',
                    layout: {
                        type: 'vbox'
                    },
                    items: [
                        {
                            xtype: 'container',
                            flex: 1,
                            cls: [
                                'ux-mitem-top'
                            ],
                            itemId: 'mitem-top'
                        },
                        {
                            xtype: 'container',
                            flex: 1,
                            cls: [
                                'ux-mitem-bottom'
                            ],
                            itemId: 'mitem-bottom'
                        }
                    ]
                },
                {
                    xtype: 'container',
                    cls: [
                        'ux-mitem-right'
                    ],
                    itemId: 'mitem-right',
                    width: '40px'
                }
            ]
        },
    
    
        initialize: function(scope, eOpts) {
            var me = this;  
            //console.log( me.getInitialConfig().top, me.getInitialConfig().bottom);
    
    
            me.down('#mitem-top').setHtml(me.getInitialConfig().top);
            me.down('#mitem-bottom').setHtml(me.getInitialConfig().bottom);
    
    
            this.element.on ({
                scope: me,
                tap: function (e, t) {
                    me.fireEvent ('tap', me, me.getActiveItem (), e, t);
                }
            });
    
    
        }
    
    
    });
    Simple view:

    Code:
    Ext.define('MyApp.view.MyNavigationView', {
        extend: 'Ext.navigation.View',
    
    
        requires: [
            'MyApp.view.MItem'
        ],
    
    
        config: {
            id: 'MyView',
            items: [
                {
                    xtype: 'fieldset',
                    title: 'MyFieldSet',
                    items: [
                        {
                            xtype: 'MItem',
                            initialConfig: {
                                top: 'hey hey',
                                bottom: 'ho ho'
                            },
                            id: 'First'
                        },
                        {
                            xtype: 'MItem',
                            initialConfig: {
                                top: 'hey',
                                bottom: 'what'
                            },
                            id: 'Second'
                        },
                        {
                            xtype: 'MItem',
                            id: 'Tres'
                        },
                        {
                            xtype: 'MItem',
                            initialConfig: {
                                top: 'que',
                                bottom: 'kohagen!!'
                            },
                            id: 'Quatro'
                        }
                    ]
                }
            ]
        }
    
    
    });
    Controller:

    Code:
    Ext.define('MyApp.controller.MyController', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            control: {
                "component#mitem": {
                    tap: 'onMitemTap'
                }
            }
        },
    
    
        onMitemTap: function(container) {
    
    
            var c = Ext.ComponentQuery.query('#MyView component#mitem');
    
    
    
    
            var c2 = Ext.ComponentQuery.query('component#mitem', Ext.ComponentQuery.query('#MyView')[0]);
    
    
    
    
            var c3 = Ext.ComponentQuery.query('#MyView .MItem');
    
    
    
    
            var e = Ext.ComponentQuery.query('component#mitem');
    
    
            console.log('got %i and again %i and then %i component, expecting %i ', c.length, c2.length,c3.length, e.length);
    
    
        }
    
    
    });
    The output in console, when tapping on an item, is

    got 1 and again 1 and then 1 component, expecting 4


    Edit - debugging this... and my goodness. It's like the heart of darkness in there. Root is expected to be an array all of a sudden?

    edit 2: Just looking at what components are in the fieldset, via:

    Code:
    Ext.ComponentQuery.query('fieldset'[0].getItems().items
    


    Gives me the fieldset title and the last component added (mitem id quatro). Why's it only have the one reference when there are 4 items in the dom ?


  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    Answers
    69
    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

      1  

    Default


    Quote Originally Posted by coolfish View Post
    ItemId is supposed to be one of those things that you can give the same name to, and query on that way, no? Thanks for any info Sencha peoples!
    No. itemId's must be unique to the container which they are in. This is what Ext.Container uses to determine the uniqueness of an item.

    If you want to get a bunch of similar typed items you can either grab them out via xtype or an additional property that you set.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 1