Learn from Saki

Knowledge is power

This content is for registered users only. Please login.
Hello! To access your account, please Log in. Not a member? Sign up
  • Videos
  • Blog
  • Examples
  • Services
  • Add-ons
  • About

JavaScript Extension File Pattern

April 3, 2008 by saki 5 Comments

Code in this post can be obsolete, however, principles and theory may still apply.
1
2
3
4
5
6
7
8
9
10
11
// vim: ts=4:sw=4:nu:fdc=4:nospell
/*global Ext, AnExtension */
/**
* @class AnExtension
* @extends Ext.Panel
*
* AnExtension description
*
* @author    Ing. Jozef Sakáloš
* @copyright (c) 2010, by Ing. Jozef Sakáloš
* @date
      *
 
    • 11. March 2010
*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
* @version   1.0
* @revision  $Id$
*
* @license AnExtension.js is released under the
* <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GNU GPL 3.0</a>
* license. It’s free for use in GPL and GPL compatible open source software,
* but if you want to use the component in a commercial software (closed source),
* you have to get a commercial license.
*/
 
// create namespace
Ext.ns('AnExtension');
 
/**
* Creates new AnExtension
* @constructor
* @param {Object} config A config object
*/
AnExtension = Ext.extend(Ext.Panel, {
 
    // default config (it can be changed while instantiating)
    border:false
 
    // {{{
    // uncomment constructor if you need it, e.g. if you need listeners
//    ,constructor:function(config) {
//        // parent constructor call pre-processing - configure listeners here
//        config = config || {};
//        config.listeners = config.listeners || {};
//        Ext.applyIf(config.listeners, {
//            // add listeners config here
//        });
//
//        // call parent constructor
//        AnExtension.superclass.constructor.call(this, config);
//
//        // parent constructor call post-processing
//
//    } // eo function constructor
    // }}}
    // {{{
    ,initComponent:function() {
 
        // hard coded config (it cannot be changed while instantiating)
        // {{{
        var config = {
        }; // eo config object
 
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        // }}}
 
        // call parent
        AnExtension.superclass.initComponent.apply(this, arguments);
 
        // parent call post-processing, e.g. install event handlers
 
    } // eo function initComponent
    // }}}
    // {{{
    ,afterRender:function() {
 
        // parent call pre-processing
 
        // call parent
        AnExtension.superclass.afterRender.apply(this, arguments);
 
        // parent call post-processing, e.g. install event handlers on rendered components
 
    } // eo function afterRender
    // }}}
 
    // any other added/overriden methods
}); // eo extend
 
// register xtype
Ext.reg('anextension', AnExtension);
 
// eof
  • Author
  • Recent Posts
Follow me:
saki
I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:
Latest posts by saki (see all)
  • Ext, Angular, React, and Vue - June 27, 2019
  • The Site Resurgence - February 11, 2018
  • Configuring ViewModel Hierarchy - June 19, 2015

Filed Under: Snippets Tagged With: extension, extjs, javascript, pattern

Comments

  1. Sey says

    April 3, 2008 at 8:11 am

    This is excellent excellent stuff — should be put in the official ExtJs learning page.

    Log in to Reply
  2. jsakalos says

    April 3, 2008 at 12:48 pm

    Thank you.

    I think it comes very handy, when starting new file, not to think what should be in the header or how parent call should look like but concentrate on the main code itself.

    Log in to Reply
  3. Robert Kuropkat says

    July 6, 2010 at 9:50 pm

    I know this is a rather old post, but I was wondering about the ‘arguments’ argument in lines 68 and 80 (the calls to the super class methods). I assume this was supposed to be arguments passed in when the object is instantiated? Where exactly is the variable ‘arguments’ set? Or was this just intended as a place holder?

    Log in to Reply
  4. GIBson3 says

    July 14, 2010 at 9:46 pm

    @Robert Kuropkat:
    arguments is a local scope variable available in all functions in Java script see: https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments

    Log in to Reply
  5. Ed says

    January 24, 2014 at 9:14 am

    Awesome! Its genuinely awesome paragraph, I have got
    much clear idea regarding from this paragraph.

    Log in to Reply

We will be happy to hear back from you Cancel reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

  • Addons (2)
  • Architecture (14)
  • Examples (2)
  • ExtJS (26)
  • Howtos (16)
  • Javascript (1)
  • Know-how (32)
  • Linux (1)
  • Mac OS X (2)
  • SASS/CSS (2)
  • Snippets (9)
  • Theory (14)
  • Touch (6)
  • Tutorials (5)
  • What is a … (9)

Tag cloud

abstract class accordion application button class cluster column component config css definition deprecated design education event example extension extjs factory function form grid html initComponent items javascript Know-how knowledge layout Linux listener mysql old panel pattern php plugin render snippet sql sqlite state table touch tree viewpoint

Membership

Become a Member
Affiliate Program

Support

FAQ
Contact

Legal

Terms and Conditions
Licensing
Privacy Policy

Copyright © 2021 · Dynamik-Gen on Genesis Framework · WordPress · Log in