Threaded View

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Location
    Cali, Colombia
    Posts
    4
    Vote Rating
    0
    laovejanegra is on a distinguished road

      0  

    Default Answered: Create DataItem in Dataview Sencha Touch 2

    Answered: Create DataItem in Dataview Sencha Touch 2


    I need create a dataview component with the following structure



    I learned how to create simple text component, but this structure is more difficult. I use this code, but is only the name field:

    Code:
    Ext.define('DEMO.view.product.ListItem', {
        extend: 'Ext.dataview.component.DataItem',
            xtype: 'product-list-item',
            config: {
              cls: 'product-list-item',
              dataMap: {
                  getName: {
                       setHtml: 'name'
                  }
             },
             name: {
                 cls: 'x-name',
                 flex: 1
             },
             layout: {
                  type: 'hbox',
                  align: 'left'
             }
        },
        applyName: function(config){
             return Ext.factory(config, Ext.Component, this.getName());
        },
        updateName: function(newName, oldName) {
             if (newName) {
                 this.add(newName);
             }
    
             if (oldName) {
                  this.remove(oldName);
             }
         }
    });
    Last edited by mitchellsimoens; 17 Apr 2012 at 11:02 AM. Reason: added [CODE] tags

  2. Objects passed in data item definition don 't has to be simple elements with a simple setter attached, on the pattern specified by you:


    Code:
    config: { 
    dataMap: { 
    getName: { 
    setHtml: 'name' 
    } 
    }, 
    name: { 
    cls: 'x-name', 
    flex: 1 
    }
    }


    If you look in the dataitem source code you see how mapping works:


    Code:
    for (componentName in dataMap) { 
    setterMap = dataMap[componentName]; 
    component = me[componentName](); 
    if (component) { 
    for (setterName in setterMap) { 
    if (component[setterName]) { 
    component[setterName](data[setterMap[setterName]]); 
    } } } }



    So instead of using setHtml method of a Component one could create a new component with setters for every property he needs.


    Code:
    Ext.define('MyProduct',{
    extend:'Ext.Contaier',
    xtype:'mycomponenttype',
    config:{
    name:null,
    image:null,
    quantity:null,
    items:[
    {xtype:'component', id:'name'},
    {xtype:'component', id:'image'}
    {xtype:'component', id:'quantity'}
    ]
    },
    setName:function(name)
    { 
    //update view element
    },
    setImage:function(image)
    {
    //update image element
    },
    setQuantity:function(image)
    {
    //update quantity
    }
    });

    Now you have a new type that has setters for your needs, mycomponenttype, that could have any layout or tpl you want.


    Now in you data item implementation you can set things like:
    Code:
    config: { 
    dataMap: { 
    getMyComp: { 
    setName: 'name',
    setImage:'image',
    setQuantity:'quantity'
    } 
    }, 
    myComp: { 
    xtype:'mycomponenttype'
    }
    
    
    }
    ,
    applyMyComp: function(config){
    return Ext.factory(config, MyProduct , this.getMyComp());
    }

    Of course this is not a working code, but I hope you get the idea


    If you don t have a large number of items, using a container instead of Dataview might be more handy.