Динамически загружаемый список в sencha touch 2 - PullRequest
Новая
       2

Динамически загружаемый список в sencha touch 2

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

У меня есть приложение Sencha Touch 2.0, которое настроено на макет карты. Он содержит панель инструментов со значками, на которые пользователь может щелкнуть, и список клиентов (xtype: 'list'). Когда приложение загружено, я загружаю все «карточки» в приложение, включая Список клиентов, но я не загружаю данные (через прокси), если не установлена ​​переменная localStorage. После того, как все загружено, я проверяю, должен ли пользователь автоматически войти в систему, проверив переменную localStorage. Если они автоматически вошли в систему, то мое приложение работает отлично. Если нет, я показываю им карточку «логин», которая в основном представляет собой форму логина. Как только они отправляют эту форму регистрации, я выполняю ajax-вызов. Если все возвращается правильно, я отправляю их на карточку «приборной панели». Но перед этим я пытаюсь загрузить список клиентов с помощью вызова ajax, используя: 

var tmpId = { id: example.id };

var cListStore = Ext.create('example.store.CustomerList');
cListStore.getProxy().setExtraParams(tmpid);
cListStore.load();

С помощью приведенного выше кода я вижу, что мой прокси-вызов происходит, и я вижу, что ответ правильный. Однако, когда я вижу панель управления и нажимаю на значок «Клиенты», я вижу пустой список. Моя панель инструментов есть, и даже indexBar в моем списке есть, просто нет данных. Я не уверен, что я делаю не так здесь. Я включаю мой список, магазин и модель ниже, надеюсь, это поможет всем, кто смотрит на это: 

Ext.define('example.view.CustomerList', {
    extend: 'Ext.Container',
    id: 'customerListContainer',
    xtype: 'customerlist',
    config: {
        layout: 'fit',
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            title: 'Customers',
            items: [{
                xtype: 'button',
                text: 'Home',
                id: 'customerListHomeButton',
                ui: 'back'
            }]
        }, {
            xtype: 'list',
            itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong>  </div>',
            store: 'CustomerList',
            id: 'customer_list',
            grouped: true,
            indexBar: true
        }]
    }
});

Ext.define('example.store.CustomerList', {
    extend: 'Ext.data.Store',
    id: 'customerListStore',
    requires: ['example.model.CustomerList'],
    config: {
        model: 'example.model.CustomerList',
        sorters: 'last_name',
        /*
         * This actually makes the ajax request
         */
        proxy: {
            type: 'ajax',
            url: '/example/api/customerList.php',
            extraParams: {
                id: example.id
            },
            reader: {
                type: 'json'
            }
        },
        autoLoad: ((example.id > 0) ? true : false), //only fetch the data if we have a id, or else we'll get an error from our api

        /*
         * Set the group headers to the first letter of the last name
         */
        grouper: {
            groupFn: function (record) {
                return record.get('last_name')[0];
            }
        }
    }
});

Ext.define('example.model.CustomerList', {
    extend: 'Ext.data.Model',
    config: {
        /*
         * Define the fields we get back from our ajax request
         */
        fields: [
            'first_name',
            'last_name',
            'address1',
            'address2',
            'city',
            'state',
            'zip_code',
            'phone_daytime',
            'phone_evening',
            'phone_cell',
            'email']
    }
});

Я также попытался поместить storeId в хранилище списка клиентов, а затем использовать следующий код вместо вызова Ext.create (): 

Ext.StoreManager.get('storeid').load()

Это дало те же результаты. Я мог видеть, что прокси-сервер правильно выбирает данные, но он все еще рендерится в моем компоненте списка.

Ответы [ 2 ]

5 голосов
/ 22 февраля 2012

Я понял, я удалил эти строки: 

var cListStore = Ext.create('example.store.CustomerList');
cListStore.getProxy().setExtraParams(tmpid);
cListStore.load();

и добавил на его место следующее: 

Ext.getStore('CustomerList').getProxy().setExtraParams(tmpid);
Ext.getStore('CustomerList').load();

В принципе мне не нужно было создавать новыйэкземпляр моего магазина, один уже был создан, поэтому мне просто нужен был способ идентифицировать его (Ext.getStore) и затем загрузить его.Спасибо всем, кто заглянул в него.

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

Я не эксперт в Sencha Touch 2, но вижу, что вы установили свой магазин списков на 

store: 'CustomerList'

И мне интересно, что такое CustomerList. Разве вы не должны установить хранилище списка на customerListStore, который является идентификатором вашего магазина?

...