Extjs come visualizzare la barra di scorrimento?

Question

Devo mostrare una barra di scorrimento non appena il modulo è più largo del contenitore. Ho impostato la proprietà autoScroll: true sul container, ma non funziona. Esiste comunque il risultato che mi serve?

Ecco l'esempio di lavoro

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

Il codice

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 © 2013' 
     }] 
}); 

EDIT

Dopo l'aggiunta di layout: 'fit' per mainPanelContainer appare la barra di scorrimento, ma non è possibile scorrere fino al lato nascosto nascosto del modulo.

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

Answer 1

Nel vostro violino per la tua modifica, cambiamento:

padding: '0 150 0 150', 

nella regione centrale per:

margin: '0 150 0 150', 

Che ci crediate o no, extjs layout non gestiscono la proprietà padding molto bene. Mi sono imbattuto in questo prima con i miei layout. Sembra che nel tuo esempio, il margine funzionerà per ottenere ciò che desideri. Un altro modo per ottenere lo stesso risultato è quello di annidare un altro livello in profondità con un layout del bordo e aggiungere regioni est e ovest con lo spazio vuoto per simulare il comportamento del padding.

Answer 2

autoScroll: true è il modo per farlo, ma è necessario avere tutti i vostri layout corretto per farlo funzionare. Prova a inserire layout: 'fit' sul tuo mainPanelContainer e/o sul tuo form.

Answer 3

se si rimuove il modulo nidificato e si inserisce il riempimento sul contenitore di sovraimpressione (il viewport in questo esempio) sembra che si possa ottenere ciò che si sta cercando da ciò che ho capito.

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 © 2013' 
    }] 
}); 

Answer 4

Fondamentalmente è solo bisogno di aggiungere la proprietà AutoScroll come:

autoScroll: true