PDA

View Full Version : Ext.msg is not showing the body text



sparkcom
20 Sep 2011, 4:14 AM
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.


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);




28161

AndreaCammarata
20 Sep 2011, 7:59 AM
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.

sparkcom
20 Sep 2011, 8:57 AM
That's what I thought initially.
I viewd the source in firebug and the message body text is like this:



<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">
<div class="x-msgbox-text" id="ext-gen1073">Are you sure to delete this profile?</div>

<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


.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.

mvickers
29 Sep 2011, 8:13 PM
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 (http://www.quispiam.com/blog/post.php?s=2011-09-29-sencha-touch-extmsgalert-has-no-body)

Matt