使用Sencha Touch 2从JSON API加载单个记录

时间:2012-07-17 23:19:31

标签: json touch extjs sencha-touch-2

我很难理解Sencha Touch 2的架构。我发现即使是我在其他语言和框架中做的最基本的事情也令人难以置信的痛苦。

目前,我只想做一个标准的Master / Detail视图。我将商店加载到列表视图中,并希望单击每个列表项以在详细视图中滑动。由于我的初始列表视图可以包含很多项目,因此我只在控制器中使用此方法加载一些数据:

viewUserCommand: function(list, record) {
      // console.log(record);
      var profileStore = Ext.getStore("Profiles");
      profileStore.setProxy({
        url: 'http://localhost:8000/profile/' + record.data.user_id
      });
      profileStore.load();

      // console.log(profileStore);

      Ext.Viewport.animateActiveItem(Ext.getCmp('profileview'), this.slideLeftTransition);

    }

首先,修改每个tap事件的url属性似乎有点hacky。有没有办法在这些行中指定“this.id”或其他东西,然后将其传递给我的商店?或者是否需要将整个数据库表加载到对象中?

我可以从这个方法返回console.log,这正是我想要的。如何填充详细信息视图?我尝试过使用DataView组件,但它没有显示任何数据。 sencha网站上的例子相当稀疏,而且相对没有上下文。这意味着即使复制和粘贴他们的示例也可能会失败。 (我尝试使用Ext.modelMgr.getModel()的任何示例都失败了。)

我知道部分原因是这个框架是新的,我可能在我对它的理解中错过了一个巨大的漏洞,但有没有人有任何线索?

1 个答案:

答案 0 :(得分:0)

建议您查看文档,这是加载单个模型的示例:

http://docs.sencha.com/touch/2-0/#!/api/Ext.data.Model

Ext.define('User', {
    extend: 'Ext.data.Model',

    config: {
        fields: ['id', 'name', 'email'],
        proxy: {
            type: 'rest',
            url : '/users'
        }
    }
});

//get a reference to the User model class
var User = Ext.ModelManager.getModel('User');

//Uses the configured RestProxy to make a GET request to /users/123
User.load(123, {
    success: function(user) {
        console.log(user.getId()); //logs 123
    }
});