Extjs, как сделать полосу прокрутки?

Мне нужно показать полосу прокрутки, как только форма станет шире, чем контейнер. Я установил свойство autoScroll: true в контейнере, но он не работает. В любом случае, чтобы получить результат, который мне нужен?Extjs, как сделать полосу прокрутки?

Вот рабочий пример

http://jsfiddle.net/mQC3B/2/

Код

Ext.create('Ext.container.Viewport', { 

    layout: { 
     header: false, 
     type: 'border', 
     padding: 0 
    }, 
    items: [{ 
      region: 'north', 
      padding: '0 150 0 150', 
      height: 36, 
      html: 'header' 
     }, { 
      id:'mainPanelContainer', 
      autoScroll: true, 
      padding: '0 150 0 150', 
      region: 'center', 
      items:[ 
       { 
        xtype:'form', 
        items:[{ 
         xtype: 'container', 
         flex: 1, 
         layout: 'anchor', 
         items: [{ 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          anchor: '95%', 
          xtype: 'htmleditor', 
          fieldLabel: 'Popis', 
          name: 'Description', 
          height: 240, 
          width: 450 
         }] 
        }, { 
         xtype: 'container', 
         flex: 1, 
         layout: 'anchor', 
         items: [{ 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'container', 
          margin: '0 0 8 0', 
          layout: 'hbox', 
          items: [{ 
           xtype: 'textfield', 
           fieldLabel: 'Name', 
           name: 'Name' 
          }, { 
           xtype: 'textfield', 
           fieldLabel: 'Name', 
           name: 'Name' 
          }] 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }] 
        }] 
       } 
      ] 
     }, { 
      region: 'south', 
      height: 25, 
      padding: '0 150 0 150', 
      html: 'Copyright &copy; 2013' 
     }] 
});

EDIT

После добавления макета: 'подходит' к mainPanelContainer появляется полоса прокрутки, но это не так можно прокрутить до скрытой правой части формы.

http://jsfiddle.net/mQC3B/3/

источник

2013-08-14 user49126

В вашей скрипке для редактирования, изменения:

padding: '0 150 0 150',

в центре региона:

margin: '0 150 0 150',

Верьте или нет, ExtJS макеты не обрабатывают свойство обивки очень хорошо. Я столкнулся с этим раньше с моими макетами. Похоже, что в вашем примере маржа будет работать для достижения того, чего вы хотите. Другой способ добиться такого же результата - это установить еще один уровень глубиной с помощью макета границы и добавить восточные и западные регионы с пустым пространством, чтобы имитировать поведение заполнения.

источник

2013-08-16 13:32:47 Reimius

После изменения отступов на поле прокрутки выглядит отлично. Но все же я не могу прокручивать правую сторону формы на меньшем экране. – user49126

Извлеките макет: «подойдите» и укажите форму ширины. – Reimius

Посмотрите эту скрипку: http://jsfiddle.net/5YKKz/2/ – Reimius

autoScroll: true является способ сделать это, но вы должны будете иметь все ваши макеты правильно для того, чтобы работать. Попробуйте поставить layout: 'fit' на ваш mainPanelContainer и/или ваш form.

источник

2013-08-14 13:04:32 kevhender

Я добавил макета подходят настройки в mainPanelContainer. Полоса прокрутки сплетена, но вы не можете прокрутить ее до правого конца формы. http://jsfiddle.net/mQC3B/3/ – user49126

Если вы удалите вложенную форму и просто поместите отступы в общий контейнер (видовое окно в этом примере), похоже, вы получите то, от чего вы понимаете, из того, что я понимаю.

http://jsfiddle.net/mQC3B/15/

Ext.create('Ext.container.Viewport', { 

    padding: '0 150 0 150', 

    layout: { 
     header: false, 
     type: 'border' 
    }, 
    items: [{ 
     region: 'north', 
     height: 36, 
     html: 'header' 
    }, { 
     id: 'mainPanelContainer', 
     autoScroll: true, 
     region: 'center', 
     xtype: 'form', 
     items: [{ 
      xtype: 'container', 
      flex: 1, 
      layout: 'anchor', 
      items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       anchor: '95%', 
       xtype: 'htmleditor', 
       fieldLabel: 'Popis', 
       name: 'Description', 
       height: 240, 
       width: 450 
      }] 
     }, { 
      xtype: 'container', 
      flex: 1, 
      layout: 'anchor', 
      items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'container', 
       margin: '0 0 8 0', 
       layout: 'hbox', 
       items: [{ 
        xtype: 'textfield', 
        fieldLabel: 'Names', 
        name: 'Name' 
       }, { 
        xtype: 'textfield', 
        fieldLabel: 'Name', 
        name: 'Name' 
       }] 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }] 
     }] 
    }, { 
     region: 'south', 
     height: 25, 
     html: 'Copyright &copy; 2013' 
    }] 
});

источник

2013-08-23 11:54:03 RokkieBrown

В основном вам просто нужно добавить свойство AutoScroll как:

autoScroll: true

источник

2014-10-09 14:16:06

Extjs, как сделать полосу прокрутки?

ответ

Смежные вопросы