PDA

View Full Version : Problem writing a plugin - need help



archmisha
13 Aug 2009, 11:59 PM
Hi,
I am trying to write a plugin for TabPanel, that highlights invalid tabs if the tab panel is in a form and isValid method of the form is called.

Problem is whatever events i try to add listener to, either form fields are not present yet, or i miss some fields...
I need to coupe with the fact that some fields might be present on render but others might be added and removed later and doLayout called...



Ext.namespace('Ext.ux.plugins');

Ext.ux.plugins.InvalidTabHighlighter = function(config)
{
// every tab must have this cls to be highlighted
if (!config.tabCls)
config.tabCls = '.x-tab-body';
else if (config.tabCls[0] != '.')
config.tabCls = '.' + config.tabCls;

Ext.apply(this, config);
};

Ext.extend(Ext.ux.plugins.InvalidTabHighlighter, Ext.util.Observable,
{
init: function(tabPanel)
{
this.invalidTabs = {};
Ext.apply(tabPanel,
{
onRender: tabPanel.onRender.createSequence(function()
{
// first find the form this tab panel is in
var formPanel = tabPanel.getEl().up('.x-form');
if (!formPanel)
return;

var formPanelComp = Ext.getCmp(formPanel.parent().parent().id); // is there a better way?

// on what event should i register in order to assign all fields the needed listeners ???
formPanelComp.on('add', function(container, component, index)
{
var fieldComp = component; // how to check component is a form Field ??
fieldComp.un('invalid', this.markInvalid); // to not add twice
fieldComp.un('valid', this.markValid); // to not add twice
fieldComp.on('invalid', this.markInvalid);
fieldComp.on('valid', this.markValid);
});
Ext.apply(formPanelComp.getForm(), {
isValid: formPanelComp.getForm().isValid.createSequence(function()
{
console.dir(this.invalidTabs);
new Ext.util.DelayedTask(function()
{
for (var invalidTabId in this.invalidTabs)
{
if (invalidTabId != 'remove')
this.hightlightTab(Ext.fly(tabPanel.getTabEl(invalidTabId).id));
}
}, this).delay(100);
}, this)
});
}, this)
});
},

markInvalid: function(field)
{
this.invalidTabs[field.getEl().up(this.tabCls).id] = 1;
},

markValid: function(field)
{
delete this.invalidTabs[field.getEl().up(this.tabCls).id];
},

hightlightTab: function(tabHeaderElement)
{
tabHeaderElement.frame("ff0000", 3, {duration: 2});
}
});

14 Aug 2009, 1:38 AM
why not just use the afterrender event?

archmisha
14 Aug 2009, 1:42 AM
after render event of the tab panel?

archmisha
14 Aug 2009, 2:05 AM
If i use afterrender event on the tabPanel
then


formPanel.child('.x-form-item')


finds nothing... I think they are not built yet