1. #1
    Sencha User
    Join Date
    Jan 2013
    Location
    South of Korea
    Posts
    3
    Vote Rating
    0
    newdefier is on a distinguished road

      0  

    Default Unanswered: scroll bar except range of toolbar in formPanel

    Unanswered: scroll bar except range of toolbar in formPanel


    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!

  2. #2
    Sencha User
    Join Date
    Jan 2013
    Location
    South of Korea
    Posts
    3
    Vote Rating
    0
    newdefier is on a distinguished road

      0  

    Default


    If you need to my code, please reply! thanks

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Jan 2013
    Location
    South of Korea
    Posts
    3
    Vote Rating
    0
    newdefier is on a distinguished road

      0  

    Default This is code that I'm working now.

    This is code that I'm working now.


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

    Code:
    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%',
    Code:
     
           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


Thread Participants: 1