Results 1 to 4 of 4

Thread: Ext.msg is not showing the body text

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    UK
    Posts
    11
    Vote Rating
    0
      0  

    Default Ext.msg is not showing the body text

    Here is my code. When I press the Delete button, a confirm message box comes up. but it never shows the body text?

    I tried exm.msg.alert or show . but bodytext is still not showing at all.

    Code:
    KiApp.views.PersonEditorView = Ext.extend(Ext.form.FormPanel, {    bodyStyle:"background: url('images/background.jpg') no-repeat;", 
    	
        initComponent: function () {
    
    
            this.backButton = new Ext.Button({
                text: 'Back',
                ui: 'back',
                handler: this.backButtonTap,
                scope: this
            });
    
    
            this.saveButton = new Ext.Button({
                text: 'Save',
                ui: 'action',
                handler: this.saveButtonTap,
                scope: this
            });
    
    
            this.trashButton = new Ext.Button({
                iconCls: 'trash',
                iconMask: true,
                handler: this.trashButtonTap,
                scope: this
            });
    		
    		this.makeDefaultButton = new Ext.Button({
                text: 'Set Default',
    			
                handler: this.defaultButtonTap,
                scope: this
            });
    		this.viewProfileButton = new Ext.Button({
                text: 'View Profile',
    			
                handler: this.viewProfileTap,
                scope: this
            });
            this.topToolbar = new Ext.Toolbar({
                title: 'Edit Profile',
                items: [
                    this.backButton,
                    { xtype: 'spacer' },
                    this.saveButton
                ]
            });
    
    
            this.bottomToolbar = new Ext.Toolbar({
                dock: 'bottom',
                items: [
                    this.makeDefaultButton,
    				this.viewProfileButton,
    				{ xtype: 'spacer' },
                    this.trashButton,
    				
                ]
            });
    
    
            this.dockedItems = [this.topToolbar, this.bottomToolbar];
    		
            KiApp.views.PersonListView.superclass.initComponent.call(this);
     
        },
    
    
        backButtonTap: function () {
            Ext.dispatch({
                controller: 'ChartController',
                action: 'index'
            });
        },
    
    
        saveButtonTap: function () {
            Ext.dispatch({
                controller: 'ChartController',
                action: 'saveperson'
            });
        },
    
    
        trashButtonTap: function () {
    	   Ext.Msg.confirm("Delete this profile?", "Are you sure to delete this profile?", function (e) {
    	    if(e == 'yes'){
            Ext.dispatch({
                controller: 'ChartController',
                action: 'deleteperson',
            });
    		}
    		
    		});
        },
    
    
    	viewProfileTap: function () {
    		Ext.dispatch({
                controller: 'ChartController',
                action: 'viewProfile',
            });
    	},
    	defaultButtonTap: function (){
    		
    	    Ext.dispatch({
                controller: 'ChartController',
                action: 'setDefault'
            });
    	},
        items: [{
            xtype: 'textfield',
            name: 'fname',
            label: 'First name',
            required: true
        }, {
            xtype: 'textfield',
            name: 'sname',
            label: 'Surname'
        },
    	 {
    				xtype: 'datepickerfield',
                 name : 'dob',
                 label: 'Date of Birth',
                 autoCapitalize : true,
    				required:'true',
    			   
    				picker: {
    				                    slotOrder: ['day', 'month', 'year'],
    									yearFrom: '1950',
    									yearTo: (new Date()).getFullYear(),
    				                },
    	},
    ],
    
    
        	listeners:  {
    		   'render': function () { //parent.remove(this, true); 
    			 
    		   },
    		},
    });
    
    
    Ext.reg('PersonEditorView', KiApp.views.PersonEditorView);
    
    
     
    Untitled.png

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395
    Vote Rating
    22
      0  

    Default

    Hi sparkcom.
    I think you only have a color on color problem.
    You should only have to override the "x-msgbox-text" color using SASS or CSS in your application theme definition.

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    UK
    Posts
    11
    Vote Rating
    0
      0  

    Default

    That's what I thought initially.
    I viewd the source in firebug and the message body text is like this:
    Code:
    <div class="x-msgbox-body" id="ext-gen1070" style="left: 0px; top: 47px; ">
    <div class="x-msgbox-icon x-msgbox-question" id="ext-gen1071"/>
    
    <div class="x-msgbox-content" id="ext-gen1072">
    [COLOR=#FFFFFF !important]<div class="x-msgbox-text" id="ext-gen1073">Are you sure to delete this profile?</div>[/COLOR]
    
    <div class="x-msgbox-inputs x-hidden-display" id="ext-gen1074">
    <input type="text" class="x-msgbox-input x-msgbox-input-single" id="ext-gen1075"/>
    <textarea class="x-msgbox-input x-msgbox-input-textarea" id="ext-gen1076"/>
    
    </div>
    
    </div>
    
    </div>
    I also have this in my css as you suggested

    Code:
    .x-msgbox-text {  color: #fff;
    }
    Unfortunately, it doesn't make a difference. There is only tiny gap between the title and the 2 buttons, it looks like the text is totally hidden.

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Hi sparkcom,

    I was having the same problem until I realized I was not including the correct css in my sass file.

    If you are using sass & compass try @include sencha-msgbox; in your application.scss (or whatever your scss file is named)

    I have written my solution here: http://www.quispiam.com/blog/post.php?s=2011-09-29-sencha-touch-extmsgalert-has-no-body

    Matt

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •