PDA

View Full Version : Data Binding: On Grid 'rowclick' event to Tab panel in 3 seperate tabs



visual-a
29 Apr 2010, 8:39 AM
Hi all,

I am currently developing a pretty standard web app that grabs JSON data from a db and places it in a grid that can be filtered. I'm stuck on a problem with showing detailed data from the JSON store in the 'east' section of the Viewport. I am trying to fill three seperate tabs in that section on a 'rowclick' event. At the moment I only have the first tab displaying the data on each 'rowclick' event. Do I need to create a second data store outside of the GridPanel object in order to fire the tabchange listener inside the TabPanel object? Or is there an easier way to do this? Below is my code...I appologize, it's a little lengthy (my first time using EXT):


Ext.ns("NovoPT");

Ext.BLANK_IMAGE_URL = './ext-3.2.0/resources/images/default/s.gif';

Ext.onReady(function() {

Ext.QuickTips.init();

var loadingMask = Ext.get('loading-mask');
var loading = Ext.get('loading');
// Hide loading message
loading.fadeOut({ duration: 0.2, remove: true });
// Hide loading mask
loadingMask.setOpacity(0.9);
loadingMask.shift({
//xy: loading.getXY(),
//width: loading.getWidth(),
//height: loading.getHeight(),
remove: true,
duration: 0.3,
opacity: 0.1,
easing: 'fadeOut'
});

NovoPT.ds = new Ext.data.JsonStore({
root: 'publications',
url: WEBROOT + '/publications/show_list',
idProperty:'slug',
fields: [
{name: 'slug', type: 'string'},
{name: 'title', type: 'string', mapping:'title'},
{name: 'abbreviated_name', type: 'string', mapping:'abbreviated_name'},
{name: 'author', type: 'string', mapping:'author'},
{name: 'estimatedDate', type: 'date', dateFormat: 'Y-m-d'},
{name: 'last_update', type: 'date', dateFormat: 'Y-m-d', mapping:'last_update'},
{name: 'brand', type: 'string', mapping:'brand'},
{name: 'company', type: 'string', mapping:'company'},
{name: 'mostImpactedAudience', type: 'string', mapping:'mostImpactedAudience'},
{name: 'topic', type: 'string', mapping:'topic'},
{name: 'title', type: 'string', mapping:'title'},
{name: 'keyMessage', type: 'string', mapping:'keyMessage'},
{name: 'potentialStudyImpact', type: 'string', mapping:'potentialStudyImpact'},
{name: 'journal_congress', type: 'string', mapping:'journal_congress'},
{name: 'supportingData', type: 'string', mapping:'supportingData'},
{name: 'status', type: 'string', mapping:'status'},
{name: 'publicationResponseToSpeakers', type: 'string', mapping:'publicationResponseToSpeakers'},
{name: 'liveSpeakerTraining', type: 'string', mapping:'liveSpeakerTraining'},
{name: 'speakerNewsChannel', type: 'string', mapping:'speakerNewsChannel'},
{name: 'provideAsSlideLibraryOnly', type: 'string', mapping:'provideAsSlideLibraryOnly'},
{name: 'incorporateAsMandatorySlides', type: 'string', mapping:'incorporateAsMandatorySlides'},
{name: 'salesTraining', type: 'string', mapping:'salesTraining'},
{name: 'incorporatePcpVisAid_BOE', type: 'string', mapping:'incorporatePcpVisAid_BOE'},
{name: 'incorporateEndoVisAid', type: 'string', mapping:'incorporateEndoVisAid'},
{name: 'salesBackground', type: 'string', mapping:'salesBackground'},
{name: 'publicationResponseToReps', type: 'string', mapping:'publicationResponseToReps'},
{name: 'createNewDetailPiece', type: 'string', mapping:'createNewDetailPiece'},
{name: 'reprintCarrier', type: 'string', mapping:'reprintCarrier'},
{name: 'proactiveKOLOutreach', type: 'string', mapping:'proactiveKOLOutreach'},
{name: 'msaSlides', type: 'string', mapping:'msaSlides'},
{name: 'diLetter', type: 'string', mapping:'diLetter'},
{name: 'msaTraining', type: 'string', mapping:'msaTraining'},
{name: 'prInitiatives', type: 'string', mapping:'prInitiatives'},
{name: 'lte', type: 'string', mapping:'lte'},
{name: 'secondaryManuscript', type: 'string', mapping:'secondaryManuscript'},
{name: 'kolOther', type: 'string', mapping:'kolOther'},
{name: 'letterToKOLAdvocates', type: 'string', mapping:'letterToKOLAdvocates'},
{name: 'presentToAdvisoryBoards', type: 'string', mapping:'presentToAdvisoryBoards'},
{name: 'presentToPracticeInsightsGroups', type: 'string', mapping:'presentToPracticeInsightsGroups'},
{name: 'dearDoctorLetter', type: 'string', mapping:'dearDoctorLetter'},
{name: 'nmlActivity', type: 'string', mapping:'nmlActivity'},
{name: 'productTheaters', type: 'string', mapping:'productTheaters'},
{name: 'conventionActivities', type: 'string', mapping:'conventionActivities'},
{name: 'actionRequired', type: 'string', mapping:'actionRequired'}
]
});

NovoPT.col = new Ext.ux.grid.LockingColumnModel([
{header: 'Brand', width: 110, sortable: true, dataIndex: 'brand'},
{header: 'Topic', width: 120, sortable: true, dataIndex: 'topic'},
{header: 'Title', width: 500, sortable: true, dataIndex: 'title'},
{header: 'Abbrev Title', width: 200, sortable: true, dataIndex: 'abbreviated_name'},
{header: 'Publiction Date', width: 100, sortable: true, dataIndex: 'estimatedDate', xtype: 'datecolumn', format: 'M d, Y'},
//{header: 'Citation', width: 200, sortable: true, dataIndex: 'citation'},
{header: 'Status', width: 100, sortable: true, dataIndex: 'status'},
{header: 'Last Update', width: 100, sortable: true, dataIndex: 'last_update', xtype: 'datecolumn', format: 'M d, Y'},
{header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
{header: 'Author', width: 150, sortable: true, dataIndex: 'author'},
{header: 'Journal', width: 175, sortable: true, dataIndex: 'journal_congress'},
//{header: 'Notes', width: 200, sortable: true, dataIndex: 'notes', hidden: true},
{header: 'Supporting Data', width: 300, sortable: true, dataIndex: 'supportingData', hidden: true},
{header: 'Key Messages', width: 300, sortable: true, dataIndex: 'keyMessage', hidden: true},
//{header: 'Strategic Imperative', width: 300, sortable: true, dataIndex: 'strategic_imperative'},
{header: 'Potential Study Imapct', width: 300, sortable: true, dataIndex: 'potentialStudyImpact', hidden: true},
{header: 'Action Required', width: 300, sortable: true, dataIndex: 'actionRequired', hidden: true},
{header: 'Segment', width: 100, sortable: true, dataIndex: 'mostImpactedAudience'}
//{header: 'Tactic Group', width: 300, sortable: true, dataIndex: 'tacticGroup'},
//{header: 'Tactic', width: 300, sortable: true, dataIndex: 'tactic'},
//{header: 'Tactic Comment', width: 300, sortable: true, dataIndex: 'tacticComment', hidden: true}
]);

NovoPT.listgrid = new Ext.grid.GridPanel({
border: false,
//layout: 'fit',
store: NovoPT.ds,
colModel: NovoPT.col,
sm: new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners: {
rowselect: function(sm, row, rec) {
//var record = sm.getSelected();
//var idx = this.sm.row(id);
//console.log(idx);
var msgPanel = Ext.getCmp('msgTab');
var tacticsPanel = Ext.getCmp('tacticsTab');
var impactPanel = Ext.getCmp('impactTab');
msgTpl.overwrite(msgPanel.body, rec.data);
tacticsTpl.overwrite(tacticsPanel.body, rec.data);
impactTpl.overwrite(impactPanel.body, rec.data);
}
}
}),
loadMask: true,
stripeRows: true,
bbar: new Ext.PagingToolbar({
pageSize: 18,
store: NovoPT.ds,
displayInfo: true
}),
view: new Ext.ux.grid.LockingGridView({
//forceFit: true,
enableRowBody: true,
getRowClass: function(record, index) {
var c = record.get('brand');
switch (c){
case 'Levemir':
return 'levemir';
break;
case 'NovoLog':
return 'novolog';
break;
case 'NovoLog Mix 70/30':
return 'novomix';
break;
case 'SIBA/SIAC':
return 'siba';
break;
case 'Victoza':
return 'victoza';
break;
default: return;
}
}
})
});


NovoPT.centerTabs = new Ext.TabPanel({
renderTo: 'tabs',
activeTab: 1,
border: false,
autoScroll: true,
bodyStyle:'background:#eae9ee;',
items:[
{contentEl:'tabs-1', title:'Home'},
//{contentEl:'tabs-2', title:'Timeline'},
{
layout: 'fit',
//autoScroll:true,
items: [NovoPT.listgrid],
title:'List'
},
{contentEl:'tabs-4', title:'Tactics'}
]
});

/*centerTabs.on("tabchange", function(poo, ltab) {
if (ltab instanceof Ext.grid.GridPanel) {
Ext.ds.load();
}
});*/

var msgTpl = new Ext.Template(
'<div id="tabs-5">',
'<div class="meta-head">',
'<div class="top clear">',
'<div class="icon"><img src="img/doc_icon.gif" alt="" /></div>',
'<div class="pub-info">',
'<h2>{title}</h2>',
'<div class="created-date">{estimatedDate}</div>',
'<div class="last-date">{last_update}</div>',
'</div>',
'</div>',
'</div>',
'<div class="messages">',
'<h3>Key Messages</h3>',
'<ul>',
'{keyMessage}',
'</ul>',
'</div>',
'</div>'
);

var tacticsTpl = new Ext.Template(
'<div id="tabs-6">',
'<div class="meta-head">',
'<div class="top clear">',
'<div class="icon"><img src="img/doc_icon.gif" alt="" /></div>',
'<div class="pub-info">',
'<h2>{title}</h2>',
'<div class="created-date">{estimatedDate}</div>',
'<div class="last-date">{last_update}</div>',
'</div>',
'</div>',
'</div>',
'<div class="messages">',
'<h3>Tactics</h3>',
'<ul>',
//'<?=$this->ItemStore->displayTactics($tactics, '<li>%s</li>');?>',
'</ul>',
'</div>',
'</div>'
);

var impactTpl = new Ext.Template(
'<div id="tabs-7">',
'<div class="meta-head">',
'<div class="top clear">',
'<div class="icon"><img src="../img/doc_icon.gif" alt="" /></div>',
'<div class="pub-info">',
'<h2>{title}</h2>',
'<div class="created-date">{estimatedDate}</div>',
'<div class="last-date">{last_update}</div>',
'</div>',
'</div>',
'</div>',
'<div class="messages">',
'<h3>Potential Study Impacts</h3>',
'<p>{potentialStudyImpact}</p>',
'</div>',
'</div>'
);

NovoPT.rightTabs = new Ext.TabPanel({
renderTo: 'tabs2',
activeTab: 0,
border: false,
autoScroll:true,
bodyStyle:'padding:10px;',
items:[
{id: 'msgTab', xtype: 'panel', tpl: [msgTpl], title:'Messages'},
{id: 'tacticsTab', xtype: 'panel', tpl: [tacticsTpl], title:'Tactics'},
{id: 'impactTab', xtype: 'panel', tpl: [impactTpl], title:'Study Impact'}
],
listeners: {
tabchange: function(tabPnl, tb) {

};
}
});

NovoPT.viewport = new Ext.Viewport({
id:'simplevp',
layout:'border',
loadMask: {msg:'Loading Publication Data...'},
border:false,
items:[{
region:'west',
layout: {
type: 'accordion',
animate: true
},
items: [{
contentEl: 'west',
title: 'New Search',
bodyStyle:'padding:5px;',
border: false,
autoScroll: true
},{
title: 'Saved Searches',
html: '<p>Some stuff in here.</p>',
bodyStyle:'padding:5px;',
border: false
},{
title: 'Auto-Reports',
html: '<p>Some stuff in here.</p>',
bodyStyle:'padding:5px;',
border: false
}],
layoutConfig:{animate:true},
width:200,
border:true,
autoScroll:true,
title:'Filter By',
bodyStyle:'background-color:#ffffff;',
collapsible:true
},{
id:'details',
region:'east',
layout:'fit',
width:300,
//contentEl:'east',
border:true,
bodyStyle:'background-color:#eae9ee;',
collapsible:true,
collapsed: true,
floatable: false,
//hideCollapseTool: true,
items:[NovoPT.rightTabs]
},{
region:'north',
height:144,
contentEl:'north',
border:false,
bodyStyle:'padding:0px;background-color:#ffffff;'
},{
region:'south',
height:65,
contentEl:'south',
border:false,
bodyStyle:'background-color:#ffffff;'
},{
region:'center',
layout:'fit',
border:true,
autoScroll:true,
bodyStyle:'background-color:#eae9ee;',
items:[NovoPT.centerTabs]
}]
});

NovoPT.ds.load();

}); // eo function onReady

// eofAny help is greatly appreciated...

AK

visual-a
29 Apr 2010, 12:07 PM
Yeah... so I figured it out. All I needed was to render all the tabs in the layout onPageLoad by adding the configuration 'deferredRender: false' in the TabPanel object.

BTW... EXT is by far the easiest tool I've used to create large web applications in record time... Excellent work by the dev team over there!