1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    20
    Vote Rating
    0
    cks is on a distinguished road

      0  

    Default Unanswered: Toolbar Positioning in a Navigation View

    Unanswered: Toolbar Positioning in a Navigation View


    I have a navigation view, and I want to position a toolbar directly beneath the navigation bar. When I do this, the toolbar overlaps the list. Is there a handy way to do this? I tried using a combination of 'top' and 'width', but that did not work very well. For now, it is docked top to get it out of the way.

    My view code is:

    Code:
    Ext.define('decoder.view.Home',{
    	extend: 'Ext.navigation.View',
    	xtype: 'homepanel',
    	id: 'homepanel',
    	
    		requires: [
    			'Ext.dataview.List',
    			'Ext.field.Search'
    		],
    
    
    		config:{
    		 	title: 'Home',
    			iconCls: 'home',
    			items: [
    				{
    					xtype:'toolbar',
    					id:'searchbar',
    					docked: 'top',
    					items:[
    						{
    			          		xtype: 'searchfield',
    							id: 'searchField',
    			            	placeHolder: 'Search',
    							autoCapitalize: false,
    							autoCorrect: false,
    							centered: true
    			          	}
    					]
    				},
    				{
    					xtype: 'list',
    					id: 'results',
    					title: 'DECODER RING',
    					store: 'Acronyms',
    					disableSelection: true,
    					grouped: true,
    					itemTpl: '<div class="def">{acronym} <span class="sub">{def}</span></div>',
    					onItemDisclosure: false,
    				}
    			]
    		}
    	});

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,644
    Vote Rating
    899
    Answers
    3574
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Are you talking about the toolbar with id of 'searchbar' (I hate the id config btw)? If so then change the value of docked from 'top' to 'bottom'
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    20
    Vote Rating
    0
    cks is on a distinguished road

      0  

    Default


    Yes, it is the 'seachbar' component. If I change it to dock bottom, it will dock below my list. What I want to do is stack the navigation bar, search bar, then the list.

    The only approach I can think of is to modify the CSS, but want to know if there is a config I am missing to achieve this.

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Location
    Toronto, Canada
    Posts
    92
    Vote Rating
    12
    Answers
    20
    iSmartDevice is on a distinguished road

      0  

    Default


    Have you tried to set the "docked" property for the navigation bar to "bottom"?
    Code:
    Ext.define("YourApp.view.HomePanel", {
        extend: 'Ext.navigation.View',
        xtype: 'homePanel',
        
        config: {
    		
            navigationBar: {
    	    docked:'bottom',
            },
    
    
            items: [
                { 
                    xtype: 'toolbar',
                    docked:'bottom', 
                },
                { 
                   xtype: 'list' 
                }
            ]
        }
    });

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    20
    Vote Rating
    0
    cks is on a distinguished road

      0  

    Default


    That was an interesting suggestion, and got me thinking about combinations of the docked property. When I changed the navigation bar to dock bottom, it literally docked it below the list, right on top of the tab bar.

    What does work is setting the top margin of the custom list class to the computed height of the search bar.