Cacher is the code snippet organizer for pro developers

var content = '';

content += '<h3>Hinweise</h3>';

content += '<p>Hinweistext</p>';

content += '<style>.hdkInfo-panel p {margin-bottom: 10px; line-height:1.6;} .hdkInfo-panel h4 {margin-top: 15px; margin-bottom: 5px;}</style>';


var hdkInfo = function(config) {
  config = config || {};
};
Ext.extend(hdkInfo, Ext.Component, {
  page: {}, window: {}, grid: {}, tree: {}, panel: {}, combo: {}, config: {}, view: {},

  initialize: function() {
    hdkInfo.addPanel();
  },
  addPanel: function() {
    var fp = Ext.getCmp('modx-resource-main-right');
    fp.add({
      xtype: 'panel',
      anchor: '100%',
      border: false,
      fieldLabel: _('hdkInfo.prevbox'),
      layout: 'form',
      items: [{
          columnWidth: .67,
          xtype: 'panel',
          baseCls: 'hdkInfo-panel',
          bodyStyle: 'padding: 15px 0px;',
          border: false,
          autoHeight: true,
          items: [{
              xtype: 'box',
              html: content,
              style: 'background-color: #fff; font-size:12px; display:block; color:#222;'
            }]
        }]
    });
    fp.doLayout();

  }
});
Ext.reg('hdkinfo', hdkInfo);

hdkInfo = new hdkInfo();

Ext.onReady(function() {
	hdkInfo.initialize();
});