Results 1 to 7 of 7

Thread: Dataview will not scroll horizontally if using components as dataitems

Hybrid View

Previous Post Previous Post   Next Post Next Post
    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-3929 in a recent build.
  1. #1
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Vote Rating
    0
      0  

    Default Dataview will not scroll horizontally if using components as dataitems

    If I set the dataview to use inline wrap = false, the items will do as the documentation states for the dataview's inline config option (2.1.1 docs) if I use theitemTpl config option:
    "When set to true the items within the DataView will have their display set to inline-block and be arranged horizontally. By default the items will wrap to the width of the DataView. Passing an object with { wrap: false } will turn off this wrapping behavior and overflowed items will need to be scrolled to horizontally."

    Code:
    {
      xtype: 'dataview',
      flex: 1,
      defaultType: 'MonitorItem_Tablet',
      scrollable: 'horizontal',
      deferEmptyText: false,
      inline: {
        wrap: false
      },
       itemTpl: [
          '<div>{name}</div>'
       ],
      store: 'goodMonitorStore',
      useComponents: false


    SenchaArchitect2.PNG

    The overflowed monitors can be seen by scrolling horizontally.

    However if I switch this dataview to use components it appears to wrap the items:

    Code:
    { xtype: 'dataview',
     flex: 1,
    defaultType: 'MonitorItem_Tablet',
    scrollable: 'horizontal',
    deferEmptyText: false,
    inline: {
       wrap: false
    },
    itemTpl: [
        '<div>{name}</div>'
    ],
    store: 'goodMonitorStore',
    useComponents: true
    },


    SenchaArchitect1.PNG
    Attached Images Attached Images
    Last edited by ChrisWalker; 22 Jan 2013 at 7:52 AM. Reason: typo

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Vote Rating
    1271
      0  

    Default

    I'm going to open a bug. Here is a pretty good test case that shows this issue:

    Code:
    Ext.define('MyApp.view.DataItem', {
        extend : 'Ext.dataview.component.DataItem',
        xtype  : 'myapp-dataitem',
    
        config : {
            text    : {
                cls  : 'text-item'
            },
            dataMap : {
                getText : {
                    setHtml : 'text'
                }
            }
        },
    
        applyText : function(text) {
            return Ext.factory(text, Ext.Component, this.getText());
        },
    
        updateText : function(text) {
            if (text) {
                this.add(text);
            }
        }
    });
    
    Ext.application({
        name : 'MyApp',
    
        viewport : {
            layout : {
                type  : 'vbox',
                align : 'stretch'
            }
        },
    
        launch : function () {
    
            Ext.Viewport.add([
                {
                    xtype      : 'dataview',
                    flex       : 1,
                    inline     : {
                        wrap : false
                    },
                    scrollable : 'horizontal',
                    itemTpl    : '<div class="text-item">{text}</div>',
                    store      : {
                        fields : ['text'],
                        data   : [
                            { text : 'One'   },
                            { text : 'Two'   },
                            { text : 'Three' },
                            { text : 'Four'  },
                            { text : 'Five'  },
                            { text : 'Six'   },
                            { text : 'Seven' },
                            { text : 'Eight' },
                            { text : 'Nine'  },
                            { text : 'Ten'   }
                        ]
                    },
                    items      : [
                        {
                            xtype  : 'toolbar',
                            docked : 'top',
                            title  : 'Using itemTpl (correct behavior)'
                        }
                    ]
                },
                {
                    xtype         : 'dataview',
                    flex          : 1,
                    defaultType   : 'myapp-dataitem',
                    scrollable    : 'horizontal',
                    useComponents : true,
                    inline        : {
                        wrap : false
                    },
                    store         : {
                        fields : ['text'],
                        data   : [
                            { text : 'One'   },
                            { text : 'Two'   },
                            { text : 'Three' },
                            { text : 'Four'  },
                            { text : 'Five'  },
                            { text : 'Six'   },
                            { text : 'Seven' },
                            { text : 'Eight' },
                            { text : 'Nine'  },
                            { text : 'Ten'   }
                        ]
                    },
                    items         : [
                        {
                            xtype  : 'toolbar',
                            docked : 'top',
                            title  : 'Using Components (incorrect behavior'
                        }
                    ]
                }
            ]);
    
        }
    });
    CSS:

    Code:
    .text-item {
        width  : 200px;
        height : 200px;
        border : 1px solid #000;
        margin : 1em;
    }
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Vote Rating
    0
      0  

    Default

    Thanks Mitchell.
    Is there a way to track this bug? I can open a support ticket if that would help.

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Vote Rating
    1271
      0  

    Default

    It's actually better to track on the forums. As you can see at the top you have the status [OPEN], the bug number. When it gets resolved, it should also send a PM.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    2 Things to make this work:

    1) Set the width to null on your dataItem (defaults to 100%)

    2) Add this CSS in (this will be in the next release):

    Code:
    .x-dataview-nowrap {
        .x-container.x-dataview {
            white-space: nowrap !important;
        }
    }

    Sencha Inc

    Jamie Avins

    @jamieavins

  6. #6
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Vote Rating
    0
      0  

    Default

    Thanks- that did it!

  7. #7
    Sencha User
    Join Date
    Jan 2015
    Posts
    18
    Vote Rating
    0
      0  

    Default

    Can someone confirm that the fix solved the issue ? It is still not working for me .. Using touch 2.4.1

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
  •