PDA

View Full Version : ContentPane with fixed toolbar



timothyf
20 Sep 2007, 6:20 AM
I have code that is based on Jack's Image Organizer with a few modifications to meet my application's requirements. In the right pane, where the images are displayed, I have a titlebar, a toolbar, and the images JSONView. My problem is that the toolbar scrolls away along with the rest of the pane's content when the user scrolls down to see more images. I would like the toolbar to remain fixed while only the images scroll.

If anyone can help me solve this problem, I would greatly appreciate that. I have attached a screenshot of the view below the code. In the image, it is the toolbar with the "Download All", "Add Image", and "Delete Image" buttons that scrolls away and this is what I want to remain fixed.

Here is the relevant code that creates the ContentPane:


var TreeTest = function(){
var Tree = Ext.tree;
return {
init : function(){
Ext.QuickTips.init();
var layout = new Ext.BorderLayout('organizer_layout', {
west: {
initialSize:250,
split:true,
titlebar:true
},
center: {
titlebar:true,
fitToFrame:true
}
});

var albums = layout.getEl().createChild({tag:'div', id:'albums'});

var tb = new Ext.Toolbar(albums.createChild({tag:'div'}));
tb.addButton({
text: 'New Thumbnail / Detail',
cls: 'x-btn-text-icon album-btn',
handler: function(){
var node = root.appendChild(new Tree.TreeNode({
text:'Alt. Thumbnail / Detail',
cls:'album-node',
allowDrag:false
}));
}
});
var images = layout.getEl().createChild({tag:'div', id:'images'});
var images_tb = new Ext.Toolbar(images.createChild({tag:'div'}));
images_tb.addButton({
text: 'Download All',
handler: download_all_images,
icon: 'images/download_images.png',
cls: "x-btn-text-icon"
});
images_tb.addSeparator();
images_tb.addButton({
text: 'Add Image',
icon: 'images/add.png',
cls: "x-btn-text-icon",
handler: show_upload
});
images_tb.addSeparator();
images_tb.addButton({
text: 'Delet Image',
icon: 'images/delete.png',
cls: "x-btn-text-icon",
handler: handle_delete_image
});

var viewEl = albums.createChild({tag:'div', id:'folders'});
var images_view_el = images.createChild({tag:'div', id:'images_display'});

var folders = layout.add('west', new Ext.ContentPanel(albums, {
title:'Website Images',
fitToFrame:true,
autoScroll:true,
autoCreate:true,
toolbar: tb,
resizeEl:viewEl
}));

var images = layout.add('center', new Ext.ContentPanel(images, {
title:'All Images',
fitToFrame:true,
autoScroll:true,
autoCreate:true,
toolbar:images_tb
}));
var imgBody = images.getEl();

var tree = new Tree.TreePanel(viewEl, {
animate:true,
enableDD:true,
containerScroll: true,
ddGroup: 'organizerDD',
rootVisible:false
});
var root = new Tree.TreeNode({
text: 'Albums',
allowDrag:false,
allowDrop:false
});
tree.setRootNode(root);

featured_node = new Tree.TreeNode({text:'Featured', cls:'album-node', allowDrag:false});
primary_thumb_detail_node = new Tree.TreeNode({text:'Thumbnail / Detail', cls:'album-node', allowDrag:false});
primary_thumb_detail_node.on('beforeappend', function(tree, node, child_node) {
if (node.childNodes.length == 0) {
child_node.text = '(Thumb) '+child_node.text;
}
else {
child_node.text = '(Detail) '+child_node.text;
}
});

root.appendChild(
featured_node,
primary_thumb_detail_node
);

tree.render();
root.expand();

// create the required templates
var tpl = new Ext.Template(
'<div class="thumb-wrap" id="{name}">' +
'<div class="thumb"><img src="{url}" class="thumb-img"></div>' +
'<span>{shortName}</span>' +
'<span>Uploaded By: {uploaded_by}</span>' +
'<span>Uploaded On: {created}</span></div>'
);

var qtipTpl = new Ext.Template(
'<div class="image-tip"><img src="{url}" align="left">'+
'<b>Image Name:</b>' +
'<span>{name}</span></div>'
);
qtipTpl.compile();

// initialize the View
view = new Ext.JsonView(images_view_el, tpl, {
multiSelect: true,
jsonRoot: 'images'
});

var lookup = {};

view.prepareData = function(data){
data.shortName = data.name.ellipse(35);
data.uploaded_by = data.uploaded_by;
data.qtip = new String(qtipTpl.applyTemplate(data));
lookup[data.name] = data;
return data;
};

var dragZone = new ImageDragZone(view, {containerScroll:true,
ddGroup: 'organizerDD'});

view.on('load', set_mapped_images);
view.load({
url: 'index.tbapp?method=fc&cont=Assets&op=ajax_get_images_json&item_id='+item_id,
params: 'method=fc&cont=Assets&op=ajax_get_images_json&item_id='+item_id
});

var rz = new Ext.Resizable('organizer_layout', {
wrap:true,
pinned:true,
adjustments:[-6,-6],
minWidth:300
});
rz.on('resize', function(){
layout.layout();
});
rz.resizeTo(900, 600);
}
};
}();



http://www.timothyfisher.com/image_viewer.jpg

Rowan
16 Oct 2007, 2:35 AM
use the resizeEl config with the div that you have in the panel and the toolbar will sit above the overflowing panel.