Ext.dataview.component.DataItem

[pajelawrence]

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!

[mrsunshine]

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

[intellix]

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

[mrsunshine]

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

[intellix]

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? :/

[MackeyMack]

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.

 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
        );
        }
    });