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

      0  

    Default Ext.dataview.component.DataItem

    Ext.dataview.component.DataItem


    Hi Everyone,

    I created a list based on Ext.dataview.DataView component, and the item is based on Ext.dataview.component.DataItem.

    I referred to this http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/ blog.
    Thanks for that. But on my case, How do I add two the same component in each list item.

    For example, each list has two buttons named delete and edit.

    Kindly help me please, any Idea and suggestion will be appreciated.

    Thanks!

  2. #2
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    Hi,

    check out the source code of kiva example

    http://docs.sencha.com/touch/2-0/#!/example/kiva

    there they use a dataitem with three components in a list

  3. #3
    Sencha Premium Member intellix's Avatar
    Join Date
    Mar 2012
    Location
    UK + Malta
    Posts
    263
    Vote Rating
    18
    intellix will become famous soon enough

      0  

    Default


    Quote Originally Posted by mrsunshine View Post
    Hi,

    check out the source code of kiva example

    http://docs.sencha.com/touch/2-0/#!/example/kiva

    there they use a dataitem with three components in a list
    I don't mean to sound like a complete utter noob but how can we check out the source code for that example?

    I see an iFrame to a bunch of minified code. I don't see any reference anywhere to any sort of code

  4. #4
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    download the sencha touch sources
    http://www.sencha.com/products/touch...a-touch-2.0.1/

    it contains a folder with the example apps/code check the code of the kiva example

  5. #5
    Sencha Premium Member intellix's Avatar
    Join Date
    Mar 2012
    Location
    UK + Malta
    Posts
    263
    Vote Rating
    18
    intellix will become famous soon enough

      0  

    Default


    ahah cool... single simple DataItem. I need something a little more advanced but there doesn't seem to be any sort of example. Seen a couple of threads on here but nobody has replied to any of them :p

    how often is .setHtml(singleParameter); sufficient when you're looping through a nested model? :/

  6. #6
    Sencha User
    Join Date
    Dec 2011
    Posts
    4
    Vote Rating
    0
    MackeyMack is on a distinguished road

      0  

    Default


    I have a list with two buttons. It is not done yet, but this (below) works for me. The framework seems to be sensitive about the control base class name appearing in the name of the list control you are creating.

    Code:
     Ext.define('my.RequestListItem', {
            extend: 'Ext.dataview.component.DataItem',
            xtype: 'my_RequestListItem',
            requires: ['Ext.Button'],
            
            config: {
                cls: 'request-list-item',
               
                styleHtmlContent: true,
                dataMap: {
                   
                    getName: {
                        setHtml: 'name'
                    },
                    getButton: {
    
    
                    }
                                    ,
    
    
                    getDenyButton: {
    
    
    
    
                    }
                },
    
    
                name: {
                    cls: 'x-name',
                    flex: 1
                },           
                
                denyButton: {
    
    
                    flex: 3,
                    text: 'Deny',
                    ui: 'decline',
                    width: 80,
                    cls: 'x-button',
                     padding: 2,
                margin: 2
            },
            button: { text: 'Approve', ui: 'confirm', flex: 2,
                padding: 2,
                margin: 2, width: 80, cls: 'x-button'
            },
    
    
                layout: {
                    type: 'hbox',
                    align: 'center'
                }
            },
            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);
                }
            },
            applyButton: function (config) {
                return Ext.factory(config, Ext.Button, this.getButton());
            },
    
    
    
    
            updateButton: function (newButton, oldButton) {
                if (newButton) {
                    newButton.on('tap', this.onButtonTap, this);
                    this.add(newButton);
                }
    
    
                if (oldButton) {
                    this.remove(oldButton);
                }
            },
    
    
            onButtonTap: function (button, e) {
                var record = this.getRecord();
    
    
                Ext.Msg.alert(
               'Approve', // the title of the alert
                 record.get('mycourseid') // the message of the alert
            );
            }
                    ,
    
    
            applyDenyButton: function (config) {
                return Ext.factory(config, Ext.Button, this.getDenyButton());
            },
    
    
    
    
            updateDenyButton: function (newDenyButton, oldDenyButton) {
                if (newDenyButton) {
                    newDenyButton.on('tap', this.onDenyButtonTap, this);
                    this.add(newDenyButton);
                }
    
    
                if (oldDenyButton) {
                    this.remove(oldDenyButton);
                }
            },
            onDenyButtonTap: function (button, e) {
                var record = this.getRecord();
    
    
                Ext.Msg.alert(
               'Deny', // the title of the alert
                 record.get('mycourseid') // the message of the alert
            );
            }
        });