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


#1

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?


#2

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


#3

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"}
        ]
      }  
	]
}