Question

I am having a horrible time understanding Sencha Touch 2’s architecture. I’m finding even the most basic things I do in other language and frameworks to be incredibly painful.

Currently, I just want to do a standard Master/Detail view. I load a store into a list view and would like to click on each list item to slide in a detail view. Since my initial list view can contain quite a lot of items, I’m only loading a little bit of the data with this method in my controller:

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

    }

First, modifying the url property for each tap event seems a bit hacky. Isn’t there a way to specify “this.id” or something along those lines, and then pass that to my store? Or would that require loading the entire DB table into an object?

I can console.log the return from this method and it’s exactly what I want. How do I populate the detail view? I’ve tried utilizing a DataView component, but it doesn’t show any data. The examples on sencha’s website are fairly sparse, and relatively contextless. That means that even copying and pasting their examples are likely to fail. (Any examples I’ve tried using Ext.modelMgr.getModel() have failed.)

I know it’s partly that this framework is new and I’m probably missing a huge gaping hole in my understanding of it, but does anyone have any clue?

Answer 1

Would suggest you check out the docs, there’s an example of loading a single model:

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