Sencha Touch Custom Layout Manager


Sencha Touch Framework provides various layout managers like ‘hbox’, ‘fit’ etc.

You might be curious how to add your own layout manager. addLayoutMnanager? registerLayout? …

The answer is as simple as the usage of them, because Sencha is smart enough to use the Hollywood principle design pattern. The Container class implements the private method getLayout that will use your own layout or ‘default’ as fallback.

getLayout: function() {
        var layout = this.layout;
        if (!layout) {
            layout = this.link('_layout', this.link('layout', Ext.factory(this._layout || 'default', Ext.layout.Default, null, 'layout')));
            layout.setContainer(this);
        }

        return layout;
    },

Define your own layout manager by inheriting from Ext.layout.Default (you could use it’s subclasses as well!):

Ext.define('TaskQueue.view.layout.Rotating', {
    extend: 'Ext.layout.Default',
    requires: [
        'Ext.Anim'
    ],

    alias: 'layout.rotating',

    layoutClass: 'x-layout-rotating',

    itemClass: 'x-layout-rotating-item',

    _container: null,

    ////////////////////////////// Methods

    setContainer: function(container) {
        this.callSuper(arguments);
        this._container = container;
        container.innerElement.addCls(this.layoutClass);

        Ext.defer( this._applyLayout, 1000, this);
    },

    _applyLayout: function() {

         // accomplish layouting here

     }
});

Use your brand new layout manager inside a container:

Ext.define('TaskQueue.view.TaskElement', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Container', 'Ext.Button'],
    xtype: 'taskelement',

    config: {
            //...
        },
        //your own layout
        layout: {
            type: 'rotating'
        }
    },
    initialize: function() {
        this.callParent(arguments);
    },
    //more code
    //........
});
Advertisements

2 thoughts on “Sencha Touch Custom Layout Manager

  1. Thanks for your article – it was just what I needed.
    One useful tweak I made was to override the onItemInnerStateChange method instead of using your _applyLayout method. onItemInnerStateChange is called each time a new item is added (etc.) to the container – so any programatically added items get covered by the layout logic – whereas setContainer is just called once.
    Cheers! Ian

  2. Hi Ian, thank you for sharing your optimizations! I would prefer regular event listeners as well. One issue when working with sencha is that it has a pretty huge (but well-designed) functionality. Sometimes when it comes to the more difficult things it gets harder to recognize the right solution ;-).

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