sencha touch :: список неправильно прокручивается - PullRequest
2 голосов
/ 26 мая 2011

следующий код кажется неполным или я что-то не так делаю? проблема в том, что список не прокручивается вправо.

Ext.ns('simfla.ux.plugins.demo');

Ext.regModel('Contact', {
    fields: ['firstName', 'lastName']
});

simfla.ux.plugins.demo.store = new Ext.data.Store({
    model: 'Contact',
    sorters: 'firstName',

    data: [
        {firstName: 'Tommy', lastName: 'Maintz'},
        {firstName: 'Ed', lastName: 'Spencer'},
        {firstName: 'Jamie', lastName: 'Avins'},
        {firstName: 'Aaron', lastName: 'Conran'},
        {firstName: 'Dave', lastName: 'Kaneda'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Tommy', lastName: 'Maintz'},
        {firstName: 'Ed', lastName: 'Spencer'},
        {firstName: 'Jamie', lastName: 'Avins'},
        {firstName: 'Aaron', lastName: 'Conran'},
        {firstName: 'Dave', lastName: 'Kaneda'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Tommy', lastName: 'Maintz'},
        {firstName: 'Ed', lastName: 'Spencer'},
        {firstName: 'Jamie', lastName: 'Avins'},
        {firstName: 'Aaron', lastName: 'Conran'},
        {firstName: 'Dave', lastName: 'Kaneda'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Tommy', lastName: 'Maintz'},
        {firstName: 'Ed', lastName: 'Spencer'},
        {firstName: 'Jamie', lastName: 'Avins'},
        {firstName: 'Aaron', lastName: 'Conran'},
        {firstName: 'Dave', lastName: 'Kaneda'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Jay', lastName: 'Robinson'}
    ]
})

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady : function() {
        var app =  new Ext.Panel({
            fullscreen: true,
            layout: 'fit',
            dockedItems:[{
                xtype: 'toolbar',
                title: 'EditableList Plugin',

            }],
            items: [
            {
                xtype: 'panel',
                title:'topPanel',
                items:{
                    xtype:'button',
                    cls: 'editChildBtn',
                    text: 'Einstellungen',
                    width: 150,
                    handler: function(){}
                }
            },
            {
                xtype: 'list',
                style: 'background-color: Transparent;',
                id: 'MyList',
                allowDeselect: true,
                clearSelectionOnDeactivate: true,
                //layout: 'fit',
                store: simfla.ux.plugins.demo.store,
                itemTpl: '{firstName} <strong>{lastName}</strong>',
                grouped: false,
                indexBar: false,
                singleSelect: true,
                }]
            });

    }
});

Спасибо за взгляд!

редактировать: не прокручивать вправо означает, что он переворачивается в исходное положение при отпускании рукоятки ...

Ответы [ 2 ]

4 голосов
/ 28 июня 2011

Я думаю, что проблема в том, что родительский контейнер не сможет определить высоту, которую должен иметь список, потому что есть два дочерних элемента, поэтому «подгонка» на самом деле не имеет смысла. Если вы измените компоновку родителя с подгонки на vbox, присвойте 'topPanel' фиксированную высоту, и список изгибается на 1, что оба ребенка должны заполнить экран.

var app =  new Ext.Panel({
        fullscreen: true,
        layout: {
           type: 'vbox',
           align: 'stretch'
        },
        dockedItems:[{
            xtype: 'toolbar',
            title: 'EditableList Plugin',

        }],
        items: [
        {
            xtype: 'panel',
            title:'topPanel',
            height: 50,
            items:{
                xtype:'button',
                cls: 'editChildBtn',
                text: 'Einstellungen',
                width: 150,
                handler: function(){}
            }
        },
        {
            xtype: 'list',
            flex: 1,
            style: 'background-color: Transparent;',
            id: 'MyList',
            allowDeselect: true,
            clearSelectionOnDeactivate: true,
            //layout: 'fit',
            store: simfla.ux.plugins.demo.store,
            itemTpl: '{firstName} <strong>{lastName}</strong>',
            grouped: false,
            indexBar: false,
            singleSelect: true,
            }]
        });
1 голос
/ 16 июля 2012

Придайте стиль 'padding-bottom' панели, которая окружает две панели.

В моем случае «100px» - лучший.

    Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady : function() {
        var app =  new Ext.Panel({
            fullscreen: true,
            layout: 'fit',
            style: 'padding-bottom:100px;',
            dockedItems:[{
                xtype: 'toolbar',
                title: 'EditableList Plugin',

            }],
            items: [
            {
                xtype: 'panel',
                title:'topPanel',
                items:{
                    xtype:'button',
                    cls: 'editChildBtn',
                    text: 'Einstellungen',
                    width: 150,
                    handler: function(){}
                }
            },
            {
                xtype: 'list',
                style: 'background-color: Transparent;',
                id: 'MyList',
                allowDeselect: true,
                clearSelectionOnDeactivate: true,
                //layout: 'fit',
                store: simfla.ux.plugins.demo.store,
                itemTpl: '{firstName} <strong>{lastName}</strong>',
                grouped: false,
                indexBar: false,
                singleSelect: true,
                }]
            });

    }
});
...