Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Ext User
    Join Date
    Jul 2009
    Location
    Mexico City
    Posts
    5
    Vote Rating
    0
    Esparry is on a distinguished road

      0  

    Question Fire event when a tab is closed

    Fire event when a tab is closed


    Hi, this is my first post, I have a problem here, I hope you folks can help me.
    I have a ext Window container, inside I have two items, an ext.tabPanel (limitInfoTab) and a single ext.panel (LimitsList)

    Inside the ext.panel(LimitsList) I've got a list of checkboxes, when I do the "onclick" on one of those checkboxes, a new tab is added to my tabpanel.

    Now, I need to fire an event when I click on the close button for each tabs added to my tabpanel. I tried a lot of things and I have been reading many post in this forum, but I just can't find a way

    Code:
    function addTab(limitID,domObj){
                    limitInfoTab.add({
                        title: domObj,
                        id: 'tab_'+limitID,
                        closable:true,
                        /*handler: function(){
                                    this.on('beforeremove',alert('closing'))
                                  },*/
                        autoLoad: {url: "some page with the html content for this panel"}
                    }).show();
    Thanks.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    3
    tryanDLS is on a distinguished road

      0  

    Default


    Instead of handler
    Code:
    listeners:{close: function() {alert('Closed')}}

  3. #3
    Ext User
    Join Date
    Jul 2009
    Location
    Mexico City
    Posts
    5
    Vote Rating
    0
    Esparry is on a distinguished road

      0  

    Default


    Hi Tryan
    I used it , but when I click on the close button of the tab nothing happens. I've got the instantiation of this tabPanel in other section of the code. Maybe this is affecting the behavior.

  4. #4

  5. #5
    Ext User
    Join Date
    Jul 2009
    Location
    Mexico City
    Posts
    5
    Vote Rating
    0
    Esparry is on a distinguished road

      0  

    Smile


    Ok this is the "Run as it code", the goal is fire an event when you click on the close button from each tab, the tabs are generated when you click on the checkboxes.

    Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title id='title'>Title</title>
     
            <!-- ** CSS ** -->
            <!-- base library -->
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
     
            <!-- overrides to base library -->
     
     
            <!-- ** Javascript ** -->
            <!-- base library -->
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../../ext-all-debug.js"></script>
     
     
            <!-- overrides to base library -->
     
            <!-- extensions -->
     
            <!-- page specific -->
     
            <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
     
            Ext.onReady(function(){
    			
    			    var button = Ext.get('show-btn');
    			
    			    button.on('click', function(){
    			
    			        limitInfoTab = new Ext.TabPanel({
    					   enableTabScroll:true,
    				       region    : 'center',
    			           margins   : '3 3 3 0', 
    			           activeTab : 0,
    					   width     : 400,
    				       defaults: {autoScroll:true}//,
    				       // plugins: new Ext.ux.TabCloseMenu()
    		   		 });
    			
    			        // Panel for the west
    			        var nav = new Ext.Panel({
    			            title       : 'Navigation',
    			            region      : 'west',
    			            split       : true,
    			            width       : 200,
    			            collapsible : true,
    			            margins     : '3 0 3 3',
    			            cmargins    : '3 3 3 3',
    						//the next list is generated dynamic from some place
    						html : '<div id="divLimitList"><input type="checkbox" name="ch1" value="1" id="1" onclick="addTab(this);"><br><input type="checkbox" name="ch2" id="2" value="2" onclick="addTab(this);"><br><input type="checkbox" name="ch3" value="3" id="3" onclick="addTab(this);"></div>'
    			        }); 
    			
    			        var win = new Ext.Window({
    			            title    : 'Layout Window',
    			            closable : true,
    			            width    : 600,
    			            height   : 350,
    			            //border : false,
    			            plain    : true,
    			            layout   : 'border',
    			            items    : [nav, limitInfoTab]
    			        });
    			
    			        win.show(button);
    			    });
    			});//end onReady
    					
    			   function addTab(obj){
    		        limitInfoTab.add({
    		            title: obj.name,
    					id: 'tab_'+obj.id,
    		            closable:true,
    					//if you click on the close button of this tab ,fire an event.
    					listeners:{close: function() {alert('Closed')}} 
    					//autoLoad: {url: ''}
    		        }).show(); 
    		    }	
            </script>
     
        </head>
        <body>
    <input type="button" id="show-btn"  value="Show Window"/>
        </body>
    </html>
    I Hope this works for you, thx for helping me

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    3
    tryanDLS is on a distinguished road

      0  

    Default


    Not sure what's going on here yet. These events fire fine in 3.0, but not 2.2.1

  7. #7
    Ext User euchiyama's Avatar
    Join Date
    Apr 2008
    Location
    Chicago, IL
    Posts
    149
    Vote Rating
    0
    euchiyama is on a distinguished road

      0  

    Default


    Take out the listener on the tab and put one on the TabPanel:

    Code:
                        limitInfoTab = new Ext.TabPanel({
                           enableTabScroll:true,
                           region    : 'center',
                           margins   : '3 3 3 0',
                           activeTab : 0,
                           width     : 400,
                           defaults: {autoScroll:true},
                             listeners: {
                                     remove: function(tabPanel,tab) {
                                             alert('Closed ' + tab.id);
                                        }}
    
    ...
    
                   function addTab(obj){
                    limitInfoTab.add({
                        title: obj.name,
                        id: 'tab_'+obj.id,
                        closable:true,
                        //if you click on the close button of this tab ,fire an event.
                        listeners:{close: function() {alert('Closed')}} 
                        //autoLoad: {url: ''}

  8. #8
    Ext User
    Join Date
    Jul 2009
    Location
    Mexico City
    Posts
    5
    Vote Rating
    0
    Esparry is on a distinguished road

      0  

    Thumbs up


    Great, It's working now , I just don't understand, why if I put this on the function:

    Code:
    remove: function(limitInfoTab,tab) {
                alert('Closed ' + tab.id);
                }
    the "tab" is recognized? is some kind of default setting? I mean my object is "limitInfoTab",
    whenever I click on a tab close button nested to the limitInfoTab, limitInfoTab will know
    wich of the tab has been closed?

    Thx to everybody for helping me, I'm a new extjs user, I really like to be part of this community.

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    3
    tryanDLS is on a distinguished road

      0  

    Default


    Not sure what you're asking. The TabPanel and the tab being removed are passed as args to your handler.

Thread Participants: 2