[HELPED] Toolbar in Tabpanel Problem

[JosephHarriman]

Hello,

I created a tool bar in a tabpanel in Valence 3.2 which works well. In version 4, not so much. Version 4 does not show my datefield, dropdowns or buttons. I've put two JPEGs on this post. One shows V3.2 and the other is V4.0. Please notice that on V4.0 the only thing showing right of the tabs is an X. Thanks for any help.

Valence3.2Example.jpgValence4.0Problem.jpg

[richard.milone]

Please post your code for the old version that is working and for the new version that is not.

[sean.lanktree]

Could you provide your code? To be honest, I never even knew that you could insert a toolbar inside of the tabbar. I assume your application has a fixed number of tabs. Otherwise, your tabs could run into the space of your form fields.

[JosephHarriman]

Thanks for responding guys. It's the same code except for the stylesheet and javaScript files for the different versions. Yes, it is a fixed number of tabs. When you resize to a smaller screen, then Sencha puts the toolbar into a scroll.

On my V3.2 page

<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<script type="text/javascript" src="/extjs4/ext-all.js"></script>
<script type="text/javascript" src="/vvresources/valence-extjs4.js"></script>

On my V4.0 page

<link rel="stylesheet" type="text/css" href="/packages/vvtheme/build/resources/vvtheme-all.css" />
<link rel="stylesheet" type="text/css" href="/packages/vvtheme/build/vvtheme.js" />
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/resources/valence.js"></script>

	// Create Tab panel
	var allTabs = Ext.create('Ext.tab.Panel',{
		id: 'allTabs',
		region: 'center',
		activeTab: 0,		
		autoDestroy:false,
		closeable:false,				
		items:[totalPlan, totalBoard, totalCrisis]			  			  
	});
	
	var tabPanel = Ext.getCmp("allTabs");
	tabPanel.tabBar.addTool([
	    {xtype: "tbfill"},
	    {
	    	xtype:'datefield', 
		 	id:'TB_DATE',					
		 	emptyText: 'Select Date'	
	    },{xtype: 'tbtext',
			text: '   '
		},{
            xtype:'combo',
            id:'TB_LINE',            
            emptyText: 'Select Line',            
            triggerAction: 'all',
            editable: false,
            forceSelection:true,
            selectOnFocus: true,            
            valueField: 'LINE',                   
            displayField: 'ALPHA4',            
            store:lineStore
        },{xtype: 'tbtext',
			text: '   '
		},{
	    	xtype:'combo',
            id:'TB_SHIFT',                    
            emptyText: 'Select Shift',                    
            triggerAction: 'all',
            editable: false,
            forceSelection:true,
            selectOnFocus: true,
            valueField: 'value',                   
            displayField: 'text',
            mode: 'local',
			store: new Ext.data.SimpleStore({
				fields: ['text', 'value'],
				data: [['Shift One', '1'], ['Shift Two', '2'], ['Shift Three', '3']]
			})
	    },{xtype: 'tbtext',
			text: '   '
		},{
	    	text:'Reload',iconCls:'arrow_refresh',handler:function(){fnGetData(true);}   
	    }
	]);
	
	// viewport 
	new Ext.Viewport({
		id: 'viewport',		
		layout: 'border',
        defaults: {
            split: true
        },
        items: [allTabs],
		renderTo: Ext.getBody()		
	});

[sean.lanktree]

Include a "tabBar" config when instantiating your tabpanel.

tabBar : {
    layout : 'hbox',
    tools : [{
        xtype : 'tbspacer',
        flex : 1
    },{
        xtype : 'button',
        text   : 'Reload'
    }]
}