1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    410
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default I cant dock a toolbar to a List component directly

    I cant dock a toolbar to a List component directly


    Hi,

    I cant add a toolbar as a docked item directly to a List component in designer. Here is some non designer UI code I am trying to re-produce:

    Code:
    Ext.define('PinpointersTouch.view.UnitList', {
        extend: 'Ext.dataview.List',
        xtype: 'unitslist',
    	emptyText: 'There are no vehicles in your tracking list.',
        config: {
            itemTpl: new Ext.XTemplate(...),
            store: 'CurrentGrid',
    		items: [{
    			xtype: 'toolbar',
    			docked: 'bottom',
    			ui: 'light',
    			items: [{
    				xtype: 'label',
    				html: 'Show:',
    				style: 'color:white;'
    			},{
    				xtype: 'selectfield',
    				store: 'TrackingListWithShowAll',
    				displayField: 'UnitName',
    				valueField: 'UntID',
    				itemId: 'selectVehicle'
    			}]
    		}]      
        }
    });
    Do I need to use a Container first and then add a List component and the toolbar as a docked item instead?

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Use a panel and you will be able to dock the toolbar.

    I'll check with the Touch team today to see what has changed in regard to docking.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    Just to clarify, you can't dock to a list directly, but you can place a panel, put the list in there? Do you put the thing your docking in the panel too, and dock it to the parent?

    Allister

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    Okay - not sure if I'm doing this right.

    Adding a panel (with fit layout) and putting both my image and list in the panel, and docking the image to the parent panel to make sure it sits at the top, worked fine.

    What I now lost was the ability to push the detail of the list through the controller. Does the controller ref have to be different if the list component is sitting in another component?

    My List ID is LocalNews (ref is #LocalNews)
    The containing panel ID is LocalNewsPanel.

    This is the code that no longer works to push the detail of each list item

    Code:
    Ext.define('MyApp.controller.NewsControl', {
        extend: 'Ext.app.Controller',
        config: {
            refs: {
                navLocalNews: '#LocalNews'
            },
    
            control: {
    
                "navLocalNews": {
                    itemtap: 'onLocalNewsListItemTap'
                }
            }
        },
    
        
        onLocalNewsListItemTap: function(dataview, index, target, record, e, options) {
            dataview.up().push({
                xtype: 'detailPanel',
                html: "<h3>" + record.get('title') + "</h3>" + record.get('content')
            });
            navLocalNews.deselectAll();
        }
    
    });
    What needs to change?
    Any help would be appreciated.

    Allister

Thread Participants: 2