Sencha Touch 2 Sample Data Bound Component

The following class produces a toggle button whose label is bound to the first item in the specified data store and rendered via an XTemplate.

Ext.define("MyApp.view.main.ToggleButton", {
 extend : 'Ext.Container',
 xtype : 'figleaftogglebutton',
 requires : ['Ext.LoadMask', 'Ext.data.StoreManager',],
 config : {
  store : null,
  cls : 'x-button-normal x-button',
  pressedCls : 'x-button-pressing',
  scrollable : false,
  loadingText : 'Loading...',
  itemTpl : '<div>{text}</div>',
  emptyText : 'No data available',
  deferEmptyText : false
 },

constructor : function(config) {
 var me = this;
 me.hasLoadedStore = false;
 me.pressed = false;
 me.callParent(arguments);
},

applyItemTpl : function(config) {
 return (Ext.isObject(config) && config.isTemplate) ? config: new Ext.XTemplate(config);
},

//
// STORE BINDINGS
//

storeEventHooks : {
 beforeload : 'onBeforeLoad',
 load : 'onLoad',
 refresh : 'refresh',
 updaterecord : 'onStoreUpdate'
},

applyStore : function(store) {

 var me = this, bindEvents = Ext.apply({}, me.storeEventHooks, {scope : me }), proxy, reader;

 if (store) {
  store = Ext.data.StoreManager.lookup(store);
  if (store && Ext.isObject(store) && store.isStore) {
   store.on(bindEvents);
   proxy = store.getProxy();
   if (proxy) {
     reader = proxy.getReader();
     if (reader) {
       // reader.on('exception', 'handleException',  this);
     }
   }
 }
 // <debug warn>
 else {
   Ext.Logger.warn("The specified Store cannot be found", this);
 }
 // </debug>
 }

return store;
 },

// private
onBeforeLoad : function() {

 var loadingText = this.getLoadingText();
  if (loadingText) {
   this.setMasked({ xtype : 'loadmask', message : loadingText });
  }
  this.hideEmptyText();
 },

// private
 onLoad : function(store) {
  // remove any masks on the store
  this.hasLoadedStore = true;
  this.setMasked(false);

  if (!store.getCount()) {
   this.showEmptyText();
  }
},

// private
onStoreUpdate : function(store, record, newIndex, oldIndex) {
  var me = this;
  me.doRefresh(me);
},

//
 // END STORE BINDINGS
 //

initialize : function() {
 this.callParent();
 var me = this;

// fire component-level event
 this.element.on('tap', function(e, html, opt, eOpts) {
  me.fireEvent('tap', me, Ext.getStore(me.getStore()).getAt(0), me.pressed);
  me.pressed = me.pressed ? false : true;
  if (me.pressed)
   me.addCls(me.getPressedCls());
  else
   me.removeCls(me.getPressedCls());
  });

  if (this.getStore()) {
   this.refresh();
  }
 },
//
// Empty store handling
//

// private
 updateEmptyText : function(newEmptyText, oldEmptyText) {
  var me = this, store;
  if (oldEmptyText && me.emptyTextCmp) {
   me.remove(me.emptyTextCmp, true);
   delete me.emptyTextCmp;
  }

  if (newEmptyText) {
   me.emptyTextCmp = me.add({
     xtype : 'component',
     cls : me.getBaseCls() + '-emptytext',
     html : newEmptyText,
     hidden : true
   });
   store = me.getStore();
   if (store && me.hasLoadedStore && !store.getCount()) {
    this.showEmptyText();
   }
  }
 },

showEmptyText : function() {
 if (this.getEmptyText() && (this.hasLoadedStore || !this.getDeferEmptyText())) {
  this.emptyTextCmp.show();
 }
},

hideEmptyText : function() {
 if (this.getEmptyText()) {
   this.emptyTextCmp.hide();
 }
},
//
// Refresh the button label
//

refresh : function() {
 var me = this;

 if (!me.getStore()) {
  if (!me.hasLoadedStore && !me.getDeferEmptyText()) {
    me.showEmptyText();
  }
  return;
 }
 me.fireAction('refresh', [me], 'doRefresh');
},

doRefresh : function(me) {
 var container = me, store = me.getStore(), rec = store.getAt(0)
 if (rec) {
   me.setHtml(me.getItemTpl().apply(rec.data));
 }
}
});

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s