How to implement form with fixed (non-scrollable) header?


I have a form with detail grid and this grid can contain many items. In such case the form becomes scrollable. When a user scrolls this form down he loses context, so heading part of the form should stay and does not scroll with detail grid. How could this be implemented?


You should set a height of your detail grid to remaining height of outer container by add for example flex: 1 option to config:

  xtype: 'ubdetailgrid',
  flex: 1

In case of grid contains many rows only inner part of grid will be scrolled


More general sample

exports.formDef = {
  	parentConfig: {
      layout: {
            type: "vbox", // let's parent container layout it's inner items vertically
            align: "stretch" // and set items width to 100% of comtainer
    items: [
      // two items below are placed on the top of form one-by-one
      { html: '<h1> This is form header</h1>' },
      { attributeName: "description"},
      // after 2 item we create a container
        flex: 1, //  and set it height to the remaining height of outer container
        autoScroll: true, // and allow it to scroll inner content if need
        items: [ 
          // inside we can place as many elm's as we need - it will be scrolled 
          { attributeName: "text100", xtype: "ubhtmleditor", rows: 20},
          { attributeName: "text2000",  xtype: "textarea"},
          { attributeName: "text2",  xtype: "textarea"  },
          { attributeName: "mi_tr_text100"},
          { xtype: 'label', text: 'aasas'},
          { attributeName: "textN",  xtype: "textarea"},
          { attributeName: "description"}