Sencha "Панель карт + Просмотр данных" делает невозможной прокрутку - PullRequest
Новая
       21

Sencha "Панель карт + Просмотр данных" делает невозможной прокрутку

0 голосов
/ 12 февраля 2012

У меня проблема с прокруткой, которая сводит меня с ума. Это происходит только с макетом карты, и я попробовал каждую возможную комбинацию значений «прокрутки» без вашего успеха.

Вот моя ситуация:

  • У меня есть приложение с панелью вкладок, прикрепленной к Viewport
  • Внутри каждой вкладки мне нужна панель макета карты, чтобы я мог перемещаться по каждой вкладке независимо (каждая вкладка - это отдельный раздел)
  • Проблема в том, что прокрутка работает с простыми элементами, такими как html div, но если я пытаюсь получить Ext.DataView ИЛИ компонент Ext.List и выполнить прокрутку, он не работает должным образом
  • Забавная вещь: если я беру DataView (или List), немного двигаю мышь и пытаюсь прокрутить, это работает

Проект доступен для проверки: http://gaeti.com/scrollTest/

Код для проблемной карты здесь:

homeCardStart.js 

Ext.regModel('testModel', {
    fields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'birthday',
        type: 'string'
    }, {
        name: 'description',
        type: 'string'
    }]
});

var testStore = new Ext.data.Store({
    model: 'testModel',
    method: 'GET',
    proxy: {
        url: 'res/recSample.json',
        type: 'ajax',
        reader: {
            type: 'json',
            root: 'items',
            record: 'people',
        }
    }
});

var testData = new Ext.DataView({
    tpl: '<tpl for="."><div class="person">{name}<br>{birthday}<br>{description}</div></tpl></div>',
    store: testStore,
    itemSelector: 'div.person',
    scroll: false,
    width: 350,
    autoHeight: true,
    margin: 20,
    style: 'border:2px solid magenta'
});

testData.on('render', function () {
    testData.store.load();
}, this);

App.views.HomeCardStart = Ext.extend(Ext.Panel, {
    title: 'Home Start',
    iconCls: 'home',
    layout: 'vbox',
    scroll: 'vertical',
    style: 'background-color: silver',
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        title: 'Home Start'
    }],
    items: [{
        html: 'Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>',
        style: 'border:2px solid green',
        width: 350,
        autoHeight: true
    },
    testData]
});

Ext.reg('homeCardStart', App.views.HomeCardStart);

Viewport.js: 

App.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    tabBar: {
        dock: 'bottom',
        layout: {
            pack: 'center'
        }
    },
    id: 'mainTabPanel',
    defaults: {
        scroll: 'vertical'
    },
    items: [{
        xtype: 'homeCard',
        id: 'homeCard',
        cls: 'home'
    }, {
        title: 'Mais',
        iconCls: 'more'
    }, {
        title: 'Mais',
        iconCls: 'more'
    }, {
        title: 'Mais',
        iconCls: 'more'
    }, {
        title: 'Mais',
        iconCls: 'more'
    }]
});

HomeCard.js: 

App.views.HomeCard = Ext.extend(Ext.Panel, {
    title: 'Home',
    iconCls: 'home',
    layout: 'card',
    width: '100%',
    height: '100%',
    style: 'background-color: green;',


    items: [{
        xtype: 'homeCardStart'
    }, {
        xtype: 'panel',
        title: 'Another card',
        style: 'background-color: pink'
    }]
});


Ext.reg('homeCard', App.views.HomeCard);

Что может происходить? Это ошибка? Это происходит только с панелью карты (такая же ошибка возникает без панели главной вкладки снаружи)

Спасибо! Leo

1 Ответ

1 голос
/ 15 февраля 2012

Проблема в том, что вы вкладываете прокручиваемые панели.На панели вкладок вы устанавливаете defaults, чтобы всегда добавлять scroll к каждой карточке, а затем внутри этой карточки также можно прокручивать данные.

Чтобы устранить проблему, вы должны либо отключить прокруткуваш dataview, или удалите прокрутку на элементе вашей карты.Вы не можете иметь оба.

...