CODEWITHSUNDEEP
sencha-touchsencha-touch-2
bwags
bwags

Reputation: 1008

ComponentQuery for specific listitem

I want to create a controller with a ref to a specific item in a List, is this possible?

So really I need the ComponentQuery to reference a listitem. I am setting the data inline in the list:

Ext.define('MyApp.view.MyView', {
    extend : 'Ext.List',
    alias : 'widget.mylist',

    config : {
        title : 'Title',

        itemTpl : ['{displayName}'].join(''),

        data : [{
            displayName : 'One',
            id : 1
        }, {
            displayName : 'Two',
            id : 2
        }, {
            displayName : 'Three',
            id : 3
        }, {
            displayName : 'Four',
            id : 4
        }]
    }
});

Then on in my controller (this is obviously not working):

refs : {
    oneListItem: 'mylist.list[id=1]',
    twoListItem: 'mylist.list[id=2]',
    threeListItem: 'mylist.list[id=3]',
    fourListItem: 'mylist.list[id=4]'
}

Hopefully this is possible. If it is not I can listen for an 'itemtap' on the list and call a method from there, however, I would prefer not have to do that for cleanliness.

Thanks in advance.

Brad

Upvotes: 0

Views: 492

Answers (2)

occasl
occasl

Reputation: 5454

You might try Ext.select('.x-list-item-first'); or Ext.select('.x-list-item-last'); if you want a handle on the first or last item. I would encourage you to add an xtype set to "mylist" instead of using alias.

Upvotes: 0

Andrea Casaccia
Andrea Casaccia

Reputation: 4971

First off: adding id to the objects in your data section will not have any effect, that is just the data that's taken and substituted in the itemTpl you specified before.

As to your question: Sencha Touch 2 Documentation does not mention a way to have Ext.ComponentQuery select the n-th child of a Component, so, assuming you want to create your list objects with inline data, the only way I see is to use the id that Sencha automatically applies to each listItem on creation.

These ids are of the #ext-listitem-1 kind, see an example of how to use them in this Sencha Fiddle demo.

This is however bad practice, because you cannot rely on those id, if for example you add another list to your application they can change breaking your code.

I do not see any valid reason why you shouldn't use itemtap to act on the list, since with the event you get all the data you need to manipulate the proper list item:

itemtap( this, index, target, record, e, eOpts )

For completeness sake, I must mention that you could also add your items dynamically with Ext.dataview.List.add(), that way you should be able to create your dataitems with a custom id.

Upvotes: 1

Related Questions