PDA

View Full Version : Local Grid Filtering



visual-a
4 May 2010, 12:14 PM
I have an app that uses the Viewport. I am loading data into a grid from an external database through a JSON store. Is it possible to filter the grid locally from a form located in a different region of the Viewport? I would also need the same filter to work on a grid that loads in a second tab in the "center" region of the Viewport. I have included my code below for any references you may need to how the application is presently being built:


Ext.ns("NovoPT");

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

Ext.onReady(function() {

//Ext.QuickTips.init();

var structure = {
TacticGroups: ['Speakers', 'Sales Representatives', 'MSA Team', 'Other DM', 'Publications', 'KOL/Non-Speakers', 'Non Personal', 'Conventions']
},
speakers = [],
salesrep = [],
msa = [],
othrdm = [],
pub = [],
kolnonspk = [],
nonprsnl = [],
cnvntns = [],
fields = [],
columns = [],
data = [],
tacGroupRow = [];

function generateConfig(){
var tacLength = speakers.length + salesrep.length + msa.length + othrdm.length + pub.length + kolnonspk.length + nonprsnl.length + cnvntns.length;

Ext.iterate(structure, function(tacGrp){
tacGroupRow.push({
header: tacGrp,
align: 'center',
colspan: tacLength
});
Ext.each(tacGrp, function(tactics){

fields.push({
type: 'string',
name: tactics
});
columns.push({
dataIndex: tactics,
header: tactics
});

data.push();
});
})
}

// Run method to generate columns, fields, row grouping
generateConfig();

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: 'c'},
{name: 'last_update', type: 'date', dateFormat: 'c', 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'},
{name: 'tactics' }
]
});

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.taccol = 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 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);
Ext.getCmp('details').expand();
}
}
}),
loadMask: true,
stripeRows: true,
bbar: new Ext.Toolbar({
store: NovoPT.ds,
height: 30,
contentEl: 'legend',
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;
}
}
})
});

var group = new Ext.ux.grid.ColumnHeaderGroup({
rows: [tacGroupRow]
});

NovoPT.tacticsgrid = new Ext.grid.GridPanel({
border: false,
//layout: 'fit',
store: NovoPT.ds,
colModel: NovoPT.taccol,
sm: new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners: {
rowselect: function(sm, row, rec) {
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);
Ext.getCmp('details').expand();
}
}
}),
loadMask: 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;
}
}
}),
plugins: group
});


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

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

var msgTpl = new Ext.XTemplate(
'<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:date("F j, Y")}</div>',
'<div class="last-date">{last_update:date("F j, Y")}</div>',
'</div>',
'</div>',
'</div>',
'<div class="messages">',
'<h3>Key Messages</h3>',
'<ul>',
'{keyMessage}',
'</ul>',
'</div>',
'</div>'
);

var tacticsTpl = new Ext.XTemplate(
'<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:date("F j, Y")}</div>',
'<div class="last-date">{last_update:date("F j, Y")}</div>',
'</div>',
'</div>',
'</div>',
'<div class="messages">',
'<h3>Tactics</h3>',
'<ul>',
'<tpl for="tactics">',
'<tpl if="istrue == 1">',
'<li> {nice_name}</li>',
'</tpl>',
'</tpl>',
'</ul>',
'</div>',
'</div>'
);

var impactTpl = new Ext.XTemplate(
'<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:date("F j, Y")}</div>',
'<div class="last-date">{last_update:date("F j, Y")}</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,
deferredRender: false,
tbar: [{
xtype: 'button',
//handler: submitSearchForm,
text: 'View All Details'
}],
items:[
{id: 'msgTab', xtype: 'panel', autoScroll: true, tpl: [msgTpl], title:'Messages'},
{id: 'tacticsTab', xtype: 'panel', autoScroll: true, tpl: [tacticsTpl], title:'Tactics'},
{id: 'impactTab', xtype: 'panel', autoScroll: true, tpl: [impactTpl], title:'Study Impact'}
]
});


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,
tbar: [{
xtype: 'button',
text: 'Submit'
},{
xtype: 'button',
text: 'Clear'
}]
},{
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,
title:'Filter By',
bodyStyle:'background-color:#ffffff;',
collapseMode: 'mini',
collapsible:true
},{
id:'details',
region:'east',
layout:'fit',
width:300,
//contentEl:'east',
border:true,
bodyStyle:'background-color:#eae9ee;',
collapsible:true,
collapsed: true,
floatable: false,
collapseMode: 'mini',
//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,
bodyStyle:'background-color:#eae9ee;',
items:[NovoPT.centerTabs]
}]
});

NovoPT.ds.load();

}); // eo function onReady

// eofAny advice would be greatly appreciated...

tubamanu
4 May 2010, 10:43 PM
yes, u can add an textfield into your viewport and enableKeyEvents and then filter your store locally...



var searchField = new Ext.form.TextField({
allowBlank: true,
emptyText:'Search',
enableKeyEvents: true,
width: 140,
listeners: {
keyup: function(el, type) {
var grid = gridToFilter;
var needle = 'Band' // filter for speakers
grid.store.filter(needle, el.getValue());
}
}
});

visual-a
5 May 2010, 10:46 AM
The form inside the region in question is being built on the backend with records from a database. Some are checkboxes and some are text fields. Could I somehow grab those values within an event listener and use them to filter the grid without creating any new Ext.form objects within the docready?

visual-a
25 May 2010, 12:10 PM
I ended up doing all the filtering on the backend.

steffenk
25 May 2010, 12:55 PM
what you are looking for is filterBy. This is a function, getting each record as param, and you return true for not filtered and false for filtered.
It's on you to set the conditions for filtering.

visual-a
25 May 2010, 1:00 PM
I solved the solution like this as I wanted to filter and unfilter per click in the tree...


NovoPT.clearingFilters = false;
NovoPT.checkedFilters = new Array();
NovoPT.filterStore = {};
NovoPT.tree = new Ext.tree.TreePanel({
//title: 'New Search',
useArrows:true,
//autoScroll:true,
animate:true,
enableDD: false,
border: false,
//containerScroll: true,
rootVisible: false,
//frame: true,
root: {
nodeType: 'async'
},
selModel: new Ext.tree.MultiSelectionModel(),
// auto create TreeLoader
dataUrl: WEBROOT + 'filters/list_data',

listeners: {
'checkchange': function(node, checked){
var prop_name = (node.parentNode.parentNode.isHiddenRoot()) ? node.parentNode.attributes.text.toLowerCase() : node.parentNode.parentNode.attributes.text.toLowerCase();
if(checked) {
if(typeof NovoPT.filterStore[prop_name] != "undefined") {
NovoPT.filterStore[prop_name].push(node.text);
} else {
NovoPT.filterStore[prop_name] = new Array(node.text);
}
NovoPT.tree.selModel.select(node, 'checkchange', true);
} else {
if(NovoPT.filterStore[prop_name].length > 1) {
NovoPT.filterStore[prop_name].remove(node.text);
} else {
delete NovoPT.filterStore[prop_name];
}
NovoPT.tree.selModel.unselect(node, 'checkchange', true);
}

if(!NovoPT.clearingFilters) {
NovoPT.ds.load({params:{filterData: Ext.encode(NovoPT.filterStore)}});
NovoPT.gs.load({params:{filterData: Ext.encode(NovoPT.filterStore)}});
}

//NovoPT.tacticsgrid.store.load({params:{filterData: Ext.encode(NovoPT.filterStore)}});

}
}

});