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;    



  3. #2
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Inside DataItem methods you can refer to its record, with getRecord, also getData.


    PHP Code:
    applyItemView: function(config) {        
    var 
    comp =  Ext.factory(configMyApp.view.ContactsListItemViewthis.getItemView());        
    comp.doUpdateViewthis.getRecord());
            return 
    comp;    

    or in update
    PHP Code:
    updateItemView: function(newNameoldName) {        
    if (
    newName) {            
    this.add(newName).doUpdateViewthis.getRecord());      
    }        
    if (
    oldName) {            
    this.remove(oldName);        
    }    


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

      0  

    Default


    Thanks. I'm having the problem not in the DataItem, but in the UI component that the datamap binds to. The methods available in the DataItem are not available in its bound UI components, so I can't use getRecord() there.

    I'm looking for a way to get a reference back from the bound component to its parent DataItem, or a way to get the data directly like getRecord().

  5. #4
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      1  

    Default


    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;    



  6. #5
    Sencha User
    Join Date
    Aug 2010
    Posts
    45
    Vote Rating
    0
    pajelawrence is on a distinguished road

      0  

    Default


    Hi,

    I have the same problem in DataItem. Moe specific I am using DataItem inside my DataView.
    The question is:
    1. How to set an Id on each DataItem?
    2. This ID's is dynamically from server.

    My idea is below.

    Code:
    config:{
    		cls: 'kitten-list-item',
    		action: 'freeStyleItem',
    		
    				
    		dataMap:{
    			setItemId: 'id', // This is What I mean. But it does not work, instead the ID was generated by the framework. "ext-layoutfreestyleitem-1"
    
    
    			getImage: {
    				setSrc: 'icon'
    			},
    			getName: {
    				setHtml: 'name'
    			}
    		},
    		image:true,
    		image:{
    			cls: 'x-img',
    			itemId: 'id'
    		},
    		name:{
    			cls: 'x-name',
    			flex: 1
    		}	
    	},
    Here is my JSON file

    Code:
    {
        "widgets": [
            {
                "order": 1,
                "id": "hey-297",
                "name": "Product and Services",
                "description": "Description soon!",
                "icon": "http://vegacrush.com/skyline/img/icongreen_badge.png",
                "edit": "arrow_right"
            },
            {
                "order": 2,
                "id": "296",
                "name": "Sencha touch",
                "description": "Description soon!",
                "icon": "http://skylinetest2.net/project2/assets/js/jquery/uploadify/features/1327899484-sub-icon-sencha-logo.jpg",
                "edit": "arrow_right"
            },
            {
                "order": 3,
                "id": "295",
                "name": "News Update",
                "description": "Description soon!",
                "icon": "http://skylinetest2.net/project2/assets/js/jquery/uploadify/upload/renz_logo.gif",
                "edit": "arrow_right"
            }
    ]
    }

    Please help me guys. Thank you in advanced

  7. #6
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    @pajelawrence In your model definition you can specify which property will be used as id. If your data already have this field used, you could let frameork use a different key name, idProperty:'key'.

    *also I think your model is not defining a field named id (?) because other way your data id should be kept.
    Last edited by bluehipy; 21 May 2012 at 8:58 PM. Reason: extra thought

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

      0  

    Default


    Thanks! Works great.

  9. #8
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    100
    Answers
    2
    Vote Rating
    -1
    =NR= has a little shameless behaviour in the past

      0  

    Default


    Quote Originally Posted by bluehipy View Post
    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;    


    i don't follow this clue,

    the UI component that he created is a custom view in which there is no property called "dataitem" or moreover method called "intiDataItem"

    can you please explain in more details ?

    i do also notice the "PHP Code" does this mean that the code will only work when using PHP ?
    Last edited by =NR=; 17 Apr 2013 at 2:45 AM. Reason: wrong quote

  10. #9
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      1  

    Default


    This would be some approach:


    PHP Code:
    Ext.define('BlueButton', {
        
    extend:'Ext.Button'
        
    xtype:'xbluebutton',
        
    config:{
            
    dataItem:null
        
    },
        
    initialise:function(){
            
    this.callParent(arguments);
            
    this.on('tap'this.onTapthis); 
        },
        
    onTap:function(){
            var 
    item this.getDataItem().config.record.data;
            
    console.log(item.name +' of age '+item.age);
        }
    });
    Ext.define('MyListItem', {
        
    extend'Ext.dataview.component.DataItem',
        
    requires: ['Ext.Button'],
        
    xtype'mylistitem',

        
    config: {
            
    nameButtontrue,

            
    dataMap: {
                
    getNameButton: {
                    
    setText'name'
                
    }
            }
        },

        
    applyNameButton: function(config) {
            var 
    btn =  Ext.factory(configBlueButtonthis.getNameButton());
            
    btn.setDataItem(this); 
            return 
    btn;
        },

        
    updateNameButton: function(newNameButtonoldNameButton) {
            if (
    oldNameButton) {
                
    this.remove(oldNameButton);
            }

            if (
    newNameButton) {
                
    this.add(newNameButton);
            }
        }
    });



    Ext.application({
        
    name'SenchaFiddle',
        
        
    launch: function() {
          var 
    touchTeam Ext.create('Ext.DataView', {
        
    fullscreentrue,

        
    store: {
            
    fields: ['name''age'],
            
    data: [
                {
    name'Jamie Avins',  age100},
                {
    name'Rob Dougan',   age21},
                {
    name'Tommy Maintz'age24},
                {
    name'Jacky Nguyen'age24},
                {
    name'Ed Spencer',   age26}
            ]
        },

        
    useComponentstrue,
        
    defaultType'mylistitem'
    });
        }
    }); 
    In action here: http://www.senchafiddle.com/#MEhhA
    Latest thoughts on the subject: http://joy2share.com/senchatouch/

  11. #10
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    100
    Answers
    2
    Vote Rating
    -1
    =NR= has a little shameless behaviour in the past

      0  

    Default


    Quote Originally Posted by bluehipy View Post
    This would be some approach:


    PHP Code:
    Ext.define('BlueButton', {
        
    extend:'Ext.Button'
        
    xtype:'xbluebutton',
        
    config:{
            
    dataItem:null
        
    },
        
    initialise:function(){
            
    this.callParent(arguments);
            
    this.on('tap'this.onTapthis); 
        },
        
    onTap:function(){
            var 
    item this.getDataItem().config.record.data;
            
    console.log(item.name +' of age '+item.age);
        }
    });
    Ext.define('MyListItem', {
        
    extend'Ext.dataview.component.DataItem',
        
    requires: ['Ext.Button'],
        
    xtype'mylistitem',

        
    config: {
            
    nameButtontrue,

            
    dataMap: {
                
    getNameButton: {
                    
    setText'name'
                
    }
            }
        },

        
    applyNameButton: function(config) {
            var 
    btn =  Ext.factory(configBlueButtonthis.getNameButton());
            
    btn.setDataItem(this); 
            return 
    btn;
        },

        
    updateNameButton: function(newNameButtonoldNameButton) {
            if (
    oldNameButton) {
                
    this.remove(oldNameButton);
            }

            if (
    newNameButton) {
                
    this.add(newNameButton);
            }
        }
    });



    Ext.application({
        
    name'SenchaFiddle',
        
        
    launch: function() {
          var 
    touchTeam Ext.create('Ext.DataView', {
        
    fullscreentrue,

        
    store: {
            
    fields: ['name''age'],
            
    data: [
                {
    name'Jamie Avins',  age100},
                {
    name'Rob Dougan',   age21},
                {
    name'Tommy Maintz'age24},
                {
    name'Jacky Nguyen'age24},
                {
    name'Ed Spencer',   age26}
            ]
        },

        
    useComponentstrue,
        
    defaultType'mylistitem'
    });
        }
    }); 
    In action here: http://www.senchafiddle.com/#MEhhA
    hi bluehippy,

    thanks for sparing some of your time and re-explaning this to me, i'm clear now on what you are suggesting

    and also i think i found another way to do this..
    as i noticed (at least for button and checkboxfield) first parameter of those control events is a reference to the object itself, so we can use it and combine with "up" method (Ext.component.up) to get hold of the parent (Dataitem). Since we already get hold of the dataite we can use use that to acces the data directly with "getRecord().get('fieldName')"

    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    
    
    Ext.define('BlueButton', {
        extend:'Ext.Button', 
        xtype:'xbluebutton',
        config:{
            dataItem:null
        },
        initialise:function(){
            this.callParent(arguments); //what is this statement for?
            this.on('tap', this.onTap, this); 
        },
        onTap:function(me ){
            //var item = this.getDataItem().config.record.data;
            //console.log(item.name +' of age '+item.age);
            var parent = me.up('xtype_of_containing_container'); //in this example should be : var parent = me.up('mylistitem'); 
             console.log("desired data: " parent.getRecord().get('desiredFieldName'));
        }
    });
    Ext.define('MyListItem', {
        extend: 'Ext.dataview.component.DataItem',
        requires: ['Ext.Button'],
        xtype: 'mylistitem',
        
        config: {
            nameButton: true,
            
            dataMap: {
                getNameButton: {
                    setText: 'name'
                }
            }
        },
        
        applyNameButton: function(config) {
          //we will use the reference sended as parameter from the tap event so there is no need to save the dataitem again   
        return Ext.factory(config, BlueButton, this.getNameButton());
        },
        
        updateNameButton: function(newNameButton, oldNameButton) {
            if (oldNameButton) {
                this.remove(oldNameButton);
            }
            
            if (newNameButton) {
                this.add(newNameButton);
            }
        }
    });
    
    
    
    
    
    
    Ext.application({
        name: 'SenchaFiddle',
        
        launch: function() {
            var touchTeam = Ext.create('Ext.DataView', {
                fullscreen: true,
                
                store: {
                    fields: ['name', 'age'],
                    data: [
                        {name: 'Jamie Avins',  age: 100},
                        {name: 'Rob Dougan',   age: 21},
                        {name: 'Tommy Maintz', age: 24},
                        {name: 'Jacky Nguyen', age: 24},
                        {name: 'Ed Spencer',   age: 26}
                    ]
                },
                
                useComponents: true,
                defaultType: 'mylistitem'
            });
        }
    });
    what do you think?
    now i'm left with figuring of how to get the itemIndex of that dataitem..

Thread Participants: 3

Tags for this Thread