Модель комплекса Senha Touch с XTemplate в списке - PullRequest
Новая
       13

Модель комплекса Senha Touch с XTemplate в списке

0 голосов
/ 30 октября 2011

Я анализирую относительно сложный файл JSON, но возникают проблемы при отображении его в списке.

Выдержка из (урезанной версии) JSON такова: 

{"root":[
  {
     "success":"true",
     "text":"Vecka 2, 14 januari 2011",
     "chart":[
        {
           "pbpl":"1",
           "arso":"JAY SMITH",
           "tit":"JAY SMITH",
           "labl":"COLUMBIA",
           "buyExt":[
              {
                 "storeId":"61002",
                 "buyPri":"100",
                 "buyURL":"http://clk.tradedoubler.com/click?p=46&a=1861394&url=http%3A%5C%5Ccdon.se%5Cmusik%5Csmith_jay%5Cjay_smith-13014585"
              },
              {
                 "storeId":"61010251",
                 "buyPri":"130",
                 "buyURL":"http://www.bengans.se/Product.aspx?skivkod=882785"
              },
           ]
        },
        {
           "pbpl":"2",
           "arso":"ROBYN",
           "tit":"BODY TALK PT.2",
           "labl":"KONICHIWA RECORDS",
           "buyExt":[
              {
                 "storeId":"61002",
                 "buyPri":"100",
                 "buyURL":"http://clk.tradedoubler.com/click?p=46&a=1861394&url=http%3A%5C%5Ccdon.se%5Cmusik%5Crobyn%5Cbody_talk_pt.2-11318544"
              },
              {
                 "storeId":"61010251",
                 "buyPri":"130",
                 "buyURL":"http://www.bengans.se/Product.aspx?skivkod=870725"
              },
           ]
        },
        ...

Это модель: 

Ext.regModel('Chart', {
    fields: [
        {name: 'text', type: 'string'},
        {name: 'chart', fields: [
            {name: 'arso', type: 'string'},
            {name: 'tit', type: 'string'},
            {name: 'pbpl', type: 'integer'}
        ]}
    ]
});

Шаблон, который я использую, таков: 

app.chartItemTpl = new Ext.XTemplate(
    '<tpl for="chart">',
    '   <div class="thumb-wrap chart_row" id="{#}">',
    '       <table>',
    '           <tr>',
    '               <td class="chart_pbpl">{#}</td>',
    '               <td class="chart_album">',
    '                   <span class="arso">{arso}</span><br />',
    '                   <span class="tit">{tit}</span><br />',
    '               </td>',
    '           </tr>',
    '       </table>',
    '   </div>',
    '   <div style="clear: both"></div>',
    '</tpl>'
);

Проблема в том, что не создается элемент для каждой записи "диаграммы". Вместо этого он создает только один элемент списка, но зацикливает записи «диаграммы» внутри него, создавая огромный единственный элемент.

Магазин это: 

Ext.regStore('ChartsStore', {
    model: 'Chart',
    proxy: {
        type: 'scripttag',
        reader: {
            type: 'json',
            root: 'root'
        }
    },
    getGroupString: function (record) {
        if (record && record.data.text) {
            return record.get('text');
        } else {
            return 'No description';
        }
    }
});

Кто-нибудь знает, как это исправить? Спасибо, Arttie

Ответы [ 2 ]

0 голосов
/ 07 ноября 2013

Примечание: Мой ответ основан на Sencha Touch 2.3.0.

То, что вы пытаетесь сделать здесь, выглядит немного запутанным. Обычно вы устанавливаете rootProperty (не root) на reader вашего proxie, который указывает на объект внутри вашего JSON, который содержит все объекты, которые будут помещены в список, или, в другом слова, чтобы перебрать. В этом случае что-то вроде rootProperty: 'root[0].charts', учитывая, что вы не используете поле text, которое находится вне объекта charts в вашем JSON.

Тогда ваша модель будет выглядеть примерно так, учитывая, что вам нужны arso и tit. Вы можете использовать pbpl для замены значения #, поскольку вашему XTemplate не понадобится цикл. 

Ext.regModel('Chart', {
    fields: [
        "pbpl",
        "arso",
        "tit",
       ]
    ]
});

Ваш XTemplate будет: 

app.chartItemTpl = new Ext.XTemplate([
    '   <div class="thumb-wrap chart_row" id="{pbpl}">',
    '       <table>',
    '           <tr>',
    '               <td class="chart_pbpl">{pbpl}</td>',
    '               <td class="chart_album">',
    '                   <span class="arso">{arso}</span><br />',
    '                   <span class="tit">{tit}</span><br />',
    '               </td>',
    '           </tr>',
    '       </table>',
    '   </div>',
    '   <div style="clear: both"></div>'].join();
);

Посмотрите, как я создал массив и использовал метод array.join(), чтобы объединить все в одну строку.

И ваш магазин будет: 

Ext.regStore('ChartsStore', {
    model: 'Chart',
    proxy: {
        type: 'json',
        reader: {
            type: 'json',
            root: 'root[0].chart' // For some reason, root is an "array", that's why the "[0]". No sure if this works on Sencha Touch 2.3.0.
        }
    },
    getGroupString: function (record) {
        if (record && record.data.text) {
            return record.get('text');
        } else {
            return 'No description';
        }
    }
});

Я изменил proxy type на json, так как не смог найти тип scripttag в документации Sencha Touch 2.3.

Я знаю, что это довольно старый вопрос, но мне хотелось на него ответить.

0 голосов
/ 30 октября 2011

Поскольку это Список, вам необходимо предоставить Шаблон для одного отдельного элемента списка, а не для всего списка, то есть не для циклического прохождения всех элементов диаграммы, только шаблон для одного такого элемента. Если хранилище вашего списка настроено правильно, просто удалите '<tpl for="chart">' и '</tpl>', и шаблон будет работать. Сам список применяет циклический просмотр своих элементов.

...