xtype defined

Code in this post can be obsolete, however, principles and theory may still apply.

Preface

There has been a lot of confusion I have observed on the Ext Forums as to xtype. Some people ignore it fully, some think that it is what it is not. So I’ve decided to clarify it.

Definition

xtype is a symbolic name given to a class. Nothing less, nothing more.

For example, your class has the name Ext.ux.MyGrid. This is the normal class name that you use when you need to instantiate this class (create an object of the class).

In addition to class name you can give your class xtype this way:

xtype here is mygrid and normal class name is Ext.ux.MyGrid. The above statement registers a new xtype or, in other words, connects xtype mygrid with class Ext.ux.MyGrid.

What is it good for?

Imagine you have a big application where objects (windows, forms, grids) are created when they are needed as responses to user actions. For example, the user clicks an icon or button and a new window with a grid inside is created, rendered and displayed on the screen.

Now, if you code such application in an before-Ext-2.x way you need to instantiate all objects in the application at the time of first page loading (application code first run). You will have an object of class Ext.ux.MyGrid somewhere in the browser’s memory waiting for rendering on a user click.

This is just for one grid – you may have hundreds of them… What a waste of resources! The grid is sitting somewhere there but the user may never click that button, may never need that grid.

Lazy Instantiation

If you have xtype, the only thing that sits in the memory is a simple configuration object such as:

That is not as expensive as a complex instantiated class.

Now, what happens if the user clicks our button? Ext will see that the to-be-rendered-grid is not even instantiated but it knows how to deal with it. ComponentMgr knows: “If I need to instantiate an object of xtype mygrid I need to create an object of class Ext.ux.MyGrid” so it runs this code:

In other “words”:

That instantiates our grid; rendering and displaying will follow. Remember: Instantiated only if needed.

Further Reading

Writing a Big Application in Ext

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestEmail this to someone
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)

Comments

  1. Bulle Bas says

    Now, if you code such application in an before-Ext-2.x way you need to instantiate all objects in the application at the time of first page loading (application code first run).
    How is this different from Ext 3? Was there a design mistake in Ext2. I am inclined to think that lazy loading is what you get normally. Like here:

    $(‘id3′).click.register(function(e) {new Panel().show()})

    Just curious.

  2. says

    1. Not necessarily. You can instantiate/render components when you need, the only difference is that pre-Ext-2.x doesn’t do it for you – you need to do it yourself.

    2. Ext 3.x and Ext 2.x are conceptually same in this area.

    3. No design mistake in Ext 2.x I know about. The reverse is true: Many ingenious concepts.

    4. No idea what’s the line you posted does. What’s $? What .register does? Is it an Ext line?

  3. Bulle Bas says

    ad 2. Yes I was mistaken, I read pre ext3 where you write pre ext2.

    ad 3. Ghe don’t get me wrong. I love extjs as well, and bought recently a license because I want to use this library. I only wonder how extjs1 worked then. Since the only way of greedy instantiation I can think of is something like the following

    p = new SubPanel();
    w = new Widget().registerAOnClickFunction(function (e) {p.show()}}

    this is a waste indeed.
    But why not simply

    w = new Widget().registerAOnClickFunction(function (e) {new Panel.show()}}

    There is no need to instantiate Panel beforehand, in global scope.

    ad 4. It was just an example, definitely not Extjs. $ is (DOM) getElementById, the example I provide here is maybe clearer. Still not extjs, but it illustrates the concept.

    :-)

  4. joe says

    Very clear description, thanks.
    What I am still wondering though, ow to i call a function on the lazyly instantiated object?
    As by the above example ({xtype:’mygrid

  5. joe says

    The example line got broken of, I was just referencing the line from your post. Here is the rest of my comment:
    [example line from above(xtype…)], how can I call i.e. getSelectionModel() on mygrid?

  6. Dave says

    I am writing an application which stores the Ext objects in a database I am retrieving the configuration from the server and rendering the objects. I want to manupulate the object configuration prior to adding them to the container. Is there a way of adding xtypes for things like?:

    store: {
    autoDestroy: true,
    url: \’plants.xml\’,
    reader: {
    record: \’plant\’,
    fields: [
    {name: \’common\’, type: \’string\’},
    ]
    }),

    I\’m string to lazy render all of the components. I\’ve tried :

    Ext.reg(\’xmlreader\’,Ext.data.XmlReader);

    store: {
    autoDestroy: true,
    url: \’plants.xml\’,
    reader: {
    xtype: \’xmlreader\’,
    record: \’plant\’,
    fields: [
    {name: \’common\’, type: \’string\’},
    ]
    },

    but to no avial… any thoughts?

  7. lwe says

    I was looking for what Joe was looking for, but I see he wasn’t answered. Can anyone tell us how to refer to an object that was created with xtype? I don’t want to use

  8. Sam says

    @joe,@Iwe: See ‘ref’ in the Extjs docs (e.g. on the Panel class). It (ref) will create a reference to the object when instantiated.

  9. says

    cool post!
    Another great post
    Thanks for the write up
    Cant wait to see future post
    Thanks, have a great day
    I really liked your post
    Very cool
    nice blog, check mine out if you get a chance.
    Top-notch
    Great work over again! Thank you.
    interesting article. thank you so much

We will be happy to hear back from you

Please Login to post a comment