Border of elements

Hi, How can I add a border between the treepanel and the other two panels?

If I set the border to the treepanel, the grid, and the other panel, the external border is rendered strong because the MAIN container has its own border...

So i want somewhat to separate the "left side" from the "right side"...
Here's a screenshot: http://img352.imageshack.us/my.php?image=gridav6.jpg

And that's my code:

Ext.onReady(function(){

Ext.QuickTips.init();

function Render_MP_Object(value, metadata, record) {
if(record.data['readed'] == '0') {
/* The entire row must be rendered as strong */
ret = '' + value + '';
} else {
ret = value;
}
return ret;
}

var help = 'Clicca su una delle cartelle per visualizzare i messaggi che essa contiene.
Clicca su un messaggio per visualizzarlo. Puoi spostare un messaggio trascinandolo dalla lista che lo contiene, in una delle cartelle disponibili.';
var help_title = 'Guida';

var folders = new Ext.tree.TreeNode({
id: 'folders',
text: 'Box',
expanded: true,
isTarget: false,
enableDrop: false
});

var folder_inbox = new Ext.tree.TreeNode({
id: 'inbox',
text: 'Messaggi Privati',
iconCls: 'icon-folder',
enableDrop: true,
isTarget: true
});

var folder_trash = new Ext.tree.TreeNode({
id: 'trash',
text: 'Cestino',
iconCls: 'icon-folder_delete',
enableDrop: true,
isTarget: true,
expandable: false,
expanded: true
});

var folder_spam = new Ext.tree.TreeNode({
id: 'spam',
text: 'Spam',
iconCls: 'icon-bug',
enableDrop: true,
isTarget: true,
});

folders.appendChild(folder_inbox);
folders.appendChild(folder_trash);
folder_trash.appendChild(folder_spam);

var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title: 'Cartelle',
region: 'west',
layout: 'fit',
enableDrop: true,
dropConfig: {
appendOnly: true,
allowParentInsert: false,
ddGroup: 'grp_mp',
notifyDrop: function(ddSource, event, data) {
var select = data.selections;
for (var i=0; i /* Move the selected message into a folder */
var folder = this.lastOverNode.node.id;
Ext.Ajax.request({
method: 'GET',
url: 'ajax/mp.php',
params: {action: 'move', id_mp: select[i].data['id'], folder: folder },
/* Remove the record from the grid */
success: function() {
var deleteRow = ddSource.grid.selModel.getSelected();
ddSource.grid.store.remove(deleteRow);
},
failure: function () {
Ext.MessageBox.alert('Error', 'Server error!');
}
});
}
this.removeDropIndicators(this.lastOverNode);
return(true);
}
},
frame: false,
split: false,
border: false,
height: 300,
width: 200,
minSize: 150,
autoScroll: true,
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,
root: folders,
});

var store = new Ext.data.JsonStore({
url: 'ajax/mp.php',
method: 'GET',
id: 'id',
proxy: new Ext.data.HttpProxy({
method: 'GET',
url: 'ajax/mp.php',
params:{action: 'list', folder: 'inbox'},
disableCaching:true
}),
fields: [
{name: 'id'},
{name: 'readed'},
{name: 'username'},
{name: 'subject'},
{name: 'message'},
{name: 'date', type: 'date', dateFormat: 'Y-m-d H:i:s'}
],
sortInfo: {field: 'date', direction: 'DESC'},
remoteSort: false
});

var grid = new Ext.grid.GridPanel({
id: 'grid_list',
title: 'Messaggi Privati',
iconCls: 'icon-table',
ddGroup: 'grp_mp',
enableDrag: true,
frame: false,
border: false,
height: 250,
store: store,
columns: [
{header: "Username", sortable: false, dataIndex: 'username'},
{header: "Oggetto", sortable: false, renderer: Render_MP_Object, dataIndex: 'subject'},
{header: "Data", sortable: true, renderer: Ext.util.Format.dateRenderer('d M Y'), dataIndex: 'date'}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
viewConfig: {
forceFit: true,

},
stripeRows: true,
autoSizeColumns: true,
autoWidth: true,
enableColumnHide: false,
menuDisabled: true,
loadMask: true
});

var message = new Ext.Panel({
id: 'message',
height: 250,
iconCls: 'icon-help',
bodyStyle: 'padding: 5px 5px 0',
title: help_title,
html: help,
frame: false,
border: false
});

var pView = {
layout: 'anchor',
border: false,
items: [grid, message]
};

var pWrite = {
layout: 'form',
};

var contentPanel = {
region: 'center',
layout: 'card',
activeItem: 0,
border: false,
items: [pView]
};

var panel = new Ext.Panel({
title: 'Messaggi Privati',
layout: 'border',
height: 500,
items:[treePanel, contentPanel],
tbar: [
new Ext.Button({
text: 'Messaggi Privati',
iconCls: 'icon-table',
handler: function() { win.show(); },
}),
new Ext.Button({
text: 'Nuovo MP',
iconCls: 'icon-add',
handler: function() { win.show(); },
}),
new Ext.Button({
text: 'Elimina',
iconCls: 'icon-delete',
handler: function() { Ext.MessageBox.alert('asd', 'Delete my message, AJAX request will provided!')},
}),
new Ext.Button({
text: 'Svuota cestino',
iconCls: 'icon-basket_remove',
handler: function() {
Ext.Msg.show({
title: 'Conferma',
msg: 'Vuoi eliminare il contenuto del Cestino?',
buttons: Ext.Msg.YESNO,
fn: function(btn, text) {
if(btn == 'yes') {
Ext.Ajax.request({
method: 'GET',
url: 'ajax/mp.php',
params: {action: 'purge'},
/* Reload the Trash Folder's content */
success: function() {
/* Check for selected TreeNode for Grid refresh */
var sm = treePanel.getSelectionModel();
var node = sm.getSelectedNode();
if(node != null) {
var refresh = node.id;
} else {
var refresh = folder_inbox.id;
}
store.load({params:{action: 'list', folder: refresh}});
},
failure: function () {
Ext.MessageBox.alert('Error', 'Server error!');
}
});

}
},
icon: Ext.MessageBox.QUESTION
});


},
})
],
renderTo: 'mailer'
});

treePanel.getSelectionModel().on('selectionchange' , function(tree, node) {
if(node.getDepth()) {
grid.setTitle(node.text);
message.setTitle(help_title, 'icon-help');
message.body.update(help);
/* Loads data into the Grid */
store.load({params:{action: 'list', folder: node.id}});
}
});

grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
var id_MP = r.data['id'];
/* I will read the message... */
Ext.Ajax.request({
method: 'GET',
url: 'ajax/mp.php',
params: {action: 'read', id_mp: id_MP},
success: function(response, options) {
var mp = Ext.decode(response.responseText);
var message = Ext.getCmp('message');
message.setTitle(mp.subject, 'icon-email');
message.body.update(mp.message);
},
failure: function () {
Ext.MessageBox.alert('Error', 'Server error!');
}
});
});

/* Loads data into the Grid */
store.load({params:{action: 'list', folder: 'inbox'}});
});




#If you have any other info about this subject , Please add it free.#
Your name:
E-mail:
Telphone:

Your comments:


If you have any other info about Border of elements , Please add it free.