Results 1 to 6 of 6

Thread: Bug: the setVisible method does not works if invoked on the container

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member dtex-lab's Avatar
    Join Date
    Sep 2009
    Location
    Italy
    Posts
    411

    Default Bug: the setVisible method does not works if invoked on the container

    Hi,

    I'm using ExtJS 6.5

    This simple fiddle illustrates which if I invoke the setVisible method on the container does not works (does not hides the tab)
    The setDisabled invoked on the container works (disable the tab) and this is fine

    Note that if I invoke the setVisible method on the tabs works, but in my real application I do not have and tabConfig,
    so I have to invoke the setVisible method (just like the setDisabled which works) directly on the container



    https://fiddle.sencha.com/#view/editor&fiddle/22mq
    we make IT work for you

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,254

    Default

    The card layout uses visibility of the component to determine what is shown in the body of the layout, which is why those configs are not forwarded on. There's not necessarily a 1-1 mapping in the same way that disabled works.

    As you've suggested, you should change the tabConfig if you want to hide a particular tab in the tab bar.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext JS Premium Member dtex-lab's Avatar
    Join Date
    Sep 2009
    Location
    Italy
    Posts
    411

    Default

    Hi Evan,
    this is not a good news for us.
    The our application is a large application which has several tabpanel and allows customization made by our Partners (for example using JSP)

    We have done a porting of our standard code from Ext 3.4 to Ext 6.5, and to adjust our standard code of sure is possible (even if is hudge for us)
    But we do not have the control of the customized code of our Partners and so we will have to ask them to review their customization to adjust this behavior too.
    Note which using ExtJS 3.4:

    tabPanel.hideTabStripItem(aObject)

    where aObject was to container to hide, works

    Is really not possible for you to find out a work around?

    Thanks in advance for your attention
    we make IT work for you

  4. #4
    Sencha Premium Member tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    457

    Default

    You can do something like this ... untested though pulled from our own codebase where we had to implement hideTabStripItem for backwards compatibility with 2x. You may not need need all the code below as we do some other things in there. I'm sure you can work it out.

    PHP Code:
    Ext.define('Test.overrides.tab.Panel', {
        
    override'Ext.tab.Panel',
        
    hideTabStripItem: function(item) {
            if (!
    this.rendered) {
                
    this.on('render'this.hideTabStripItem.bind(thisitem), 
                    
    this, {delay100singletrue});
                return;
            }
            if (!
    item.isComponent) {
                
    item this.getComponent(item);
            }
            
    item.tab.hide();
            if (
    this.getActiveTab() === item) {
                
    item.hide();
                for (var 
    i=0i<this.items.getCount(); i++) {
                    var 
    it this.items.get(i);
                    if (!
    it.tab.hidden){
                        
    it.show();
                        break;
                    }
                }
            }
        }
    }); 

  5. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,254

    Default

    What I was saying above is the hidden state of the component is used to determine whether that component is visible or not, so it can't be tied to the tab visible state for the card layout to function.

    As the above post mentions, you can polyfill that method. For something fairly generic, I'd use something like:

    Code:
    Ext.define(null, {
        override: 'Ext.tab.Panel',
        showTabStripItem: function(item) {
            this.toggleTabStripItem(item, true);
        },
    
        hideTabStripItem: function(item) {
            this.toggleTabStripItem(item, false);
        },
    
        toggleTabStripItem: function(item, visible) {
            item = this.getComponent(item);
            var tab = item && item.tab;
            if (tab) {
                tab.setVisible(visible);
            }
        }
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  6. #6
    Ext JS Premium Member dtex-lab's Avatar
    Join Date
    Sep 2009
    Location
    Italy
    Posts
    411

    Default

    Thanks everybody for your time.
    The Evan's solution works perfectly, In the my opinion might be an improvement to the standard ExtJS framework
    we make IT work for you

Similar Threads

  1. @UiHandler method not being invoked on Event
    By abshnasko in forum Sencha GXT Q&A
    Replies: 1
    Last Post: 5 May 2012, 11:56 AM
  2. Can't get SetVisible to work with Container
    By wdtracy in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 6 Jul 2011, 3:05 PM

Tags for this Thread

Posting Permissions

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