SC1.6 & Sencha Touch 1.1

base_model.js

CORE360_PROPERTIES_TO_IGNORE = [ 'json_encodable', 'ext_data', 'attributes', 'readOnlyAttributes' ];

Core360.Model = SC.Record.extend({

  ext_data: function() {
    var hash = SC.clone(this.get('attributes'));
    var property_keys = this.get('_properties');

    if (SC.none(hash) || SC.none(property_keys)) {
      return {};
    }

    var property_key = null;
    var property = null;

    for (var i = 0; i < property_keys.length; i++) {
      property_key = property_keys[i];

      if (!CORE360_PROPERTIES_TO_IGNORE.contains(property_key)) {
        property = this.get(property_key);

        hash[property_key] = this._convert_to_ext_data(property);
      }
    }

    return hash;
  }.property(),


  /*
   * Properly recurses over an object and gatheres all
   * ext_data available. If the leaf objects do not
   * respond to ext_data, the object itself is returned.
   */
  _convert_to_ext_data: function(obj) {
    var self = this;

    if (SC.none(obj)) {
      return obj;
    }

    /*
     * Check for an Enumerable
     */
    if (obj.forEach) {
      var newEnum = [];

      obj.forEach(function(o, i) {
        newEnum.pushObject(self._convert_to_ext_data(o));
      });

      return newEnum;
    }

    /*
     * Check to see if the object responds to ext_data()
     */
    if (obj.ext_data) {
      return obj.get('ext_data');
    } else {
      return obj;
    }

  }

});

core.js

Mobile360 = SC.Application.create(
  /** @scope Mobile360.prototype */ {

  NAMESPACE: 'Mobile360',
  VERSION: '0.1.0',

  States: {},

  currentSlideDirection: 'left',

  DEFAULT_SLIDE_ANIMATION: SC.Object.create({
    type: 'slide',

    directionBinding: 'Mobile360.currentSlideDirection'
  })
  
});

current_user_task_valid_completers_controller.js

Mobile360.currentUserTaskValidCompletersController = SC.ObjectController.create({
  contentBinding: 'Mobile360.currentUserTaskController.valid_completers',

  ext_store: new Ext.data.JsonStore({
    model: 'Member',

    data: []
  }),

  contentDidChange: function() {
    var ext_store = this.get('ext_store');
    var content = this.get('content');

    if (!SC.none(content)) {
      ext_store.loadData(content.getEach('ext_data'));
    }
  }.observes('*content.[]')

});

ext_view.js

Mobile360.ExtView = SC.Object.extend({

  /*
   * The Ext object created by this view. Subclasses should
   * override the +init()+ to create and set the object.
   */
  ext: null,

  init: function() {
    var panel = new Ext.Panel({
      html: 'override init() to change'
    });

    this.set('ext', panel);
  }

});

main.js

sc_require('states/statechart.js');

Mobile360.main = function main() {

  /*
   * Initialize our Statechart which handles the current state of the application
   */
  Mobile360.statechart.initStatechart();

};

function main() { Mobile360.main(); }

member.js

Core360.Member = Core360.Model.extend(
/** @scope Core360.Member.prototype */ {

  primaryKey: 'username',

  fullname: SC.Record.attr(String),
  email: SC.Record.attr(String),

  roles: SC.Record.attr(Array),

  json_encodable: function() {
    var member = SC.clone(this.get('attributes'));

    return member;
  }.property()

});


/*
 * Code specific to the mobile app
 */
if (typeof Ext !== "undefined") {
  Ext.regModel('Member', {
    fields: [
      'fullname',
      'email'
    ]
  });
}

startup_state.js

Mobile360.States.startup = Ki.State.design({

  initialSubstate: 'waitingForExt',

  waitingForExt: Ki.State.design({}),

  loading: Ki.State.plugin('Mobile360.States.loading'),
  checkCredentials: Ki.State.plugin('Mobile360.States.checkCredentials'),
  loggedIn: Ki.State.plugin('Mobile360.States.loggedIn'),

  enterState: function() {
    SC.RunLoop.begin();

    Mobile360.ExtApp = new Ext.Application({
      launch: function() {
        Mobile360.EXT_VIEWPORT = new Ext.Panel({
          fullscreen: true,

          layout: 'fit',

          cls: 'ts_app_container',

          items: []
        });

        this.viewport = Mobile360.EXT_VIEWPORT;

        Mobile360.statechart.sendAction('_ext_launched');
      }
    });

    SC.RunLoop.end();
  },

  exitState: function() {
  },

  _ext_launched: function() {
    this.gotoState('loading');
  }

});

