Results 1 to 4 of 4

Thread: Problem writing a plugin - need help

  1. #1
    Sencha User
    Join Date
    May 2008
    Posts
    180

    Default Problem writing a plugin - need help

    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...

    Code:
    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});
        }
    });

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    why not just use the afterrender event?

  3. #3
    Sencha User
    Join Date
    May 2008
    Posts
    180

    Default

    after render event of the tab panel?

  4. #4
    Sencha User
    Join Date
    May 2008
    Posts
    180

    Default

    If i use afterrender event on the tabPanel
    then
    Code:
    formPanel.child('.x-form-item')
    finds nothing... I think they are not built yet

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •