CODEWITHSUNDEEP
sencha-touchsencha-touch-2
Anagha
Anagha

Reputation: 1

'OK' button is not displayed in Ext.Msg.alert

I am using sencha touch 2 PR1 .when I click on alert button the alert box which gets open does not have 'Ok' button and its height covers entire page. here is my view

Ext.define('MyTask.view.Main', {
extend: 'Ext.Container',
alias: 'widget.main',
config: {
    items: [

        {
          xtype : 'button',
          cls   : 'demobtn',
        ui    : 'round',
        margin: '10 0',
        text: 'Alert',
            handler: function() {
            Ext.Viewport.add(Ext.Msg);
                Ext.Msg.alert('Title', 'The quick brown fox jumped over the lazy dog.',     Ext.emptyFn);
            }
        }

    ]
}
 });

and controller

Ext.define('MyTask.controller.TestController', {
extend: 'Ext.app.Controller',   
views: ['Main'],
refs: [
    {
        ref     : 'main',
        selector: 'main',
        autoCreate: true, 
        xtype   : 'main'   
    },

],

init: function() {
mainPanel=this.getMain();
Ext.Viewport.add(mainPanel);

}

});

and app.js

 Ext.Loader.setConfig({ enabled: true });


Ext.require([    
'Ext.XTemplate',
'Ext.Panel',
'Ext.Button',
'Ext.List',
'Ext.MessageBox'
]);




Ext.application({

name: 'MyTask',   
controllers: ['TestController'],

 });

Why it is not getting displayed properly? I tested on crome and ipad. thanks in advance.

Upvotes: 0

Views: 3387

Answers (3)

Nghia Do
Nghia Do

Reputation: 71

I got the same issue, even with Sencha Touch version 2.0.0.

At the first time, I thought it is a bug of Sencha Touch. After spending couple days to research, I've just found out the root cause of this bug. I've put an extra tag before the HTML5 <!DOCTYPE html> declaration in my html page. I corrected it by put the HTML5 declaration <!DOCTYPE html> on the very top of my page and it fixed my problem.

Upvotes: 1

himanshu
himanshu

Reputation: 1980

Hey guys below code would help you to solve your problem:-

The code tested on sencha touch 2.0 final.

 Ext.Msg.show({
                 title: 'Title',
                 message: 'The quick brown fox jumped over the lazy dog.',
                 buttons: [{
                             id: 'alertCancelBtn',
                             iconCls: 'user',
                             iconMask: true,
                             text: 'Ok',
                             ui: 'round decline'
                           }], // buttons
                 height: 200,
                 width: 150,
                     //   Ext.emptyFn      
  }); // show()

Upvotes: 1

heyjii
heyjii

Reputation: 834

Why are you adding the Ext.Msg to the viewport. Change the handler function as follows

handler: function() {

                Ext.Msg.alert('Title', 'The quick brown fox jumped over the lazy dog.',     Ext.emptyFn);
            }

ie remove Ext.Viewport.add(Ext.Msg);

Note : I tested it on Sencha 1.1.0

Hope it will help...

Upvotes: 2

Related Questions