Results 1 to 2 of 2

Thread: when useComponents is true of dataview, itemtap is not work in sencha touch 2.4.2?

  1. #1
    Sencha User
    Join Date
    Feb 2016
    Posts
    2

    Default when useComponents is true of dataview, itemtap is not work in sencha touch 2.4.2?

    I want to add link in my dataitem of dataview, when I set useComponents is true (use linedataitem), itmtap is not work, what?


    My Main
    Code:
    Ext.define('News.view.phone.Main', {
        extend: 'Ext.Container',
        xtype: 'main',
    
    
        requires: [
            'News.view.component.LineDataItem',
            'News.view.component.LineDataView'
        ],
    
    
        config: {
            fullscreen: true,
            layout: 'vbox',
            scrollable: {
                direction: 'vertical',
                directionLock: true
            },
    
    
            items: [{
                xtype: 'linedataview',
                custom: {
                    useTitle: true
                },
                store: {
                    fields: [{
                        name: 'image'
                    }, {
                        name: 'title'
                    }],
                    data: [{
                        title: 'Milk kitten',
                        image: 'data/images/kitten1.jpg'
                    }, {
                        title: 'Sitting kitten',
                        image: 'data/images/kitten2.jpg'
                    }, {
                        title: 'Evil kitten',
                        image: 'data/images/kitten3.jpg'
                    }, {
                        title: 'Ginger kitten',
                        image: 'data/images/kitten4.jpg'
                    }, {
                        title: 'Kitten friends',
                        image: 'data/images/kitten5.jpg'
                    }, {
                        title: 'Milk kitten',
                        image: 'data/images/kitten6.jpg'
                    }]
                }
            }]
        }
    });

    My DataView
    Code:
    Ext.define('News.view.component.LineDataView', {
        extend: 'Ext.dataview.DataView',
        xtype: 'linedataview',
    
    
        requires: [
            'Ext.data.Store',
            'News.view.component.LineDataItem'
        ],
    
    
        config: {
            useComponents: true,     // <=================== is true, use my linedataitem
            defaultType: 'linedataitem',
            autoDestroy: false,
            height: 114,
            padding: 5,
            store: null,
            //itemTpl:'<img src="{image}" style="display:block;margin:0 auto;"><span>{title}</span>',
    
    
            inline: {
                wrap: false
            },
            scrollable: {
                direction: 'horizontal',
                directionLock: true,
                indicators: false
            },
            custom: {
                paddingTop: 5,
                paddingRight: 5,
                paddingBottom: 5,
                paddingLeft: 5,
                marginTop: 5,
                marginRight: 5,
                marginBottom: 5,
                marginLeft: 5,
                imageWidth: 80,
                imageHeight: 80,
                useTitle: true,
                showWholeTitle: false,
                link: ''
            },
            listeners: {
                itemtap: function(dataview, index, target, record, e, eOpts) {
                    alert('ok');     // <=================== not work(itemtaphold, itemsingletap, itemdoubletap all not work)
                }
            }
        },
        initialize: function(dataview, eOpts) {
            var config = this.config,
                custom = config.custom;
    
    
            this.setItemConfig({
                custom: custom
            });
    
    
            this.setPadding(custom.paddingTop + ' ' + custom.paddingRight + ' ' + custom.paddingBottom + ' ' + custom.paddingLeft);
    
    
            var height = custom.imageHeight + custom.marginTop + custom.marginBottom;
            if (custom.useTitle) {
                height += 24;
            }
            this.setHeight(height);
    
    
            this.callParent(arguments);
        }
    });

    My DataItem
    Code:
    Ext.define('News.view.component.LineDataItem', {
        extend: 'Ext.dataview.component.DataItem',
        xtype: 'linedataitem',
    
    
        requires: [
            'Ext.Img',
            'Ext.Label'
        ],
    
    
        config: {
            layout: 'hbox',
            width: 'auto',
            docked: 'left',
            margin: 5,
            custom: {
                marginTop: 5,
                marginRight: 5,
                marginBottom: 5,
                marginLeft: 5,
                imageWidth: 80,
                imageHeight: 80,
                useTitle: true,
                showWholeTitle: false
            },
            items: [{
                xtype: 'image',
                docked: 'top',
                margin: '0 auto',
                width: 80,
                height: 80
            }, {
                xtype: 'label',
                padding: '5 0',
                margin: '0 auto',
                height: 24,
                style: {
                    'max-width': '100%',
                    'overflow': 'hidden',
                    'white-space': 'nowrap',
                    'text-align': 'center',
                    'font-size': '14px',
                    'line-height': '1'
                }
            }]
        },
        initialize: function() {
            var config = this.config,
                custom = config.custom;
    
    
            this.setMargin(custom.marginTop + ' ' + custom.marginRight + ' ' + custom.marginBottom + ' ' + custom.marginLeft);
    
    
            var image = this.down('image');
            image.setWidth(custom.imageWidth);
            image.setHeight(custom.imageHeight);
    
    
            this.callParent(arguments);
        },
        updateRecord: function(record) {
            var config = this.config,
                custom = config.custom;
    
    
    
    
            var image = this.down('image');
            if (this.checkFileExist(record.get('image'))) {
                image.setSrc(record.get('image'));
            }
    
    
    
    
            var label = this.down('label');
            if (custom.useTitle && record.get('title')) {
                if (!custom.showWholeTitle) {
                    label.setWidth(image.getWidth());
                }
                label.setHtml(record.get('title'));
            } else {
                label.setHidden(true);
            }
    
    
            this.callParent(arguments);
        },
        checkFileExist: function(filename) {
            return true;
        }
    });

    ======================================================================


    when use itemTpl, itemTap is work! what happened?


    My DataView
    Code:
    ...
        config: {
            //useComponents: true,     // <=================== is false, not use my linedataitem
            //defaultType: 'linedataitem',
            autoDestroy: false,
            height: 114,
            padding: 5,
            store: null,
            itemTpl:'<img src="{image}" style="display:block;margin:0 auto;"><span>{title}</span>',
    ...

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Here's a thread that should help:
    https://www.sencha.com/forum/showthread.php?279891

Similar Threads

  1. Replies: 1
    Last Post: 22 Feb 2016, 10:01 AM
  2. [OPEN] List with useComponents:true dosen't fire the itemtap event
    By hosokaws in forum Sencha Touch 2.x: Bugs
    Replies: 3
    Last Post: 23 Jan 2013, 11:07 AM
  3. Replies: 2
    Last Post: 19 Nov 2012, 6:11 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •