sencha touch將變量添加到模板/ List / etc.

Question

環顧四周，我找不到Sencha Touch的解決方案（雖然我設法讓這個與ExtJS合作）所以我轉向你。

Sencha touch的新手我學會了如何正確地將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
            );
        }
    }
});

謝謝你的幫助，

朱利葉斯。

Answer 1

您可以在模板中使用內聯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

    }); 

Answer 2

因為你提到你知道如何使它在ExtJS中工作，我假設你知道Ext.XTemplate的功能。 因此，對於itemTpl，只需使用XTemplate。 像這樣的東西：

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

並在itemTPl中使用此tpl：

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