/**
 * @class Ext.chart.navigator.Container
 * @extend Ext.chart.navigator.ContainerBase
 * @xtype chartnavigator
 *
 * The Navigator Container is a component used to lay out the chart and its
 * {@link Ext.chart.navigator.Navigator navigator}, where the navigator is docked
 * to the top/bottom, and the chart fills the rest of the container's space.
 *
 * For example:
 *
 *     @example
 *     Ext.create({
 *         xtype: 'chartnavigator',
 *         renderTo: Ext.getBody(),
 *         width: 600,
 *         height: 400,
 *
 *         chart: {
 *             xtype: 'cartesian',
 *
 *             store: {
 *                 data: (function () {
 *                     var data = [];
 *                     for (var i = 0; i < 360; i++) {
 *                         data.push({
 *                             x: i,
 *                             y: Math.sin(i / 45 * Math.PI)
 *                         });
 *                     }
 *                     return data;
 *                 })()
 *             },
 *             axes: [
 *                 {
 *                     id: 'navigable-axis',
 *
 *                     type: 'numeric',
 *                     position: 'bottom'
 *                 },
 *                 {
 *                     type: 'numeric',
 *                     position: 'left'
 *                 }
 *             ],
 *             series: {
 *                 type: 'line',
 *                 xField: 'x',
 *                 yField: 'y'
 *             }
 *         },
 *
 *         navigator: {
 *             axis: 'navigable-axis'
 *         }
 *     });
 *
 */
 
/**
 * @cfg {Ext.chart.CartesianChart} [chart=null]
 * The chart to make navigable.
 * @accessor
 */
 
/**
 * @cfg {Ext.chart.navigator.Navigator} [navigator={}]
 * @accessor
 */