1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    4
    Vote Rating
    0
    Jena is on a distinguished road

      0  

    Default Load the content of the tab dynamically

    Load the content of the tab dynamically


    According to current implementation when i click on any menu item number of tabs loads dynamically and also the contents of all the Tabs loads at the same time.

    I wanna include the functionality so that when i will click on any tab then only the content can be loaded.Cutting off the activeTab config from tab panel is not the solution for my problem because this just hides the data.

    Exactly What I mean is:

    When the menu gets loaded at that time TabPanel is made and also its inserting few grids in it and when user clicks on any item on the menu it takes the name of the item from there and fetches the data from the database here it fetches the data from database for the Tabs of that menu item but i want when clicking on a particular Tab then only it should fetch the data from the database

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,103
    Vote Rating
    500
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    So what you need to do is add a menu handler, that when the user clicks, it makes an ajax request to the server.

    When the server returns data, you need to then evaluate it and insert the appropriate tabs/grids that you need.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Sep 2008
    Posts
    4
    Vote Rating
    0
    Jena is on a distinguished road

      0  

    Default


    I appreciate the quick reply Evant..

    Actually i am adding the menu handler so that when a user clicks it makes a Ajax request my problem is not "How to fetch the data" , i am able to fetch the data but all the Tabs are loaded at the time when user clicks on menu handler but i want the data to be loaded at the time when a user clicks the Tab Item.

  4. #4
    Ext User
    Join Date
    Jan 2008
    Posts
    128
    Vote Rating
    0
    LeonardoAP is on a distinguished road

      0  

    Default


    create your tabs with a listerner of activate, and set a load function on it, like this:

    Code:
    {
        id: 'someTab',
        title: 'someTabThatLoadsOnActivate',
        listeners: {
            activate: function() {
                this.load({
                    url: 'somePage.html',
                    text: 'Loading content...'
                })
            }
        }
    }

  5. #5
    Ext User
    Join Date
    Sep 2008
    Posts
    4
    Vote Rating
    0
    Jena is on a distinguished road

      0  

    Default


    This will not work for my code , let me explain with the code i am not posting full code but the partial code to explain my problem :

    Code:
    // When the menu on the left hand side loads this event fires
    menuMgr.on('load', function(mnu) {
    
                                              var northPanel = new Ext.BoxComponent({ // raw
                                                 region: 'north'
                                                ,el: 'north'
                                                ,height: 30
                                                ,margins: '0 0 1 0'
                                                ,items: [header, menuMgr.getMainMenu()]
                                                }); 
                                          
                                   // This is where Tab Panel is created         
                                            reportTab = new Ext.TabPanel({
                                                region : 'center',
                                                id:'xx-report',
                                                activeTab: 0,
                                                 layoutOnTabChange: true,
                                                  margins: '0 5 5 0',
                                                 deferredRender:false
                                                 });  
                                           
                                            var index = 0;
                                         // Here Report grid is created to insert into tab panel  as a Tab
                                            while(index < 9){
                                             reportgrids[index] =   new C5.Web.grid.ReportGrid({
                                                split: true,
                                                border: false,
                                                margins: '0 5 5 0',
                                                metadataRootUrl: rootUrl+'Report.mvc/Metadata/',
                                                reportRootUrl: rootUrl+'Report.mvc/Query/'
                                                });
                                            // Inserting the Grids in Tab panel 
                                            reportTab.insert(index,reportgrids[index]);
                                            
                                            index++;
                                            }
                                            
                                            viewport = new Ext.Viewport({
                                                layout: 'border',
                                                items: [northPanel, menuMgr.getLeftNav(),  reportTab]
                                            });
    
                                            viewport.doLayout();
                                            
                                            setTimeout(function(){
                                                Ext.get('loading').remove();
                                                Ext.get('loading-mask').fadeOut({remove:true});
                                            }, 1000);
    
                                            // This is simply getting to the very first menu item of the initial left nav being displayed.
                                            // We're doing this so the grid is populated with something.
                                            var activeMenu = menuMgr.leftNav.getLayout().activeItem;
                                            if (activeMenu)
                                            var activeMenuItem = activeMenu.getLayout().activeItem;
                                            if (activeMenuItem)
                                            menuMgr.fireEvent('menuitemclick', activeMenuItem.items.items[0].action, activeMenuItem.items.items[0]);
                                            
                });
                   
               // When any item on on the Menu is clicked this event fires    
                menuMgr.on('menuitemclick', function(action, menuItem) {
                        Ext.Ajax.request({
                             url: rootUrl+'Tab.mvc/Detail/'+action+''
                            ,method: 'GET'
                            ,disableCaching: true
                            ,defaultHeaders: {
                           'Accept': 'application/json'
                        }
                            ,success: function(response, options){
                                var resp = Ext.decode(response.responseText);
                                tab = resp.data;
                                var index=0;
                                while(index<tab.length)
                                {
    // On success we are loading the content of the grid on the tab
                                reportgrids[index].load(tab[index], menuItem.iconCls);
                                reportTab.unhideTabStripItem(index);
                                index++;
                                }
                                var maxReportTabs = tab.length;
                                
                                while ( maxReportTabs < 9 )
                                    {
                                         reportTab.hideTabStripItem(maxReportTabs);
                                        maxReportTabs++;
                                    }
                                        reportTab.activate(0);
                        }
                            ,failure: function(){
                            Ext.Msg.alert('status','Unable to load the Tab data')
                        }
                        ,scope: this
                    });
    
                }, this);
    In the above code i am initializing the Tab Panel when menu gets loaded and also the grid is prepared and inserted into the Tab Panel as Tabs, but the content of the grids gets loaded when clicked on any item and this content we are fetching from the data base not from any page , so when i click on the item all the tabs loads which are there for that item .

    I want to change the above functionality , it is more convenient to user as well as according to performance also if the on clicking on item only the tabs gets loaded but not the content and after clicking on the tab content should be loaded.

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar