PDA

View Full Version : FilterRow Plugin Implementation



tagsum
3 Apr 2012, 6:07 AM
I'm trying to integrate the FilterRow plugin found here (http://github.com/nene/filter-row), into a GridPanel nested in a TabPanel. I am following the implementation techniques outlined here (http://www.sencha.com/learn/advanced-techniques-for-ext-designer/). The reason I'm posting in the Ext Designer forum is because I feel that since I'm following the techniques outlined by Sencha for integration of plugins, I shouldn't be running into this problem. I'm not sure if it's an error on my part during implementation or a bug in the plugin itself.

I am using Ext 3.4.0 with the Ext JS FilterRow plugin v0.6



ReportPanel_CenterPanel_CommissionReportPanel = Ext.extend(ReportPanel_CenterPanel_CommissionReportPanelUi,
{
initComponent: function()
{
/*
* init
*/
ReportPanel_CenterPanel_CommissionReportPanel.superclass.initComponent.call(this);

/*
* set up the baseparams
*/
this.getStore().setBaseParam('do', 'getCommissionReport');

/*
* set up the row expander plugin
*/
var rowExpanderPlugin = new Ext.ux.grid.RowExpander;

//replace the 0th column with our rowExpander
/*
* SIDE NOTE: Using unshift() did NOT work here.
* I had to create a container column in Ext Designer
* and replace the column with the rowExpanderPlugin
* here
*/
this.getColumnModel().config[0] = rowExpanderPlugin;
this.getColumnModel().setConfig(this.getColumnModel().config);

//cycle through each column and add filter property
Ext.iterate(this.colModel.config, function()
{
this.filter = {
};
});

/*
* set up the filterrow plugin
*/
var filterRowPlugin = new Ext.ux.grid.FilterRow({
refilterOnStoreUpdate: true
});

/*
* init the plugins
*/
this.plugins = [
this.initPlugin(rowExpanderPlugin),
this.initPlugin(filterRowPlugin)
];
}
});
Ext.reg('ReportPanel_CenterPanel_CommissionReportPanel', ReportPanel_CenterPanel_CommissionReportPanel);


At run time, everything seems to load okay. Nothing is rendered until the tab is activated, but once I click the tab, the FilterRow header has been created, but no fields are rendered. Even though we're calling render() to a valid DOM element, it's not rendering the textfield to the container. I end up with a bunch of empty div tags:

33509



<div id="ext-comp-1022-filter-1" class="x-small-editor filter-row-icon"></div>


I've tested the plugin by itself using the example source provided and it works okay. To be honest, I'm not quite sure where the conflict lies. Ideas anyone?

I'm happy to provide my source code to anyone that wants to look into this.