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.