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
    ChrisWalker is on a distinguished road

      0  

    Default Dataview will not scroll horizontally if using components as dataitems

    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
    Last edited by ChrisWalker; 22 Jan 2013 at 7:52 AM. Reason: typo

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Vote Rating
    0
    ChrisWalker is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      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
    ChrisWalker is on a distinguished road

      0  

    Default


    Thanks- that did it!