Results 1 to 5 of 5

Thread: making a toolbar float

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
      0  

    Default making a toolbar float

    Is it possible to make a toolbar float over the content of a panel it's docked in?

    and possibly hide/collapse it?

  2. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
      0  

    Default

    fell of page bump

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
      0  

    Default

    still with the issue. Maybe I can achieve it with a container of some sort in the panel?

  4. #4
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
      0  

    Default

    I'm not sure if this is what you want exactly, but it might give you some ideas:

    Code:
    var w = Ext.create('Ext.window.Window', {
      bodyPadding: 5,
      dockedItems: [{
        xtype: 'panel',
        collapsible: true,
        dock: 'top',
        height: 52,
        items: [{
          xtype: 'toolbar',
          items: [{
            text: 'A Button'
          }]
        }]
      }],
      items: [{
        xtype: 'form',
        items: [{
          xtype: 'textfield',
          fieldLabel: 'Last Name',
          width: 200
        },{
          xtype: 'textfield',
          fieldLabel: 'First Name',
          width: 200
        }]
      }],
      layout: 'auto',
      title: 'Collapsible Toolbar',
      width: 300,
    }).show();
    Last edited by friend; 20 Mar 2012 at 4:33 AM. Reason: correction

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by friend View Post
    I'm not sure if this is what you want exactly, but it might give you some ideas:

    Code:
    var w = Ext.create('Ext.window.Window', {
      bodyPadding: 5,
      dockedItems: [{
        xtype: 'panel',
        collapsible: true,
        dock: 'top',
        height: 52,
        items: [{
          xtype: 'toolbar',
          items: [{
            text: 'A Button'
          }]
        }]
      }],
      items: [{
        xtype: 'form',
        items: [{
          xtype: 'textfield',
          fieldLabel: 'Last Name',
          width: 200
        },{
          xtype: 'textfield',
          fieldLabel: 'First Name',
          width: 200
        }]
      }],
      layout: 'auto',
      title: 'Collapsible Toolbar',
      width: 300,
    }).show();
    I was hoping to create something like an image viewer and have the function buttons positioned over the image (with the option to collapse it). Yet docked items seem to only make the panel smaller and I'm trying to see if somebody here knows a css or ex.js way to make the toolbar float over it. The toolbar I'm using has been customized with css and a ui to be transparent.

    By now, however, I'm heavily inclined to just drop the idea and go with a collapsible toolbar.

Tags for this Thread

Posting Permissions

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