Sencha Touch Cookbook

Overriding a component behavior

This recipe will show us how to override an existing behavior of an existing component and use the modified behavior in the code.

Getting ready

Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.

How to do it...

1. Create and open a new file named PhotoAlbumOverride.js and paste the following code in it:

   Ext.override(Touch.book.ux.PhotoAlbum, {
     loadData : function(data) {
       if (this.store.getCount() > 0) {
         Ext.Msg.alert('Info', 'The view is already loaded with data. No action will be performed.');
       } else {
          this.store.loadData(data);
        }
      }
   });

2. Update the index.html file. We will use the existing ch06_13.js file.
3. Deploy and access it from the browser. You may also run it using ...