PDA

View Full Version : Ext.Panel does not show within another Ext.Panel embedded in Ext.TabPanel



israel.camacho
12 Jun 2013, 1:20 PM
Does any one knows if there is an issue showing an Ext.Panel with Ext.form.HtmlEditor embedded on it within another Ext.Panel.

I haven't been able to accomplish the following:

We used to have an Ext.Panel within that Panel there is an Ext.TabPanel, within that TabPanel there's another Ext.Panel that contains several objects: two Ext.Button an Ext.form.TextArea and an Ext.form.HtmlEditor, and back then everything works beautifully

Because a strange behavior on iOS we had to embedded the Ext.form.HtmlEditor within an Ext.Panel in order to avoid that the HtmlEditor resize its height, but now the problem it is that the Ext.Panel with the Ext.form.HtmlEditor simply does not show.


Does any one can help put me on the right path to solve this, thanks in advance, best regards. The code is below:



var chatHistory = new Ext.form.HtmlEditor({
id : "chatHistory",
width : 268,
height : 275,
readOnly : true,
x : 0,
y : 0,
anchor : "100%",
enableAlignments: false,
enableLinks: false,
enableLists: false,
enableSourceEdit: false,
enableColors: false,
enableFontSize: false,
enableFormat: false,
enableFont: false,
listeners:{
afterRender: function() {
Ext.Ajax.request({
url : 'getChatMessage.action',
method : 'POST',
success : function(response){
var msg = response.responseText;
if (msg.length > 0) {
chatHistory.setValue(msg);
if(!selfsendmessage)
newMessageField.body.update("<blink><font color=\"#ff0000\"><b>YOU HAVE A NEW MESSAGE!!!</b></font></blink>",true);
selfsendmessage = false;
}
},
callback: function(){}
});
}
}
});

var newMessageField = new Ext.Panel({
id : "newMessageField",
x : 0,
y : 335
});

var chatMessage = new Ext.form.TextArea({
id : "chatMessage",
width : 200,
height : 50,
x : 0,
y : 280,
//anchor : "100%",
//multiline : true,
autoScroll : true,
//enableKeyEvents: true,
enterIsSpecial : true,
listeners : {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
selfsendmessage = true;
var object = new Object();
object.color = color;
object.chatMessage = chatMessage.getValue().replace(/(\r\n|\n|\r)/gm,"");
if (object.chatMessage != '') {
chatMessage.setValue('');
Ext.Ajax.request({
url : 'sendChatMessage.action',
method : 'POST',
params : object,
success : function(response){
chatMessage.setValue("");
}
});
}else{
chatMessage.getValue().replace(/(\r\n|\n|\r)/gm,"");
chatMessage.setValue("");
}
}
}
}

});

var saveChatButton = new Ext.Button({
id : "saveChatButton",
text : "Save Chat",
width : 65,
x : 205,
y : 308,
handler : function()
{
//save = true;
if(!Ext.isIE8) //ICR-Revision 10: Manage IE8 behavior for non trusted sites
{
Ext.MessageBox.show({
title :'Message',
msg : 'Do you want to save the chat history?',
icon : Ext.MessageBox.QUESTION,
buttons : Ext.MessageBox.YESNO,
fn: function (btn){
if(btn == 'yes'){
window.location = 'saveChat.action';
Ext.MessageBox.hide();
/*setTimeout(function() {
setTimeout(function() {
//alert('user chose to stay');
save = false;
}, 500);
},1);*/
}//else
//save = false;
},
animEl : 'mb4'
});
}else{
window.location = 'saveChat.action';
/*setTimeout(function() {
setTimeout(function() {
//alert('user chose to stay');
save = false;
}, 500);
},1);*/
}

}
});


var chatButton = new Ext.Button({
id : "chatButton",
text : "Send",
width : 65,
x : 205,
y : 280,
handler : function(){
selfsendmessage = true;
var object = new Object();
object.color = color;
object.chatMessage = chatMessage.getValue().replace(/(\r\n|\n|\r)/gm,"");
if (object.chatMessage != '') {
chatMessage.setValue("");
Ext.Ajax.request({
url : 'sendChatMessage.action',
method : 'POST',
params : object,
success : function(response){
//chatMessage.setValue("");
}
});
}
}
});

/*var sessionField = new Ext.form.DisplayField({
id : "sessionField",
x : 5,
y : 250,
value : "Session ID:"
});*/

var chatContainer = new Ext.Panel({
id : 'chatContainer',
// renderTo : Ext.getBody(),
// title : "",
frame : true,
layout : 'absolute',
height : 281,
width : 281,
x : 720,
y : 253,
frame : false,
// anchor : "100%",
border : false,
hideBorders : true,
items : [chatHistory]
});


var chatcomponentspanel = new Ext.Panel({
id : "chatcomponentspanel",
title : "Public Chat",
frame : true,
layout : 'absolute',
items : [chatContainer, chatMessage, chatButton, saveChatButton, newMessageField]
});

var chattabpanel = new Ext.TabPanel({
id : "chattabpanel",
activeTab : 0,
width : 285,
height : 390,
frame : true,
items : [chatcomponentspanel]
});

var chatPanel = new Ext.Panel({
id : 'chatPanel',
title : "Leaderview Chat",
height : 425,
width : 300,
x : 710,
y : 195,
frame : true,
items : [chattabpanel]
});

mitchellsimoens
14 Jun 2013, 5:21 AM
You have a lot of overnesting. Make sure you need to nest these within others and then also make sure you are using appropriate layouts.