1. #11
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    Thanks for the response (you're up early!). Everything is loading fine from what firebug says, with the exception of the gif files (border, tabfirst and tablast). These were the only items I didn't copy over from the example code before I started my adaptation. The css and js files look like they're loading fine (inspected the response). My index.html has the tag for the css file (ext-all.css and GroupTabPanel.css) , my view (which is defined within my main controller) is where I have listed the Ext.ux.GroupTabPanel as a required file. (it's only within my view - did I need to add it elsewhere? seems to load fine).
    I've taken a few steps back from my adaptation to try to pinpoint where something is amiss, but luck. Nobody else having problems? I saw ppl posting questions about earlier versions of ExtJS so there must be something I'm doing wrong.

    Code:
    {
                xtype: 'grouptabpanel',
                activeGroup: 0,
                items: [
                   {
                    mainItem: 0,
                    items: [{
                        title: 'Help Pages',  
                        //border: false,
                        xtype: 'panel',
                        items:[{title:'hi'}],
                        height: null
                    },{
                        title: 'Using the Tool',  
                        //border: false,
                        xtype: 'gridportlet',
                        height: null
                    },{
                        title: 'How To...',
                        style: 'padding: 10px;',
                        border: false,
                        layout: 'fit',
                        items: [{
                            xtype: 'tabpanel',
                            activeTab: 1,
                            items: [{
                                title: 'Nested Tabs',
                                html: '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, '+
        'sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales '+
        'non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet '+
        'tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla.</p>'
                            }]  
                        }]  
                    },{
                        xtype: 'portalpanel',
                        title: 'FAQ',
                        tabTip: 'Dashboard tabtip',
                        border: false,
                        items: [{
                            flex: 1,
                            items: [{
                                title: 'Portlet 1',
                                html: '<div class="portlet-content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, '+
        'sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales '+
        'non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet '+
        'tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla.</p></div>'
                            },{
                                
                                title: 'Stock Portlet',
                                items: {
                                    xtype: 'chartportlet'
                                }
                            },{
                                title: 'Portlet 2',
                                html: '<div class="portlet-content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, '+
        'sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales '+
        'non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet '+
        'tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla.</p></div>'
                            }]
                        }]                  
                    }]
                }
                , 
                   { 
                    items: [{
                        title: 'Quick Reference',
                        style: 'padding: 10px;',
                        items:[{
                            xtype:'form',// since we are not using the default 'panel' xtype, we must specify it
                            layout: 'anchor',
                            defaults: {
                               anchor: '100%'
                            },
    
    
                             // The fields
                            defaultType: 'textfield',
                            items: [{
                             fieldLabel: 'First Name',
                             name: 'first',
                             allowBlank: false
                             },{
                             fieldLabel: 'Last Name',
                             name: 'last',
                             allowBlank: false
                            }],
    
    
                        // Reset and Submit buttons
                        buttons: [{
                           text: 'Test'    
                           
                        }]
                            }]
                    }, {
                        title: 'Lookup',
                        style: 'padding: 10px;',
                        border: false,
                        items:{
                                xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
                                buttons: [{text: 'Save'},{text: 'Cancel'}]
                            }
                    }]
                }]
            
        }

  2. #12
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    I pasted the code snippet you shared into the grouptab's example for 4.2.0.489 RC and it shows fine. Sorry didnt check it in 4.1.1 but I can if you want me to. I'll just have to redownload the sdk.
    So you might have something else like an extra } in the rest of your code.

    In the grouptab's example after pasting your code I removed one of the bottom }] and it worked fine.

    PHP Code:
    Ext.onReady(function () {
        
    Ext.tip.QuickTipManager.init();

        
    // create some portlet tools using built in Ext tool ids
        
    var tools = [{
            
    type'gear',
            
    handler: function () {
                
    Ext.Msg.alert('Message''The Settings tool was clicked.');
            }
        }, {
            
    type'close',
            
    handler: function (etargetpanel) {
                
    panel.ownerCt.remove(paneltrue);
            }
        }];

        
    Ext.create('Ext.Viewport', {
            
    layout'fit',
            
    items: [{
                
    xtype'grouptabpanel',
                
    activeGroup0,
                
    items: [
                   {
                    
    mainItem0,
                    
    items: [{
                        
    title'Help Pages',  
                        
    //border: false,
                        
    xtype'panel',
                        
    items:[{title:'hi'}],
                        
    heightnull
                    
    },{
                        
    title'Using the Tool',  
                        
    //border: false,
                        
    xtype'gridportlet',
                        
    heightnull
                    
    },{
                        
    title'How To...',
                        
    style'padding: 10px;',
                        
    borderfalse,
                        
    layout'fit',
                        
    items: [{
                            
    xtype'tabpanel',
                            
    activeTab1,
                            
    items: [{
                                
    title'Nested Tabs',
                                
    html'<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, '+
        
    'sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales '+
        
    'non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet '+
        
    'tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla.</p>'
                            
    }]  
                        }]  
                    },{
                        
    xtype'portalpanel',
                        
    title'FAQ',
                        
    tabTip'Dashboard tabtip',
                        
    borderfalse,
                        
    items: [{
                            
    flex1,
                            
    items: [{
                                
    title'Portlet 1',
                                
    html'<div class="portlet-content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, '+
        
    'sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales '+
        
    'non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet '+
        
    'tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla.</p></div>'
                            
    },{
                                
                                
    title'Stock Portlet',
                                
    items: {
                                    
    xtype'chartportlet'
                                
    }
                            },{
                                
    title'Portlet 2',
                                
    html'<div class="portlet-content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, '+
        
    'sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales '+
        
    'non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet '+
        
    'tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla.</p></div>'
                            
    }]
                        }]                  
                    }]
                }
                , 
                   { 
                    
    items: [{
                        
    title'Quick Reference',
                        
    style'padding: 10px;',
                        
    items:[{
                            
    xtype:'form',// since we are not using the default 'panel' xtype, we must specify it
                            
    layout'anchor',
                            
    defaults: {
                               
    anchor'100%'
                            
    },


                             
    // The fields
                            
    defaultType'textfield',
                            
    items: [{
                             
    fieldLabel'First Name',
                             
    name'first',
                             
    allowBlankfalse
                             
    },{
                             
    fieldLabel'Last Name',
                             
    name'last',
                             
    allowBlankfalse
                            
    }],


                        
    // Reset and Submit buttons
                        
    buttons: [{
                           
    text'Test'    
                           
                        
    }]
                            }]
                    }, {
                        
    title'Lookup',
                        
    style'padding: 10px;',
                        
    borderfalse,
                        
    items:{
                                
    xtype'form'// since we are not using the default 'panel' xtype, we must specify it
                                
    buttons: [{text'Save'},{text'Cancel'}]
                            }
                    }]
                }]
            }]
        });
    }); 

  3. #13
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    yes please, that'll be great!
    Unfortunately we can't use 4.2 at work b/c of all the mystery around the release date when I'd last checked...
    I'll look into the brackets issue here...(and oppty to clean up some of this).
    thanks again!

  4. #14
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    So I got it working on the examples page as well, and it worked fine.
    In my local 4.1.1 environment, I copied/pasted from the example code I'd just updated and it didn't work...then I reset the example, cleared out my clipboard & re-copied it back from my local, and it worked again.
    Is there a 4.1.1 issue? anyone else find similar situations?

  5. #15
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    When I get a chance I will try in 4.1.1.
    And if you can give more of the code snippets on how your trying to do the code or make like a test case with the source zipped I could most likely find where the issue is.
    I had a project that used the grouptab in 3.x and when 4.0 didn't have it. I fixed the source to work with 4.0 which was pretty close to how the 4.2.0 example is. I added a few things for my needs into the source.

    Also about the 4.2 release date all I know is it will be very soon.
    Since the RC has been out for a few weeks they should be very close to releasing 4.2.0.
    Giving from past timelines experience i'd say no more then 1-2 more weeks.

    My company is also waiting for the release of 4.2.0.

  6. #16
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    Sure, not sure what you need - and it's all loading correctly per firebug.

    small success - in Firebug's debugger (running on GroupTabPanel), I can see the child items and their contents - so it's loading okay! it's loading parent/child nodes (item.items), but I don't see how/where the nodes get their content (item.items[x].items).

    here's the view component I'm registering with my main controller (and this is the first/only reference at all to the grouptabpanel class).
    Everything else is pretty generic -
    app.js has a setConfig and a path config object to pull files from my 'ux' folder.
    Index.html has references to the grouptabpanel.css and (for troubleshooting at the moment I've added ones for the other classes in the example - ie, portlet, portalcolumn, portalpanel, gridportlet, etc).

    Code:
    Ext.define('SearchTool.view.help.Reference', {
        extend: 'Ext.form.Panel',
        itemId: 'help_ref',
        title: 'Help',
        requires: ['Ext.ux.GroupTabPanel','Ext.tab.Panel','SearchTool.view.help.ReferenceGrid','SearchTool.GridPortlet','SearchTool.PortalPanel','SearchTool.ChartPortlet','SearchTool.PortalColumn','SearchTool.Portlet'],
        resizable: true,
        floating: true,
        draggable: true,
        width: 550,
        height: 600,
        frame: true,
        layout: 'fit',
        tools: [{
            xtype: 'tool',
            type: 'close',
            handler: function (e, target, p, tool) {
                this.up('panel').hide();
            }
        }],
        items: [ //grouptabpanel
        
          {
                xtype: 'grouptabpanel',
                activeGroup: 0,
                items: [
                   {
                    mainItem: 0,
                    items: [{ 
                        //all of these are 1st main tab, w/ Help Pages as main category
                        title: 'Help Pages',  
                        //border: false,
                        items:[{title:'hi'}],
                        height: null
                    },{
                        title: 'Using the Tool',  
                        //border: false,
                        xtype: 'gridportlet',
                        height: null
                    },{
                        title: 'How To...',
                        style: 'padding: 10px;',
                        border: false,
                        layout: 'fit',
                        items: [{
                            xtype: 'panel', 
                                html: '<p>Lorem ipsum dolor sit amet,  Suspendisse nunc sem, pretium eget, cursus a, fringilla.</p>'
                        }]  
                    },{
                        xtype: 'portalpanel',
                        title: 'FAQ',
                        tabTip: 'Dashboard tabtip',
                        border: false,
                        items: [{
                            flex: 1,
                            items: [{
                                title: 'Portlet 1',
                                html: '<div class="portlet-content"><p>Suspendisse nunc sem, pretium eget, cursus a, fringilla.</p></div>'
                            },{
                                
                                title: 'Stock Portlet',
                                items: {
                                    xtype: 'chartportlet'
                                }
                            },{
                                title: 'Portlet 2',
                                html: '<div class="portlet-content"><p>Suspendisse nunc sem, pretium eget, cursus a, fringilla.</p></div>'
                            }]
                        }]                  
                    }]
                }
                , 
                   { //2nd main tab
                    items: [{
                        title: 'Quick Reference',
                        style: 'padding: 10px;',
                        items:[{
                            xtype:'form',// since we are not using the default 'panel' xtype, we must specify it
                            layout: 'anchor',
                            defaults: {
                               anchor: '100%'
                            },
    
                             // The fields
                            defaultType: 'textfield',
                            //it's contents
                            items: [{
                             fieldLabel: 'First Name',
                             name: 'first'
                             },{
                             fieldLabel: 'Last Name',
                             name: 'last'
                            }],
    
                        // Reset and Submit buttons
                        buttons: [{
                           text: 'Test' 
                        }]
                            }]
                    }, {
                        title: 'Lookup',
                        style: 'padding: 10px;',
                        border: false,
                        items:{
                                xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
                                buttons: [{text: 'Save'},{text: 'Cancel'}]
                            }
                    }]
                }//quick ref panel
                ]//grouptabpanel item array
            
        
                 
            }
        
        ] //panel items array
    
    
    });
    Last edited by rtirbany; 6 Mar 2013 at 10:32 PM. Reason: added small success note

  7. #17
    Ext JS Premium Member smcguire36's Avatar
    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    99
    Vote Rating
    0
    smcguire36 is on a distinguished road

      0  

    Default


    Internally, the GroupTabPanel is implemented with a tree view on the left as the tab buttons and a panel with a card layout on the right (hiding all the page panels except for the current tab's page).

    Stewart McGuire
    Ext JS 2.x, 3.x, 4.x - Advanced User / Sencha Architect 3 - User

  8. #18
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    Thanks for that. I can find the issue is - inside setActiveTab - it's not behaving how I'd expect (is it supposed to be this way?).

    On the initial execution, Ext.getCmp(newTab) is undefined (newTab is just a string, and not in the DOM yet). Later on, this undefined gets assigned to me.activeTab. I don't get contents from the container.

    (Ext.getCmp(newTab) is always undefined per my findings):

    Code:
    if (Ext.isString(cmp)) {
                newTab = Ext.getCmp(newTab);  //this sets newTab to undefined
            }
    
    
    if (newTab === me.activeTab) {
                return false;
            }
    Last edited by rtirbany; 8 Mar 2013 at 9:01 AM. Reason: updates

  9. #19
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,501
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Looks like a silly error in the class

    Try this override:

    Code:
    Ext.override(Ext.ux.GroupTabPanel, {
        setActiveTab: function(cmp) {
            var me = this,
                newTab = cmp,
                oldTab;
    
            if(Ext.isString(cmp)) {
                newTab = Ext.getCmp(cmp);
            }
    
            if (newTab === me.activeTab) {
                return false;
            }
    
            oldTab = me.activeTab;
            if (me.fireEvent('beforetabchange', me, newTab, oldTab) !== false) {
                 me.activeTab = newTab;
                 if (me.rendered) {
                     me.down('container[baseCls=' + Ext.baseCSSPrefix + 'grouptabcontainer' + ']').getLayout().setActiveItem(newTab);
                 }
                 me.fireEvent('tabchange', me, newTab, oldTab);
             }
             return true;
        }
    });

  10. #20
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    Hey Animal! great to hear from you

    yeah, that's what I thought, though a few lines before (in the var statement above, newTab is initialized to cmp)...either way the lookup comes back as undefined:

    Code:
    newTab = Ext.getCmp(cmp);
    Does this mean my grouptabpanel is not in the DOM? though I'm not sure why (it appears within a popup window that I create and show), This is the start of the plight b/c newTab is undefned from the above, and eventually activeTab gets set to undefined, etc).

    Any ideas on an approach? thanks in advance!

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi