Sencha Touch добавить переменные в шаблоны / список / и т. д. - PullRequest
Новая
       18

Sencha Touch добавить переменные в шаблоны / список / и т. д.

4 голосов
/ 16 ноября 2011

Оглядываясь вокруг, я не нашел решения для Sencha Touch (хотя мне удалось заставить это работать с ExtJS), поэтому я обращаюсь к вам.

Новое в прикосновении к Сенче. Я узнал, как правильно связать stor с компонентом List.

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

Моя запись coordinate выглядит так: 

2.356095,48.879154,0.000000

С ExtJS я создал функцию, которая разделяет его и отображает ссылку на GMaps.

Мои вопросы:

Могу ли я получить доступ к своей записи, как в extJS (record.data.coordinates)?

Как добавить новые переменные для использования в itemTpl? 

MyAPP = new Ext.Application({
    name: 'ListDemo',
    launch: function() {

        MyAPP.listPanel = new Ext.List({
            id: 'indexlist',
            store: MyAPP.ListStore,
            itemTpl: '<div>{name}<br>{coordinates}</div>'

        }); // end of MyAPP.listPanel

        function renderMap(value, p, record) {
            var split = record.data.coordinates.split(',');
            var lat = split[0];
            var lon = split[1];
            return Ext.String.format(
                '<b><a href="http://maps.google.com/maps?q={2}+{1}+({3})" target="_blank">Google Map</a>',
                value,
                lat,
                lon,
                record.data.Adresse
            );
        }
    }
});

Спасибо за помощь,

Julius.

Ответы [ 2 ]

4 голосов
/ 16 ноября 2011

Вы можете иметь встроенный код JavaScript в своем шаблоне, который разделит переменную координат. Вот пример из документации: 

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
        '{name}',
        '</div>',
    '</tpl></p>'
 );

Обратите внимание, как обрабатывается values.company.toUpperCase(). Таким образом, чтобы добраться до вашей переменной вы можете сделать values.coordinates.

Другое решение - использовать функцию-член шаблона. Вот еще один пример из документов sencha. 

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="this.isGirl(name)">',
            '<p>Girl: {name} - {age}</p>',
        '</tpl>',
         // use opposite if statement to simulate 'else' processing:
        '<tpl if="this.isGirl(name) == false">',
            '<p>Boy: {name} - {age}</p>',
        '</tpl>',
        '<tpl if="this.isBaby(age)">',
            '<p>{name} is a baby!</p>',
        '</tpl>',
    '</tpl></p>',
    {
        // XTemplate configuration:
        compiled: true,
        // member functions:
        isGirl: function(name){
           return name == 'Sara Grace';
        },
        isBaby: function(age){
           return age < 1;
        }
    }
);

Проверьте документы здесь http://docs.sencha.com/touch/1-1/#!/api/Ext.XTemplate, если вам нужна дополнительная помощь.

Определите объект tpl перед этим кодом. 

 MyAPP.listPanel = new Ext.List({
        id: 'indexlist',
        store: MyAPP.ListStore,
        itemTpl: tpl  // use the tpl object like this

    });
0 голосов
/ 16 ноября 2011

Поскольку вы упомянули, что знаете, как заставить его работать в ExtJS, я предполагаю, что вы знаете функциональность Ext.XTemplate. Итак, для itemTpl просто используйте XTemplate. Примерно так: 

var tpl = new Ext.XTemplate('<div>{name}<br>{coordinates}</div>', {
               // XTemplate methods here
          });

И используйте этот tpl в itemTPl: 

MyAPP.listPanel = new Ext.List({
        id: 'indexlist',
        store: MyAPP.ListStore,
        itemTpl: tpl
    });
...