Sencha Touch List «прилипает», когда в панели с другими элементами - PullRequest
Новая
       1

Sencha Touch List «прилипает», когда в панели с другими элементами

0 голосов
/ 21 марта 2011

У меня есть панель, на которой я хотел бы иметь некоторые другие элементы и список. Когда у меня есть список на родительской панели сам по себе, список работает правильно. Однако, когда я добавляю другой элемент на родительскую панель, список теперь не будет прокручиваться вниз (он больше не ограничен размером экрана).

Вот как бы я хотел, чтобы мой макет был: 

      Viewport
|--------------------|
|    Revenue Panel   |
|--------------------|
|     EventList      |
|                    |
|--------------------|

Хотя список, похоже, обрабатывается за пределами экрана для всех данных в его хранилище.

Вот что у меня есть на мой взгляд:

DashboardIndex.js 

shopifymobile.views.DashboardIndex = Ext.extend(Ext.Panel, {
    dockedItems: [
        {
            xtype: 'toolbar',
            title: 'SHOP NAME',
            dock: 'top',
            defaults: {
                iconMask: true,
                ui: 'plain'
            },
            items: [
                {xtype: 'spacer'},
                {
                    iconCls: 'refresh',
                    listeners: {
                        'tap' : function(){
                            shopifymobile.stores.onlineEventStore.load();
                        }
                    }
                }
            ]
        }
    ],
    layout: 'fit',
    fullscreen: true,
});

Revenue.js 

shopifymobile.views.RevenuePanel = Ext.extend(Ext.Panel, {
    styleHtmlContent: true,
    flex: 1,
    items: [
        {
            tpl: [
            '<div class="revenuepanel">',
                '<div id="revenuedata">',
                    '<h3 class="label">TODAY\'S REVENUE</h3>',
                    '<p>{revenue}</p>',
                '</div>',
                '<div id="orderdata">',
                    '<div id="orders">',
                        '<p><span class="label">ORDERS</span>{count}</p>',
                    '</div>',
                    '<div id="items">',
                        '<p><span class="label">ITEMS</span>{items}</p>',
                    '</div>',
                '</div>',
            '</div>'
            ],
        }
    ],
    updateWithRecord: function(record){
        Ext.each(this.items.items, function(item){
            item.update(record.data);
        });
    },
    //*************HACK FIXME***********************
    fetchStoreData: function(){
        var store = shopifymobile.stores.onlineProductStore;
        this.updateWithRecord(store.getAt(0));
        store.removeListener('load', this.fetchStoreData);
    },
    initComponent: function(){
        shopifymobile.stores.onlineProductStore.addListener('load', this.fetchStoreData, this);
        shopifymobile.stores.onlineProductStore.load();
        shopifymobile.views.RevenuePanel.superclass.initComponent.apply(this, arguments);
    }
});

EventList.js 

shopifymobile.views.EventList = Ext.extend(Ext.Panel, {
    layout: 'fit',
    items: [
        {
            id: 'eventList',
            xtype: 'list',
            store: shopifymobile.stores.onlineEventStore,
            itemTpl: [
                '<div class="eventitem">',
                    '<div id="eventdata">',
                        '<ul>',
                            '<li>New {verb}</li>',
                            '<li>{message}</li>',
                        '<ul>',
                    '</div>',
                    '<div id="eventtime">',
                        '<p>{created_at}</p>',
                    '</div>',
                '</div>'
            ]
        },
    ],
    initComponent: function(){
        shopifymobile.views.OrderList.superclass.initComponent.apply(this, arguments);
    }
});

Когда я инициализирую свой Viewport, я добавляю новый объект RevenuePanel и Eventlist в объект dashboardIndex: 

    shopifymobile.views.dashboardIndex.add(new shopifymobile.views.RevenuePanel());
    shopifymobile.views.dashboardIndex.add(new shopifymobile.views.EventList());

Единственный способ заставить список работать несколько - это установить его в полноэкранный режим, но, поскольку у меня есть панель инструментов внизу экрана, последний элемент перекрывается им.

1 Ответ

1 голос
/ 28 марта 2011

Способ, которым я это сделал, заключается в том, чтобы встроить список в панель, и на этой панели следует использовать layout: fit. Я также должен был указать ширину: 100% в содержащей панели, но это может варьироваться в зависимости от вашего конкретного случая. Вот что я сделал - обратите внимание, что я также использую DataVIew, а не Panel в качестве базы списка, но это должно работать в любом случае. 

        var panel = new Ext.Panel({
        flex: 1,
        frame:true,
        autoHeight: true,
        collapsible: true,
        width: '100%',
        layout: 'fit',
        items: [
            new Ext.DataView({.....} ) ] } );
...