Макет списка Sencha Touch 2 с панелью инструментов - PullRequest
Новая
       34

Макет списка Sencha Touch 2 с панелью инструментов

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

У меня есть список, который я использую с панелью инструментов, прикрепленной к вершине. Этот список также содержит indexBar. Панель инструментов, кажется, толкает список вниз. Поэтому indexBar не выровнен по вертикали, и когда я прокручиваю список вниз и дохожу до последнего элемента, он не отображается должным образом. Кто-нибудь знает, как правильно расположить это, чтобы панель инструментов не выдвигала список вниз? Вот мой код: 

app.customerList = Ext.define('CustomerList', {
    constructor: function() {        
        this.listComponent = Ext.create('Ext.List', {
            itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>',
            store: customerListStore,
            id: 'customer_list',
            grouped: true,
            indexBar: true,
            listeners: {
                itemtap: {
                    fn: function (list, index, item, evt) {

                    },
                    element: 'element'
                }
            }
        });

        this.listWrapper = Ext.create('Ext.Panel', {
            fullscreen: true,
            layout: 'fit',
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    title: 'Customers',
                    items: [
                        {
                            xtype: 'button',
                            text: 'Home',
                            ui: 'back',
                            listeners: {
                                tap: {
                                    fn: function() {

                                    },
                                    element: 'element'
                                }
                            }                            
                        }
                    ]
                },
                this.listComponent
            ]
        });

    }
});

Как видите, я получаю свои данные из магазина. Я смог исправить это на iPhone, дав списку css правило дна: 38px, но я знаю, что это хак, поэтому я бы предпочел не делать этого так. Я смотрел видео Sencha в списках, и они говорят об этой точной дилемме. Их решение состоит в том, чтобы поместить список в оболочку с закрепленной в ней панелью инструментов. Я сделал это, но все еще не могу сделать так, как должен.

1 Ответ

3 голосов
/ 16 февраля 2012

Похоже, что это проблема вашего кода, а не ошибка в фреймворке.

Я собираюсь предположить, что вы хотите, чтобы конечный результат представлял собой прокручиваемый список, размер экрана, с панелью инструментов, прикрепленной к вершине.

Вот некоторые примечания о том, что вам нужно изменить, чтобы это произошло:

  1. При определении нового класса с помощьюExt.define, вам не нужно устанавливать его как ссылку (app.customerList в вашем случае), так как ссылка автоматически создается с использованием первой переданной строки.Итак, в вашем случае вы делаете это: 

    app.customerList = Ext.define('CustomerList', { ... });

    Однако вы должны просто сделать это: 

    Ext.define('app.customerList', { ... });

    После того как вы определили его, вы можете затем использовать этот класс везде, где вынапример, 

    `var view = Ext.create('app.customerList');

    Я также хотел бы отметить, что использование app.customerList - это не то, что Сенча предлагает вам сделать в отношении соглашений об именах, поэтому я советую вам взглянутьв их Руководстве по системам классов , когда у вас есть время прочитать, как следует называть вещи.

  2. Когда вы определяете класс, 99% времени вам нужнопродлить другой класс.В вашем случае вы должны расширить Ext. Container, так как мы хотим создать самый внешний компонент (который вы определили как this.listWrapper), который включает в себя список и закрепленную панель инструментов.

  3. При расширении класса в Sencha Touch не следует переопределять метод constructor, вместо этого следует использовать метод initialize.В этом методе мы будем добавлять закрепленную панель инструментов и наш список.Вот как это должно выглядеть: 

    initialize: function() {
    this.callParent();

    this.listComponent = Ext.create('Ext.List', {
        itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>',
        store: customerListStore,
        id: 'customer_list',
        grouped: true,
        indexBar: true,
        listeners: {
            itemtap: {
                fn: function (list, index, item, evt) {

                },
                element: 'element'
            }
        }
    });

    this.add([
        {
            xtype: 'toolbar',
            docked: 'top',
            title: 'Customers',
            items: [
                {
                    xtype: 'button',
                    text: 'Home',
                    ui: 'back',
                    listeners: {
                        tap: {
                            fn: function() {

                            },
                            element: 'element'
                        }
                    }
                }
            ]
        },
        this.listComponent
    ]);
}

    Из этого фрагмента следует запомнить несколько вещей:

    • Вам всегда необходимо вызвать родителякласс в initialize, так как родитель может делать некоторую логику, которая нам нужна.Вы можете сделать это, просто позвонив this.callParent();.
    • Сначала мы определим наш listComponent, который мы позже вставим в этот app.customerList контейнер.
    • Затем мы вызовем this.add смассив объектов.Этот метод вставит наши элементы в наш новый контейнерный класс, когда он будет инициализирован.Первый объект, который мы передаем, - это конфигурация для нашей панели инструментов, которая совпадает с вашим кодом.И как второй объект в массиве мы передаем listComponent.

  4. Мы хотим, чтобы список внутри нашего нового класса контейнера растянулся до размера нашего контейнера, поэтому мы можем сделать это, добавив layout конфигурацию fit вблок конфигурации нашего класса. 

    config: {
    layout: 'fit'
}

    Пожалуйста, помните, что этот блок конфигурации используется только при определении новых классов с использованием Ext.define.Если вы используете Ext.create или передаете новый компонент как объект (как мы это делали выше), вам не нужно помещать их в этот специальный объект.

  5. Наконец, вы делаетене нужно использовать конфигурацию fullscreen.Вместо этого мы можем просто создать экземпляр нашего нового класса и добавить его непосредственно в Ext.Viewport. 

    var customerList = Ext.create('CustomerList');
Ext.Viewport.add(customerList);

// add this point you can reference the listComponent without the customerList like this:
console.log(customerList.listComponent.getStore());

И окончательный код для вашего пользовательского класса: 

Ext.define('CustomerList', {
    extend: 'Ext.Container',

    config: {
        fullscreen: true,
        layout: 'fit'
    },

initialize: function() {
    this.callParent();

    this.listComponent = Ext.create('Ext.List', {
        itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>',
        store: customerListStore,
        id: 'customer_list',
        grouped: true,
        indexBar: true,
        listeners: {
            itemtap: {
                fn: function (list, index, item, evt) {

                },
                element: 'element'
            }
        }
    });

    this.add([
        {
            xtype: 'toolbar',
            docked: 'top',
            title: 'Customers',
            items: [
                {
                    xtype: 'button',
                    text: 'Home',
                    ui: 'back',
                    listeners: {
                        tap: {
                            fn: function() {

                            },
                            element: 'element'
                        }
                    }
                }
            ]
        },
        this.listComponent
    ]);
}
});

var customerList = Ext.create('CustomerList');
Ext.Viewport.add(customerList);

// add this point you can reference the listComponent without the customerList like this:
console.log(customerList.listComponent.getStore());

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

...