Sencha Touch 2获取容器数据/动态存储

时间:2013-02-02 13:30:36

标签: javascript extjs extjs4 sencha-touch sencha-touch-2

我想动态获取容器数据。任何人都可以帮我动态显示容器项目。日期或商店网址可能是某个外部网页,我想使用MVC获取容器存储/日期。可以帮助我吗?

以下是我的代码

Ext.define('Mvcapp.view.LayoutList',{
extend: 'Ext.Container',
xtype: 'layoutlist',

config:{
        title: 'Layout',
        iconCls:'star',
        styleHtmlContent: true,
        items:[{
        data: [{
            fname: 'Stratton',
            lname: 'Sclavos',
            role: 'Executive Chairman'
        }, {
            fname: 'Michael',
            lname: 'Mullany',
            role: 'CEO'
        }, {
            fname: 'Ted',
            lname: 'Driscoll',
            role: 'Vice President Worldwide Sales'
        }, {
            fname: 'Abraham',
            lname: 'Elias',
            role: 'Chief Technical Officer'
        }, {
            fname: 'Jeff',
            lname: 'Hartley',
            role: 'Vice President of Services and Training'
        }, {
            fname: 'Adam',
            lname: 'Mishcon',
            role: 'Vice President of Operations'
        }, {
            fname: 'Judy',
            lname: 'Lin',
            role: 'Vice President of Engineering'
        }], // data
      tpl: '<tpl for="."><div style="float:left;width:300px;"><strong>{lname}</strong>, {fname} <em class="muted">({role})</em></div></tpl>'
      }]

}
});

1 个答案:

答案 0 :(得分:2)

您需要做的事情是,首先定义具有必填字段的模型。接下来创建一个商店并将模型配置设置为先前定义的。在定义商店时,您需要从sencha touch提供的各种代理中进行选择。如果您正在构建要为手机构建的应用程序,那么没有太多选择。您只需使用JsonP代理。

这就是我要做的事情 -

     var listitem=Ext.define('ListItem', {
        extend: 'Ext.data.Model',
        config: {
            fields: ['fname','lname','role']
        }
    });

    var store = Ext.create('Ext.data.Store', {
        model: listitem,
        autoLoad: true,
        proxy: {
            type: 'jsonp',
            url: 'http://localhost/json_feed_url.php',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        }
    });
    var myList = Ext.create('Ext.List', {
        styleHtmlContent:true,
        store:store,
        itemTpl:['<div style="float:left;width:300px;"><strong>{lname}</strong>, {fname} <em class="muted">({role})</em></div>']
    });
    Ext.Viewport.add(myList);

如您所见,我首先为我们的商店定义了模型。使用JsonP代理创建存储,并将其设置为自动加载。我还设置了阅读器,它将读取从服务器收到的响应并解析它。我现在不必再担心了,因为我只需要设置 rootPropery 即可。

接下来创建一个列表,并在其配置中分配先前定义的store。因此,无论何时运行这段代码,store都将从服务器获取数据并将其显示在列表中。猜猜那就是你想要的。

首先,只需将此内容放在launch的{​​{1}}方法中,就可以了。如果您想要PHP代码,请点击此处 -

app.js

我熟悉所有的PHP,但你可以使用任何适合你的东西。想法是一样的。 :d