1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    9
    Answers
    1
    Vote Rating
    0
    cacko is on a distinguished road

      0  

    Default Answered: DataView, DataItem pack: top problem

    Answered: DataView, DataItem pack: top problem


    Hi,

    I've been trying to create a DataView with inline DataItems, which has vbox layout, but somehow cannot position the items to be on top

    this is the main thing
    Code:
    Ext.define('App.view.main.Index', {
        extend: 'Ext.Panel',
        requires: ['Ext.dataview.DataView', 'Ext.layout.Fit', 'App.view.main.FrontItem'],
        xtype: 'mainIndex',
        config: {
            scrollable: 'vertical',
            layout: 'fit',
            items: [
                {
                    xtype: 'dataview',
                    store: 'Front',
                    useComponents: true,
                    defaultType: 'frontItem',
                    inline: true
                }
            ]
    
    
        }
    });
    and the item
    Code:
    Ext.define('App.view.main.FrontItem', {
        extend: 'Ext.dataview.component.DataItem',
        requires: ['Ext.Img'],
        xtype: 'frontItem',
        config: {
            cls: 'frontItem',
            image: true,
            name: {
                cls: 'x-name'
            },
            width: 155,
            minHeight: 100,
            padding: '0.35em',
            layout: {
                type: 'vbox',
                pack: 'top',
                align: 'top'
            },
            dataMap: {
                getImage: {
                    setSrc: 'image'
                },
                getName: {
                    setHtml: 'event_name'
                }
            }
        },
        applyImage: function (config) {
            return Ext.factory(config, Ext.Img, this.getImage());
        },
        updateImage: function (newImage, oldImage) {
            if (newImage) {
                this.add(newImage);
            }
            if (oldImage) {
                this.remove(oldImage);
            }
        },
        applyName: function (config) {
            return Ext.factory(config, Ext.Component, this.getName());
        },
        updateName: function (newImage, oldImage) {
            if (newImage) {
                this.add(newImage);
            }
    
    
            if (oldImage) {
                this.remove(oldImage);
            }
        },
    });
    here's the screenshot

    Screen Shot 2013-03-30 at 11.33.44.png

    any ideas how to make this aligned correctly is welcomed,

    Thanks,

  2. fixed it by removing inline: true from the dataview and hacking the component class via css to be float: left, it's not how I imagined inline dataview to work, but I guess I'll have to live with it.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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


    Try 'start' instead of 'top'
    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.

  4. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    9
    Answers
    1
    Vote Rating
    0
    cacko is on a distinguished road

      0  

    Default


    fixed it by removing inline: true from the dataview and hacking the component class via css to be float: left, it's not how I imagined inline dataview to work, but I guess I'll have to live with it.

Thread Participants: 1