ExtJS Tab Panel Issue

connor · #1 (**permalink**) 11-30-09, 12:53 PM

I am having issues getting a tabpanel form in a window not in the whole container.
$appName is set further up in the document. It is showing up just not in the window. Any help would be greatly appreciated.

PHP Code:


			
    var twitterUpdater = new Ext.Viewport({

        layout: 'border',

        items: [{

            region: 'north',

            collapsible: false,

            height: 27,

            margins: '0 0 5 0',

            xtype: 'panel',

            html: '<center>Coming Soon</center>'

        },{

            region: 'center',

            xtype: 'tabpanel',

            activeTab: 0,

            items:[{

                title: 'Tweets',

                xtype: 'panel',

                html: 'Here will show tweets'

            },{

                title: 'Mentions',

                xtype: 'panel',

                html: 'Here will be mentions'

            },{

                title: 'Following',

                xtype: 'panel',

                html: 'Here will be all the people we are following'

            },{

                title: 'Followers',

                xtype: 'panel',

                html: 'Here will be all the followers.'

            },{

                title: 'Settings',

                xtype: 'panel',

                html: 'Settings will go here for the admins'

            }]

        }]

    });

    var <?=$appName; ?> = new new Ext.Window({

        id:'<?=$appName; ?>',

        title:'Twitter Updater', 

        height:125,

        width:300,

        closable: true,

        draggable: true,

        resizable: true,

        minimizable: true,

        maximizable: true,

        items: [twitterUpdater]

    });

connor · #2 (**permalink**) 11-30-09, 01:10 PM

This is what firebug is giving me, Im not sure what to make of it.

Quote:

new (Ext.Window)({id: "twitterWin", title: "Twitter Updater", height: 125, width: 300, closable: true, draggable: true, resizable: true, minimizable: true, maximizable: true, items: [twitterUpdater]}) is not a constructor

wirehopper · #3 (**permalink**) 11-30-09, 04:11 PM

It might be an issue where your server doesn't have short tags (<?= ?>) enabled.

You could try using <?php echo $variable; ?> to see if that's the issue (change $variable).

connor · #4 (**permalink**) 11-30-09, 09:49 PM

Even taking the var out and putting in "twitterWin" didn't fix it.

wirehopper · #5 (**permalink**) 12-01-09, 06:03 AM

Can you post more of the code?

Specifically, the <script> tags that are pulling in ExtJS and all PHP assignments.

carters-site · #6 (**permalink**) 12-01-09, 10:50 AM

Quote:

Originally Posted by connor

Even taking the var out and putting in "twitterWin" didn't fix it.

Ahh ExtJS a library I am very familiar with below is the error free version:

You had an extra new before your Ext.Window Constructor call.
Test in FireFox 3 and works.

Code:

    var twitterUpdater = new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            collapsible: false,
            height: 27,
            margins: '0 0 5 0',
            xtype: 'panel',
            html: '<center>Coming Soon</center>'
        },{
            region: 'center',
            xtype: 'tabpanel',
            activeTab: 0,
            items:[{
                title: 'Tweets',
                xtype: 'panel',
                html: 'Here will show tweets'
            },{
                title: 'Mentions',
                xtype: 'panel',
                html: 'Here will be mentions'
            },{
                title: 'Following',
                xtype: 'panel',
                html: 'Here will be all the people we are following'
            },{
                title: 'Followers',
                xtype: 'panel',
                html: 'Here will be all the followers.'
            },{
                title: 'Settings',
                xtype: 'panel',
                html: 'Settings will go here for the admins'
            }]
        }]
    });
    var twitterWin = new Ext.Window({
        id: 'twitterWin',
        title:'Twitter Updater', 
        height:125,
        width:300,
        closable: true,
        draggable: true,
        resizable: true,
        minimizable: true,
        maximizable: true,
        items: [twitterUpdater]
    }); 
    
    twitterWin.open();

connor · #7 (**permalink**) 12-09-09, 08:59 AM

Im just trying to use a menu bar that has a drop down and when I click on an option I want it to open said window... and as it is now its just got the tab panel open... i think my issue is putting the tab panel in the window.

