ExtWide

About Fancytree filter extension.

• Status: experimental
• example

Stretch the selection bar to 100% of the container width.

This is done by stretching the title <span> accross the left <ul> limit.

NOTE The skin-win8 and skin-bootstrap currently use the node span for highlighting, so they currently don't work with ext-wide.

Options

• autoResize, type: {boolean}, default: true
  Call wideUpdate() on window.resize events.
  Use this if the container resizes with the window width, maybe because its width is set to x%.
  Note however that this will not recognize size changes if the container is resized by any other means. In this case we have to call tree.wideUpdate() explicitly.

• cheap, type: {boolean}, default: false
  true: use static css only (no performance impact, but may produce unwanted scrollbars).

• margin, type: {object}, default: {left: 3, right: 3}
  Free margins near the selection bar

Events

(n.a.)

Methods

• {void} tree.wideUpdate()
  Recalculate the selection bar width after a container resize.

Example

In addition to jQuery, jQuery UI, and Fancytree, include jquery.fancytree.edit.js:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
  <link href="skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css">
  <script src="js/jquery.fancytree.js" type="text/javascript"></script>
  <script src="js/jquery.fancytree.wide.js" type="text/javascript"></script>

$("#tree").fancytree({
  extensions: ["wide"],
  wide: {
      margin: {left: 5, right: 5}
  },
  ...
});


# Recipes

##### [Howto] ...