PDA

View Full Version : [Solved] DataView in Tabs --> rendering issue



lorezyra
2 Dec 2009, 4:48 PM
I am working on a custom Travel / Photo (Vid) log for my website. The vision is for a user to double-click on the Image (Shown in a Gallery-type of view) and a new tab opens up with the detailed story of the adventure.

My Problem is The Dataview renders correctly when rendered inside a basic Panel. But when I add the panel to a Tab, none of the images are rendered as I expected...

Basic panel with expected look: http://www.richiebartlett.com/blog/travel.php

New tab design: http://www.richiebartlett.com/blog/tab.php

My current thinking is that this may be a CSS issue. I can see in firebug the class changes when I move the mouse over the image from "thumb-wrap" to "thumb-wrap x-view-over". However, the selection does not seem to operate.

Can someone point me in the right direction?

lorezyra
2 Dec 2009, 7:33 PM
Ext.onReady(function(){
var xd = Ext.data;
Ext.QuickTips.init();
Ext.apply(Ext.QuickTips.getQuickTip(), {
maxWidth: 200,
minWidth: 100,
showDelay: 50,
trackMouse: true
});

var store = new Ext.data.JsonStore({
url: 'http://<? echo $_SERVER['SERVER_NAME']; ?>/blog/browse-remote-travel.php',
root: 'topics',
totalProperty: 'threads',
idProperty: 'id',
remoteSort: true,

fields: [
'id',
'blogID',
'userId',
'name',
'fullname',
'subject',
'content',
'blogIMG',
{name: 'date' /*, type: 'date', dateFormat: 'timestamp' */},
'w',
'h'
]

});
store.setDefaultSort(
'date',
'userId'
);
store.setBaseParam('blogid',2);
store.sort('date', 'DESC');

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{blogID}">',
'<div class="thumb"><img src="{blogIMG}" title="{content}" width="{w}" height="{h}" border=0 alt="{content}" href="http://<? echo $_SERVER['SERVER_NAME']; ?>/blog/showThread.php?blogid={blogID}" ></div>',
'<span class="x-editable">{subject}<br />By: {fullname}<br />{date}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);

var PLOG = new Ext.DataView({
store: store,
tpl: tpl,
autoHeight:true,
multiSelect: false,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: '<span style="color: #000000; font-weight: bold;">No images to display</span>',


prepareData: function(data){
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
//data.dateString = data.lastmod.format("m/d/Y g:i a");
return data;
}

});

var panel = new Ext.Panel({
id:'images-view',
frame:true,
width:620,
height:340,
layout:'fit',
plain:true,
forceLayout: true,
hideBorders : true,

items: [PLOG],

// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: <? echo $baseConfig->DB_tLIMITS;?>,
store: store,
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
store.load({params:{start:0, limit:<? echo $baseConfig->DB_tLIMITS;?>, blogid:2, trunkMore:1}});
//panel.render("richTravel");

var tabs = new Ext.TabPanel({
renderTo:'richTabs',
id: "richTab",
activeTab: 0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 110,
tabWidth:200,
enableTabScroll:true,
frame:true,
draggable: false,
width:620,
height:390,
plain:true,
forceLayout: true,
layoutOnTabChange: true,
//deferredRender:false,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu(),
items:[{
title: "About",
ctCls: "tabAbout",
tabTip:'About this Plog',
autoLoad: "blog-about.php"
},{
title: 'Richie\'s Plog',
items: [panel],
cls: 'x-panel-body',
tabTip:'Richie\'s Travels and Adventures',
listeners: {
render: {fn: function(){console.log('target-tab Rendered***********');}
}//end listeners
},
//contentEl: "richTravel",
autoScroll: false
}]
});

var addTab= function (tTitle, tMarkup, tClose){
tabs.add({
title: tTitle,
tabTip: tTitle,
iconCls: 'tabs',
html: tMarkup,
closable:tClose
}).show();
};

function addTabPage(tID, tTitle, tURL){
tabs.add({
title: tTitle,
tabTip: tTitle,
iconCls: 'tabs',
id: tID,
autoLoad: {url: tURL, callback: this.initSearch, scope: this, scripts:true},
closable:true
}).show();
}//end function addTabPage


// Update the contents of a tab if it exists, otherwise create a new one
function updateTab(tabId, title, url) {
var tab = tabs.getItem(tabId);
if(tab){
tab.getUpdater().update(url);
tab.setTitle(title);
}else{
tab = addTabPage(tabId, title, url);
}
tabs.setActiveTab(tab);
}//end function updateTab

function doAction(e, t){
//if(t.href.substring(0,7).toLowerCase()!="mailto:"){
if(t.id!="noEXT"){
e.stopEvent();
updateTab(t.title, t.title, t.href);
}//end if noEXT
}//end function doAction

// over-ride the browser's link handling... so I can force the new page in a new tab
tabs.body.on("click", doAction, null, {delegate:"a"});
tabs.body.on("dblclick", doAction, null, {delegate:"img"});


});
I can render just the dataview panel with no problems... but when inserted into a Tab, the rendering does not seem complete...

Am I missing something?

lorezyra
6 Dec 2009, 10:02 PM
I'm using the panel to render the DataView prior to adding it to the Tab because I need the pagingToolbar. The template renders okay, but the selection does not appear as it should (just the Panel is great, but inside a tab it's missing)...

lorezyra
6 Dec 2009, 11:10 PM
Once I loaded the correct CSS file, the presentation of the rendering appeared as expected! There was nothing wrong with the Ext layout nor with the TABS/Panel...


Heh: Repeat keyboard bashing until new keyboard arrives... ;)