PHP Code:


			
    var twitterUpdater = new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            collapsible: false,
            height: 27,
            margins: '0 0 5 0',
            xtype: 'panel',
            html: '<center>Coming Soon</center>'
        },{
            region: 'center',
            xtype: 'tabpanel',
            activeTab: 0,
            items:[{
                title: 'Tweets',
                xtype: 'panel',
                html: 'Here will show tweets'
            },{
                title: 'Mentions',
                xtype: 'panel',
                html: 'Here will be mentions'
            },{
                title: 'Following',
                xtype: 'panel',
                html: 'Here will be all the people we are following'
            },{
                title: 'Followers',
                xtype: 'panel',
                html: 'Here will be all the followers.'
            },{
                title: 'Settings',
                xtype: 'panel',
                html: 'Settings will go here for the admins'
            }]
        }]
    });
    Ext.onReady(function(){
        var APP_twitterWin = new Ext.Window({
            id:'twitterWin',
            title:'Twitter Updater', 
            height:125,
            width:300,
            closable: true,
            draggable: true,
            resizable: true,
            minimizable: true,
            maximizable: true,
            items: [twitterUpdater]
        }); 
    });

that is my code as it sits now.

connor · #8 (**permalink**) 12-09-09, 09:03 AM

And here is the menu bar.

PHP Code:


			
        var menuBar = new Ext.Toolbar({
        renderTo: document.body,
        height: 100,
        items: [{
                xtype: 'splitbutton',
                text: 'Administration',
                menu: new Ext.menu.Menu({
                    items: [{
                        text: 'System Management',
                        handler: function(){
                            sysManagementWin.open();
                        }
                    },{
                        text: 'Appliacation Management',
                        handler: function(){
                            appManagementWin.open();
                        }
                    },{
                        text: 'User Management',
                        handler: function(){
                            usrManagementWin.open();
                        }
                    }]
                })
            },{
                xtype: 'splitbutton',
                text: 'Site Managemet',
                menu: new Ext.menu.Menu({
                    items: [{
                        text: 'Soldiers Network'
                    },{
                        text: 'Make dynamic to list all'
                    }]
                })
            },{
                xtype: 'splitbutton',
                text: 'Other',
                menu: new Ext.menu.Menu({
                    items: [{
                        text: 'Twitter Updater',
                        handler: function(){
                            this.APP_twitterWin.open();
                        }
                    },{
                        text: 'Make dynamic to list all'
                    }]
                })
            },'->',{
                xtype: 'splitbutton',
                text: 'User Options',
                menu: new Ext.menu.Menu({
                    items: [{
                        text: 'Your Information',
                        handler: function(){
                            usrInformationWin.open();
                        }
                    },{
                        text: 'Change your password',
                        handler: function(){
                            chaPasswordWin.open();
                        }
                    },{
                        text: 'E-Mail (new # here)',
                        handler: function(){
                            chkEmailWin.open();
                        }
                    },{
                        text: 'Logout',
                        handler: function(){
                            Ext.Msg.confirm('Confirm?', 'Are you sure you want to logout?', function(btn, text){
                                if (btn == 'yes'){
                                    window.location="../includes/backend.php?op=logout";
                                }
                            })
                        }
                    }]
                })
            }]
        });

carters-site · #9 (**permalink**) 12-18-09, 09:02 AM

You are assigning a Ext.Viewport to the window. This is not what you want to use. The viewport is essentially the browser's viewable area, basically anything you declare to Viewport is rendered to the document body. It is not actually an object you can assign like other Ext objects. Anything you put in the items list for the viewport will be rendered to document.body on load.

What you are wanting to do actually involves a Ext.Panel. You should change the area where you have viewport to Ext.Panel.

Now as far as the Toolbar you should not use renderTo, I have found it somewhat sloppy of a method to do things in ExtJS. Instead you should do something like this.

javascript Code:

/* your code for menuBar */
 
oView = Ext.Viewport({
     layout: 'fit',
     items: [{
         xtype: 'panel',
         tbar: menuBar,
         border: false,
         layout: 'fit'
     }]
});

This will add a container panel inside of your viewport that supports a toolbar. Hope that helps you out.