Прикосновение Sencha входит в список в видимом контейнере

У меня есть представление, которое содержит несколько пунктов (этикетки, карусели, контейнер и т.д.) -

Ext.define('MyApp.view.MyView', {
    extend:'Ext.Panel',
    alias:'widget.view',
    requires:['Ext.Panel', 'Ext.carousel.Carousel'],
    config:{
        layout:'vbox',
        cls: 'detail',
        scrollable:{
            direction:'vertical'
        }
    },

    initialize:function() {
        var type = {
            xtype: 'label',
            id:'type',
            html:'Type'
        };

        var socialButton = {
            xtype:'label',
            id:'socialButton',
            html:'<div style="position: absolute; right: 0; top: 0px; background: #efefef; border: 1px solid #e5e5e5">' +
                '<div class="x-button social-button" btnType="fb_icon" style="background: #fff url(resources/images/appimages/facebook.png) no-repeat;"></div>' +
                '<div class="x-button social-button" btnType="twitter_icon" style="background: #fff url(resources/images/appimages/twitter.png) no-repeat;"></div>' +
                '<div class="x-button social-button" btnType="google_icon" style="background: #fff url(resources/images/appimages/google.png) no-repeat;"></div>' +
                '<div class="x-button social-button" btnType="linked_icon" style="background: #fff url(resources/images/appimages/linkedin.png) no-repeat;"></div>' +
                '</div>'
        };

        if (Ext.os.is.Phone) {
            socialButton = {
                xtype:'label',
                id:'socialButton',
                html:'<div style="position: absolute; right: 0; top: 0px; background: #efefef; border: 1px solid #e5e5e5">' +
                 '<div class="x-button social-button" btnType="fb_icon" style="background: #fff url(resources/images/appimages/facebook.png) 100% 50% no-repeat;"></div>' +
                 '<div class="x-button social-button" btnType="twitter_icon" style="background: #fff url(resources/images/appimages/twitter.png) 100% 50% no-repeat;"></div>' +
                 '<div class="x-button social-button" btnType="google_icon" style="background: #fff url(resources/images/appimages/google.png) 100% 50% no-repeat;"></div>' +
                 '<div class="x-button social-button" btnType="linked_icon" style="background: #fff url(resources/images/appimages/linkedin.png) 100% 50% no-repeat;"></div>' +
                 '</div>'
           };
        }

        var titleFont = Ext.os.is.Phone ? 0.7 : 1.2;
        var title = {
            xtype:'label',
            id:'title',
            html:'title',
            style:'font-size: ' + titleFont + 'em; font-weight: bold; color: #117BBE; margin-top: 10px;'
        };

        var wFont = Ext.os.is.Phone ? 7 : 8;
        var w = {
            xtype:'label',
            margin:'0 0 0 0',
            id:'w',
            html:'wwwww',
            style:'font-size: ' + wFont + 'pt; color: #117BBE;'
        };

        var tsFont = Ext.os.is.Phone ? 'font-size: 7pt;' : '';
        var ts = {
            xtype:'label',
            id:'ts',
            html:'tststst',
            style:'font-weight: bold;' + tsFont
        };

        var carousel = {
            xtype:'slideshow',
            id:'carousel',
            cls:'carousel',
            style: 'margin-top: 10px; margin-bottom: 5px;',
            height: '300px'
        };

        var imageCaption = {
            xtype:'label',
            id:'imageCaption',
            html:'Caption of the image',
            style:'font-size: 8pt; text-align: center;'
        };

        var mainPanel = {
            xtype: 'container',
            layout: 'vbox',
            items:[
                {
                    xtype: 'label',
                    id: 'body',
                    tpl: '{body}'
                },
                {
                    xtype: 'label',
                    id: 'analysis',
                    html: 'analysis'
                },
                {
                    xtype: 'toolbar',
                    title: 'Related'
                },
                {
                    xtype: 'list',   //this list is not visible
                    id: 'related',
                    itemTpl: '{title}',
                    listeners: {
                        select: {
                            scope: this,
                            fn: this.onRelatedSelect
                        },
                        painted: function (list) {
                            //alert(list.element.dom.offsetHeight);
                        }
                    }
                }
            ]
        };

        this.add([
            type,
            socialButton,
            title,
            w,
            ts,
            carousel,
            imageCaption,
            mainPanel
        ]);
        this.element.on(
        {
            swipe:{
                scope:this,
                element:'element',
                fn:this.onSwipe
            }
        });
    },

    onSwipe:function (event) {
        this.fireEvent('Swipped', event.direction);
    },

    onRelatedSelect:function (list, record) {
        return this.fireEvent('relatedSelected', record);
    }
});

Панель корня содержит mainPanel пункт, который в свою очередь содержит несколько других компонентов (этикетки и список).

Проблема со списком, который является в mainPanel . То, когда представление предоставлено, никакие пункты списка видимо (вероятно, из-за его высоты является нолем), даже если у списка есть пункты. После принуждения один пиксель высотой (например, 200 пкс) с высота конфигурация список видим, но высота должна быть достаточно динамичной так, чтобы, даже если список содержит 10 элементов, все они видимы.

Как я фиксирую это?

РЕДАКТИРУЮТ

Here is a demo on SenchaFiddle.

1
nl ja de
@MCL: Добавленный ссылка. Спасибо за напоминание мне.
добавлено автор MD Sayem Ahmed, источник
Вы могли обеспечить рабочий пример на senchafiddle?
добавлено автор MCL, источник

1 ответы

Я думаю, что просто необходимо добавить высоту: "автомобиль" к вашему списку

Отредактируйте:

Добавьте scrollable:false к вашему списку также

Demo: http://www.senchafiddle.com/#yyCVE#GNEuj#1aEQr

5
добавлено
Сделал это, но didn' t удаются. Проверьте себя.
добавлено автор MD Sayem Ahmed, источник
Да, теперь это работает!
добавлено автор MD Sayem Ahmed, источник
Вы могли объяснить, что произошло здесь? Я didn' t понимают, почему урегулирование прокручиваемый к ложному показал пункты списка.
добавлено автор MD Sayem Ahmed, источник
@SayemAhmed Видят, что мой редактировать
добавлено автор Eli, источник
Поскольку, когда вы устанавливаете высоту: "автомобиль" к вашему списку означает, что все пункты списка, всегда видимые и не способная завиться больше, так как, ваша конфигурация по умолчанию для этого списка прокручиваемый: верный , таким образом, это получит конфликт и неспособный показать ваш список
добавлено автор Eli, источник
набор высота: ' 100%' вместо высота: "автомобиль" для него, чтобы работать в СВ. 2.1.1
добавлено автор Linkmichiel, источник
это не работает в СВ. 2.1.1
добавлено автор handet87, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском