1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Vote Rating
    0
    Answers
    6
    toxkillfraex is on a distinguished road

      0  

    Default Unanswered: making a toolbar float

    Unanswered: 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
    Vote Rating
    0
    Answers
    6
    toxkillfraex is on a distinguished road

      0  

    Default


    fell of page bump

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Vote Rating
    0
    Answers
    6
    toxkillfraex is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    Answers
    106
    friend has a spectacular aura about friend has a spectacular aura about

      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
    Vote Rating
    0
    Answers
    6
    toxkillfraex is on a distinguished road

      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.

Thread Participants: 1

Tags for this Thread