statechart.js

Mobile360.statechart = SC.StatechartManager.create({

  trace: NO,

  rootState: Ki.State.design({

    initialSubstate: 'startup',

    startup: Ki.State.plugin('Mobile360.States.startup'),
    main: Ki.State.plugin('Mobile360.States.main'),

    startupFinished: function() {
      this.gotoState('main');
    }

  })

});

user_task_view.js

Mobile360.UserTaskDetailView = Mobile360.ExtView.extend({

  user_taskBinding: 'Mobile360.currentUserTaskController.content',

  _ext_heading: null,
  _ext_title: null,
  _ext_notes: null,
  _ext_list: null,
  _ext_panel: null,

  _ext_template: new Ext.XTemplate( SC.TEMPLATES['user_task_detail'].rawTemplate, Mobile360.Helpers ),

  init: function() {
    var sc_view = this;

    var heading = new Ext.Component({
      tpl: this.get('_ext_template')
    });

    var title = new Ext.Component({
      tpl: "<div class='description'>{description}</div>"
    });

    var list = new Ext.List({
      itemTpl: '{fullname}',

      scroll: false,

      store: Mobile360.currentUserTaskValidCompletersController.get('ext_store')

      // TODO: make this non-selectable
    });

    list.on('selectionchange', function(model, records) {
      /*
       * Disallow selections.
       *
       * TODO: This is a workaround since the 'beforeselect' event is
       *       never fired.
       */
      list.deselect(records);
    });

    var notes = new Ext.form.TextArea({
      disabled: true,

      value: 'no notes'
    });

    var panel = new Ext.form.FormPanel({
      cls: 'user_task_detail',

      scroll: 'vertical',

      dockedItems: [ heading ],

      items: [
        title,

        /*
        {
          xtype: 'fieldset',
          title: 'Can Be Completed By',

          items: [ list ] 
        }
        */

        {
          xtype: 'fieldset',
          title: 'Notes',

          items: [ notes ]
        }
      ]
    });

    this.set('_ext_heading', heading);
    this.set('_ext_title', title);
    this.set('_ext_notes', notes);

    this.set('_ext_list', list);
    this.set('_ext_panel', panel);

    this.set('ext', panel);
  },

  user_taskDidChange: function() {
    var user_task = this.get('user_task');

    var heading = this.get('_ext_heading');
    var title = this.get('_ext_title');
    var notes = this.get('_ext_notes');

    var data = null

    if (!SC.none(user_task)) {
      data = user_task.get('ext_data');
    }

    if (!SC.none(data)) {
      heading.update(data);
      title.update(data);
      notes.setValue(data.notes);

      /*
       * Make the timestamps more friendly. The second call is in case the first one fails due to rendering lag.
       */
      setTimeout(function() { jQuery('abbr.timeago').timeago() }, 100);
      setTimeout(function() { jQuery('abbr.timeago').timeago() }, 1000);
    }
  }.observes('user_task')

});

view_user_task_state.js

Mobile360.States.viewUserTask = Ki.State.design({

  enterState: function() {
    /*
     * Make sure we start with a clean runloop
     */
    SC.RunLoop.begin(); SC.RunLoop.end();

    var view = Mobile360.actionPlansListView;
    var button = view.get('backButton');

    button.set('visible', YES);
    button.set('title', 'Tasks');
    button.set('action', 'viewActionPlanAction');

    view.set('title', Mobile360.currentUserTaskController.get('description'));
    view.get('ext').setActiveItem(Mobile360.userTaskDetailView.get('ext'), Mobile360.DEFAULT_SLIDE_ANIMATION);
  },
  
  exitState: function() {
  },

  viewActionPlanAction: function() {
    Mobile360.set('currentSlideDirection', 'right');

    this.gotoState('viewActionPlan');
  }

});