Results 1 to 6 of 6

Thread: outlook bar in extjs

  1. #1

    Question outlook bar in extjs

    Hello

    I wish to make a navigation similar to Outlook 2003 in ExtJS.

    Currently, this is the code that corresponds to:
    Code:
    var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
                    tabNavigation = new Ext.TabPanel({
                        region: 'north',
                        defaults:{autoHeight: true},
                        items:[
                               {
                                   contentEl:'mySessionEl',
                                   title: 'Ma session',
                                   tbar: [{
                                       xtype: 'buttongroup',
                                       defaults: {
                                           scale: 'small'
                                       },
                                       items: [{
                                           xtype:'splitbutton',
                                           text: 'Menu Button',
                                           iconCls: 'add16',
                                           menu: [{text: 'Menu Item 1'}]
                                       }]
                                   }]
                               },
                               {contentEl:'clientsEl', title: 'Clients'},
                               {contentEl:'projectsEl', title: 'Projets'},
                               {contentEl:'configEl', title:'Configuration'},
                               {contentEl:'statistiqueEl', title:'Statistique'}
                               ]
                    }),
    ....
    the problem is that my tabs appear good, but not its items.

  2. #2
    Sencha User ashaihullin's Avatar
    Join Date
    Jan 2010
    Location
    Kyrgyzstan, Bishkek
    Posts
    67

    Default

    why are you not puting components in TapPanel items instead contentEl?

  3. #3

    Default

    how ?

  4. #4
    Sencha User ashaihullin's Avatar
    Join Date
    Jan 2010
    Location
    Kyrgyzstan, Bishkek
    Posts
    67

    Default

    hm... i guess you have panels or smth else (clients, projects etc...) ?

    if so why not to put them in tabPanel:

    Code:
    Ext.onReady(function(){
    
    var clients = new Ext.Panel({
         title: 'Clients'
    });
    
    var projects = new Ext.Panel({
         title: 'Projets'
    });
    
    var config = new Ext.Panel({
         title: 'Configuration'
    });
    
    var tabNavigation = new Ext.TabPanel({
                        scope: this,
    		    activeTab: 0,
                        items:[
                               
                               this.clients,  this.projects, this.config
                               ]
      });
    
    tabNavigation.render( document.body );
    });
    like this...

  5. #5

    Default

    Okay, i see how you think . but i have an error:

    "
    c is undefined
    [IMG]chrome://firebug/content/blank.gif[/IMG] }else if(!c.events){"
    ext-all-debug.js (ligne 11830


    my complet code's:
    Code:
    Ext.onReady(function(){
        Ext.QuickTips.init();
        var tabNavigation;
        var grid;
        var accordeon;
        var clients = new Ext.Panel({
            title: 'Clients'
        });
        var projects = new Ext.Panel({
            title: 'Projets'
        });
        var config = new Ext.Panel({
            title: 'Configuration'
        });    
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
                    tabNavigation = new Ext.TabPanel({
                        region: 'north',
                        defaults: 64,
                        renderTo: 'tabPanel',
                        scope: this,
                        activeTab: 0,
                        items:[
                               this.clients,  this.projects, this.config
                               ]
                    }),
                    grid = new Ext.grid.GridPanel({
                        region: 'center',
                        title: 'Centre d\'informations',
                        tbar: [{
                            text: 'Ajouter'
                        }, '-',
                        {
                            text: 'Editer'
                        }, '-',
                        {
                            text: 'Imprimer la liste'
                        }, '-',
                        {
                            text: 'Imprimer le dtail'
                        }, '-',
                        {
                            text: 'supprimer'
                        }, '->',
                        {
                            xtype: 'textfield',
                            helpfile: 'Recherche',
                            vtype: 'alpha'
                        }],
                        store: [
                                [1, 'One'],
                                [2, 'Two'],
                                [3, 'Three']
                                ],
                                columns: [{
                                    header: 'Number',
                                    dataIndex: 'field1'
                                },
                                {
                                    header: 'Name',
                                    dataIndex: 'field2'
                                }]
                    }),
                    grid = new Ext.grid.GridPanel({
                        tbar: [{
                            text: 'Ajouter'
                        }, '-',
                        {
                            text: 'Editer'
                        }, '-',
                        {
                            text: 'supprimer'
                        }, '-',
                        {
                            text: 'Imprimer la liste'
                        }, '-',
                        {
                            text: 'Imprimer le dtail'
                        }, '-',
                        {
                            text: 'Marquer comme termin'
                        }, '->',
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Recherche',
                            vtype: 'alpha'
                        }],
                        collapsible: true,
                        title: 'Projets et dtails',
                        collapseMode: 'mini',
                        height: 200,
                        split: true,
                        region: 'south',
                        store: [
                                [1, 'One'],
                                [2, 'Two'],
                                [3, 'Three']
                                ],
                                columns: [{
                                    header: 'Number',
                                    dataIndex: 'field1'
                                },
                                {
                                    header: 'Name',
                                    dataIndex: 'field2'
                                }]
                    })]
        });
    });
    The result is just a white page with this write: " '; " \o/

    See you later!

  6. #6
    Sencha User ashaihullin's Avatar
    Join Date
    Jan 2010
    Location
    Kyrgyzstan, Bishkek
    Posts
    67

    Default

    You should see docs and play with samples. Too much of wrong coding. Wrong declarations in properties.

Similar Threads

  1. [2.x] Outlook style accordion layout
    By Confused in forum Ext 2.x: User Extensions and Plugins
    Replies: 4
    Last Post: 21 Nov 2010, 11:33 PM
  2. Outlook like look.......Is it possible?
    By sanraj in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 9 Nov 2009, 10:51 PM
  3. No scroll bar in my html page using extjs
    By Abisha in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 1 May 2009, 4:39 AM
  4. Outlook Style Layout
    By rickh in forum Community Discussion
    Replies: 5
    Last Post: 5 Nov 2008, 1:25 PM
  5. Outlook Bar Component
    By Michelangelo in forum Ext 2.x: Help & Discussion
    Replies: 18
    Last Post: 21 Jul 2008, 9:10 AM

Posting Permissions

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