Ext JS Screencast: Abstract Classes from Jay Garcia on Vimeo.

In this screencast, we discuss the basics of Abstract classes and how they can help you design maintainable and extensible code.

Here is the code from the screencast:
AbstractFormPanel.js

Ext.ns('MyApp');

MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
    defaultType : 'textfield',
    frame       : true,
    width       : 300,
    height      : 200,
    labelWidth  : 75,
    submitUrl   : null,
    initComponent : function() {
         Ext.apply(this, {
            items    : this.buildItems(),
            buttons  : this.buildButtons(),
            defaults : {
                anchor : '-10'
            }
         });

         MyApp.AbstractFormPanel.superclass.initComponent.call(this);
    },
    buildItems : function() {
        return [];
    },
    buildButtons : function() {
        return [
            {
                text    : 'Submit',
                scope   : this,
                handler : this.onSubmit
            },
            {
                text    : 'Cancel',
                scope   : this,
                handler : this.onCancel
            }
        ];
    },
    onSubmit : function() {
        Ext.MessageBox.alert('Submit', this.submitUrl);
    },
    onCancel : function() {
        this.el.mask('This form is canceled');
    }
});

NameFormPanel.js

Ext.ns('MyApp');

MyApp.NameFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
    title      : 'Edit name data',
    submitUrl  : 'nameAction.asp',
    buildItems : function() {
        return [
            {
                name       : 'firstName',
                fieldLabel : 'First Name'
            },
            {
                name       : 'lastName',
                fieldLabel : 'Last Name'
            },
            {
                name       : 'middleName',
                fieldLabel : 'Middle Name'
            },
            {
                xtype      : 'datefield',
                name       : 'dob',
                fieldLabel : 'DOB'
            }
        ];
    },
    //Extension
    buildButtons : function() {
        var btns = MyApp.NameFormPanel.superclass.buildButtons.call(this);

        btns[0].text = "OK";
        btns[0].handler = this.onOkBtn;
        return btns;
    },
    //Override
    onOkBtn : function() {
        console.info('OK btn pressed');
    }

});


AddressFormPanel.js

Ext.ns('MyApp');

MyApp.AddressFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
    title      : 'Edit address data',
    submitUrl  : 'addressAction.asp',
    buildItems : function() {
        return [
            {
                name       : 'address1',
                fieldLabel : 'Address 1'
            },
            {
                name       : 'address2',
                fieldLabel : 'Address 2'
            },
            {
                name       : 'city',
                fieldLabel : 'city'
            },
            {
                xtype      : 'combo',
                name       : 'state',
                fieldLabel : 'State',
                store      : ['MD', 'VA', 'DC']
            },
            {
                xtype      : 'numberfield',
                name       : 'zip',
                fieldLabel : 'Zip Code'
            }
        ];
    }

});

Help me deliver these videos to you faster!

Editing and compressing h.264 video for screencasts has become insanely expensive in terms of time. A 40 minute 720p video can take up to four or more hours on the final compression. My goal is to be able to deliver these videos to you faster, but I need your help! Please donate any amount to help me purchase faster hardware, allowing me to deliver videos faster to you.
$ 1735 / 3500 raised

Donate:

Like what you've seen or read? Use the below links to share and enjoy.
  • Twitter
  • Digg
  • del.icio.us
  • Technorati
  • Yahoo! Buzz
  • Facebook
  • LinkedIn
  • Mixx
  • Google Bookmarks
  • Tumblr
  • Blogplay
  • Add to favorites
  • DZone
  • FriendFeed
  • Live
  • PDF
  • Propeller
  • Reddit
  • Suggest to Techmeme via Twitter
  • Slashdot
  • StumbleUpon
  • email
  • Print
  • Sphinn