sencha-touchsencha-touch-2sencha-touch-2.2

Ext.Msg.alert and Ext.Msg.show not showing "message" field


Im using Ext.Msg.alert() and 'Ext.Msg.show()' to show my message box. But so far only the Title is displayed with an OK button, but the message field is not shown. There's no error when I run the code. Anything that I miss?

Below is my code when using Ext.Msg.alert(),

Ext.Msg.alert('Title', 'Why you no display!?', Ext.emptyFn);

and when using Ext.Msg.Show(),

Ext.Msg.show({
    title:'Title', 
    message: 'Why you no display!?',
    buttons: Ext.MessageBox.OK, 
    fn:Ext.emptyFn
});

Update on 27th August 2013

I found that the message box works when running on IOS Devices, but not on Android and on Desktop Browsers.


Solution

  • After digging trough the web, I finally found the solution. It turns out the fix is in the sass file in base folder.

    The original post is here.

    In short,

    Go to touch\resources\themes\stylesheets\sencha-touch\base\mixins, open the _Class.scss file and replace the whole block of @mixin st-box with the code below, and then re-compile your css (e.g. use compass watch)

    @mixin st-box($important: no) {
        @if $important == important {
            display: flex !important;
            display: -webkit-box !important;
            display: -ms-flexbox !important;
        } @else {
            display: flex;
            display: -webkit-box;
            display: -ms-flexbox;
        }
    }