scroll bar except range of toolbar in formPanel

[newdefier]

Hi, nice day!
I just have a question about making scroll.
I'd like to make scrolling bar in formpanel.
Absolutely, I know how to make scroll.
But scrolling bar works include range of toolbar.
So I can't find toolbar when I pull down my scroll.

How to make scroll bar except range of toolbar in formPanel?
Is it possible?

Thanks!

[newdefier]

If you need to my code, please reply! thanks

[scottmartin]

Yes .. you will need to supply some code and explain what you expect to happen.

[newdefier]

Thanks for comment.
This is code that I'm working now.

1. formPanel with Toolbar

    // detail & update form
   var centerUpdateGroup = Ext.create('Ext.form.Panel', {
        id: 'centerUpdateGroup',
        frame: false,
        width: '100%',
        height: '100%',
        bodyPadding: 5,
        hidden: true,
        border: true,
        split: true,
        containerScroll: true,
        fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 70,
            labelPad: 10,
            margin: '20 10 10 20',
            anchor: '100%'
        },
        defaultType: 'textfield',
        items: [{
            name: 'groupName',
            fieldLabel: '조직 명',
            allowBlank: false,
            id: 'groupNameToUpdateGroup',
            readOnlyCls: 'readOnlyText'
        }, {
            xtype: 'hiddenfield',
            name: 'upperGroupId',
            id: 'upperGroupIdToUpdateGroup',
            allowBlank: false
        }, {
            xtype: 'hiddenfield',
            name: 'upperItemId',
            id: 'upperItemIdToUpdateGroup',
            allowBlank: false
        }, {
            xtype: 'hiddenfield',
            name: 'groupId',
            allowBlank: false,
            id: 'groupIdToUpdateGroup'
        }] ,
       dockedItems: [{
            xtype: 'toolbar',
            id: 'dockToGroup',
            height: 30,
            width: '100%',
            items: [{
               itemId: 'btnSaveUpdateGroup',
               xtype: 'button',
               cls: 'x-btn-text-icon',
               icon: '/resources/images/icon/accept.png',
               text: '저장',
               handler: ....
           }, {
               xtype: 'tbseparator' 
           }, {
                itemId: 'btnCancelUpdateGroup',
               xtype: 'button',
               cls: 'x-btn-text-icon',
               icon: '/resources/images/icon/delete.png',
               text: '취소',
               handler: ....
           }]
       }] 
   });


2. TabPanel with items(Of course.. formPanel is item of tabPanel.) 

   // center Detail tab Area 
    var centerArea = Ext.create('Ext.tab.Panel', {
        region: 'center',
       id: 'centerArea',
       height: '100%',

 
       items: [{
          id: 'centerAreaTab',
          title: '상세 정보',
          closable: false,
          autoScroll: true,
          items: [{
              id: 'detailContent',
                 xtype: 'panel',
                 bodyStyle: 'padding:10px; text-align:center;',
                 height: '100%',
                 minHeight: '100%',
                 collapsible: false,
                 split: true,
                 border: false,
                  html: '<div style="height:800px; margin-top:100px; text-align:center;">...</div>'
                 }, centerUpdateGroup, centerUpdateUser, centerUpdateDevice
      }],
      dockedItems: [{
            xtype: 'toolbar',
            height: 30,
            id: 'dockToDetail',
           width: '100%',
           items: [{
                itemId: 'btnUpdate',
                xtype: 'button',
                cls: 'x-btn-text-icon',
                icon: '/resources/images/icon/pencil.png',
                text: '수정',
                disabled: true,
                handler: ....
          }, {
               xtype: 'tbseparator' 
           }, {
               itemId: 'btnDelete',
               xtype: 'button',
               cls: 'x-btn-text-icon',
               icon: '/resources/images/icon/delete.png',
               text: '삭제',
               disabled: true,
               handler: ....
           }]
     }]
  });


    // main viewport 
    Ext.create('Ext.container.Viewport', {
        id: 'subViewport',
        layout: 'border',
        items: [leftArea, centerArea],
       renderTo: Ext.getBody()
    });

Each item changes in 'centerAreaTab' when I push button.(Id: btnUpdate)
Toolbar in 'centerArea' changes at that moment...(dockToDetail -> dockToGroup).

The problem that I met is... I can't find toolbsr(Id: dockToGroup) when I pull down my scroll. Scrolling bar works include toolbar. It covers the toolbar.

I expect scrolling bar move only range of formPanel except toolbar.

Thanks