Rendering issues in Sencha Touch caused by Ext.Sheet

I’ve spent quite a bit of time dealing with what appears to be a fairly serious problem in Sencha’s mobile device framework. Whilst it is an incredibly powerful and flexible framework there are some bugs in it’s core that need addressing before it will work properly for your application.

The bug I am referring to is caused by most elements that extend the Ext.Sheet component in the framework. This includes select fields, action sheets and date pickers. Once an Ext.Sheet based component has been rendered once the layout will render incorrectly on orientation change. This is a fairly serious issue as it the only way to resolve it at that point is to reload the application.

The problem can be fixed by overriding three different methods as follows:

Ext.override(Ext.Sheet, {
    doHide: function(el, options){
        var parent = this.el.parent();

        this.el.hide();

        if (parent && this.floating && this.modal) {
            parent.unmask();
        }
        if (options && options.fireHideEvent) {
            this.fireEvent('hide', this);
        }

        if (Ext.isObject(el)) {
            if (!(this instanceof Ext.MessageBox)) {
	           this.destroy();
            }
    	}
    }
});

Ext.override(Ext.form.Select, {

    getPicker: function() {
        if (this.picker) {
            this.picker.destroy();
            this.picker = null;
        }
        this.picker = new Ext.Picker({
            slots: [{
                align       : 'center',
                name        : this.name,
                valueField  : this.valueField,
                displayField: this.displayField,
                value       : this.getValue(),
                store       : this.store
            }],
            listeners: {
                change: this.onPickerChange,
                scope: this
            }
        });

        return this.picker;
    }

});

Ext.override(Ext.form.DatePicker, {
    onPickerHide: function(){
        if (this.datePicker){
            this.datePicker.destroy();
            this.datePicker = null;
        }
    }
});

The first of these fixes is courtesy of the sencha touch forum user gcallaghan. Each of these overrides essentially ensures that the instance of the relevent picker is destroyed instead of hidden.

The overhead incurred by recreating the picker/sheet each time is minimal thanks to the speed at which most of the major mobile browsers can manipulate the dom.

5 Responses to Rendering issues in Sencha Touch caused by Ext.Sheet

  1. Jim says:

    Thanks a bunch for this one.

  2. robin says:

    really quite quite useful. thank you!

  3. Florian says:

    thank you very much!

  4. Philipp says:

    Hi, great that you figured it out – fixes the issue for me!

    However, once an ActionSheet is destroyed, it cannot be used a second time with the show() method. Did you find a way to re-use an Actionsheet afterwards? Or am I missing something?

  5. Anilkumar.Singari says:

    I have the Same Issue as Phillip..unable to call the Show method on ActionSheet once its destroyed.

    am i Missing Something too??

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>