Ext.namespace('cmv.opslag');

cmv.opslag.Panel = new Ext.Panel({
  region:'east',
  width: '25%',
  id: 'cmvopslags',
  title: 'Opslagstavlen',
  collapsible: true,
  collapseMode:'mini',
  frame: true,
  unstyled: false,
  split: true,
  border: false,
  autoScroll: true,
  layout:'table',
  layoutConfig: {
    columns:2,
    tableAttrs: {
      cellspacing: 5
    }    
  },
  // applied to child components
  defaults: {
    frame:true,
    width:180,
    height: 220
  }
})

cmv.opslag.Store = new Ext.data.JsonStore({
  url: 'json/get-opslag.php',
  autoLoad: {
    scope:cmv.opslag.Panel
  },
  root: 'images',
  id:'cmvopslagstore',
  idProperty: 'id',
  fields:[
  'id','titel',{
    name:'dato',
    type:'date',
    dateFormat: Date.patterns.ISO8601Long
    },'url'
  ],
  listeners:{
    load: {
      fn: function(store, record, operation){
        var pnl = operation.scope;
        store.each(function(record){
          var dato = record.get('dato')!=null?Ext.util.Format.capitalize(record.get('dato').format(Date.patterns.LongDate)):"-";
          pnl.add({
            title:record.get('titel'),
            bbar:[{
              xtype:'tbtext',
              text:dato
            }],
            data:{
              url:record.get('url')
            },
            tpl: new Ext.XTemplate(
              '<ul>',
              '<tpl for=".">',
              '<li class="cmvopslag">',
              '<a href="{url}.pdf" target="_blank"><img src="{url}.gif"></a>',
              '</li>',
              '</tpl>',
              '</ul>'
              )
          })
        })
        pnl.setTitle(pnl.title+", "+store.getCount()+" opslag");
        pnl.doLayout();
      }
    }
  }
})