sencha touch 添加变量到模板/列表/等

发布于 2024-12-15 15:32:29 字数 1242 浏览 1 评论 0原文

环顾四周,我没有找到 Sencha Touch 的解决方案(虽然我设法使用 ExtJS 来解决这个问题),所以我向你求助。

Sencha touch 新手,我学会了如何正确地将 stor 绑定到 List 组件。

我的问题是我需要在将特定记录渲染为模板之前对其进行处理。

我的记录坐标是这样的:

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
            );
        }
    }
});

谢谢你的帮助,

朱利叶斯。

Looking around I found no solution for Sencha Touch (while I managed to get this working with ExtJS) so I am turning to you.

New to Sencha touch I learned how to correctly bind a stor to a List component.

My problem is that I need to work on a particular record before rending it to template.

My record coordinate is like this :

2.356095,48.879154,0.000000

With ExtJS I created a function that split it and render a link to GMaps.

My Questions :

Can I access my record as in extJS (record.data.coordinates) ?

How can I add new variables to use in 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
            );
        }
    }
});

Thanks for your help,

Julius.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

抱猫软卧 2024-12-22 15:32:31

您可以在模板中使用内联 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.cooperatives 操作。

另一个解决方案是使用模板成员函数。这是 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/如果您需要更多帮助,请触摸/1-1/#!/api/Ext.XTemplate

在此代码之前定义 tpl 对象。

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

    }); 

You can have inline javascript code in your template that will split the coordinates variable. Here is example from the docs:

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>'
 );

Notice how the values.company.toUpperCase() is handled. So to get to your variable you can do values.coordinates.

Another solution is to have a template member function. Here is another example from the sencha docs.

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;
        }
    }
);

Check the docs here http://docs.sencha.com/touch/1-1/#!/api/Ext.XTemplate if you need more help.

Define the tpl object before this code.

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

    }); 
糖果控 2024-12-22 15:32:31

因为您提到您知道如何使其在 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
    });

Because you mentioned you know how to make it work in ExtJS, I assume that you know the functionality of Ext.XTemplate. So, for itemTpl just use XTemplate. Something like this:

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

And use this tpl in itemTPl:

MyAPP.listPanel = new Ext.List({
        id: 'indexlist',
        store: MyAPP.ListStore,
        itemTpl: tpl
    });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文