Threaded View

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    7
    Vote Rating
    0
    haik is on a distinguished road

      0  

    Default Answered: How to refer back from a DataMap’s UI component to its DataItem record

    Answered: How to refer back from a DataMap’s UI component to its DataItem record


    When using a DataView/DataItem combo to replace a List in Sencha Touch 2, how can you get a reference to the DataItem’s data record from inside the UI component that the datamap binds to? The DataItem has a getRecord() function to return this data record, but I can’t see how to get a reference to the DataItem (or its record) from inside the UI component that it has created for a row of data.

    Each record contains a lot of data which I don't want to have to pass to the UI component through the map as most of the data isn't shown in the UI.

    Thanks very much!

    The DataItem looks like:
    Code:
    Ext.define('MyApp.view.ContactsListItem', {
        extend: 'Ext.dataview.component.DataItem',
        xtype : 'contactslistitem',
        requires: [
            'MyApp.view.ContactsListItemView'
        ],
        config: {
            cls: 'contacts-list-item',
            itemView: {flex: 1},
            dataMap: {
                getItemView: {
                    setName: 'name',
                    setDescription: 'description',
                    setEmail: 'email'
                }
            },
            layout: {
                type: 'hbox',
                align: 'center'
            }
        },
    
        applyItemView: function(config) {
            return Ext.factory(config, MyApp.view.ContactsListItemView, this.getItemView());
        },
    
        updateItemView: function(newName, oldName) {
            if (newName) {
                this.add(newName);
            }
    
            if (oldName) {
                this.remove(oldName);
            }
        },
    
    });
    The DataItem’s view looks like:
    Code:
    Ext.define('MyApp.view.ContactsListItemView', {
        extend: 'Ext.Container',
        xtype : 'contactslistitemview',
        requires: [
            'Ext.Component',
            'Ext.Button',
            'MyApp.utilities.Contacts'
        ],
    
        initialize: function () {
            this.callParent(arguments);
            
            var actionButtons = 
            [
                {
                    xtype: 'container',
                    cls: 'data',
                    layout: {type: 'vbox'},
                    items: [
                        {
                            xtype: 'component',
                            cls: 'name',
                            html: 'name'
                        },
                        {
                            xtype: 'component',
                            cls: 'description',
                            html: 'description'
                        }
                    ]
                }
                ,
                {
                    xtype: 'button',
                    cls: 'contacts',
                    docked: 'right',
                    text: 'Add to Contacts',
                    scope: this,
                    handler: this.onAddToContactsClick
                }
            ];
    
            this.add(actionButtons);
        },
    
        config: {
            cls: 'contacts-list-item-view',
            layout: {
                type: 'hbox',
                align: 'center'
            },
            items: [
            ]
        },
    
        setName: function (name) {
            var theComponent = this.query("component[cls='name']");
            theComponent[0].setHtml(name);
        },
        setDescription: function (description) {
            var theComponent = this.query("component[cls='description']");
            theComponent[0].setHtml(description);
        },
        onAddToContactsClick: function (button) {
            // something like var test = this.getParent().getRecord();
        }
    
    });

  2. oh... that is quite simple I guess...
    PHP Code:
    applyItemView: function(config) {        

    var 
    comp =  Ext.factory(configMyApp.view.ContactsListItemViewthis.getItemView());

    comp.dataitem this;

    //or better initialize it in a method call       

    comp.initDataItem(this);

            return 
    comp;    



Thread Participants: 3

Tags for this Thread