window.widgets.productsGrid = Ext.create "Ext.form.Panel",
  id: 'grid',
  frame: true,
  title: 'Producsts List',
  preventHeader: true,
  bodyPadding: 0,
  layout: 'column',
  fieldDefaults:
    labelAlign: 'left'
    msgTarget: 'side'
  region: 'center',
  flex: 1,
  items: [{
    columnWidth: 0.2
    xtype: 'gridpanel',
    height: 400,
    store: productsListStore
    title: 'List of Products'
    dockedItems: [{
      xtype: 'toolbar',
      dock: 'top',
      items: [
          'Filter'
        ,
          xtype: 'textfield',
          name: 'searchfield',
          id: 'searchfield',
          flex: 1,
          listeners:
            specialkey: (el, e)->
              alert 'Clicked'
        ,
          xtype: 'button'
          text: '»'
          tooltip: 'Filter by Catalog ID'
          #listeners:
          #  click: alert 'Clicked!'
      ]
    }]
    columns: [
      {
        text: 'CAT No.',
        flex: 1,
        sortable: false,
        dataIndex: 'CAT#'
      }
    ],
    }, {
      columnWidth: 0.8,
      margin: '0 0 0 10',
      xtype: 'fieldset',
      title: 'Product details',
      defaults: {
        width: 400,
        labelWidth: 90
      },
      defaultType: 'textfield'
      items: [{
        fieldLable: 'Name',
        name: 'company'
      }, {
        fieldLabel: 'Price',
        name: 'price'
      }]
    }
  ]
  renderTo: document.body


  productsBrowseContainer = Ext.create "Ext.panel.Panel",
    title: 'Browser',
    collapsible: true,
    layout: 'border',
    defaults: {
      collapsible: true,
      split: true,
      bodyStyle: 'padding:0px'
    },
    items: [
      window.widgets.productsBrowse
      window.widgets.productsGrid
    ]
    retenderTo: Ext.getBody()