PDA

View Full Version : Experts needed: How to modify viewport to have a chat box on East?



macno0b
7 Apr 2008, 1:21 PM
Hi All,

I am new to extjs and i must say it is the best javascript api out there. I have created a layout using ext.viewport as in the picture:

http://img87.imageshack.us/img87/6625/sp3220080407161049id0.jpg

How do I change the chat box (region: east) to something like this:

http://img216.imageshack.us/img216/6920/sp32200804071610492gh0.jpg

Could some one please shred some lights on me? The more specific the better. Thank you so much. I appreciate any helps/comments/suggestions.

Have a nice day,
A newbie who is desperate to learn.

p/s:
here is the code for the layout:


Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'top',
height:30
}), {
region:'north',
split:true,
height: 70,
minSize: 100,
maxSize: 200,
//collapsible: true,
title: 'Status',
margins:'50 5 0 5'
}, {
region:'south',
contentEl: 'progress',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'Progress',
margins:'0 5 5 5'
}, {
region:'east',
title: 'Chat',
collapsible: true,
split:true,
width: 325,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0'
},
new Ext.TabPanel({
id: 'tab_panel',
region:'center',
deferredRender:false,
activeTab:0,
margins:'0 0 0 5',
items:[{
id: 'video_tab',
contentEl:'video',
title: 'Video',
// closable:true,
autoScroll:true
},{
id: 'question_tab',
contentEl:'question',
title: 'Question',
autoScroll:true
}]
})
]
});

});

7 Apr 2008, 1:41 PM
Hi and welcome to the Ext Forums. :)

Questions: Have you figured out what you're going to for a chat client?

Next time providing pictures, please consider resize them. Those are huge.

macno0b
7 Apr 2008, 2:06 PM
HI jgarcia,

Sorry for the big screencaps. I am in charge of the front end while other people in the team will work on the back end so right now I am just concerned of how to display the chat area like one in the picture. When users input text and press send, the text should appear on the grid (big text box).

Thanks