crysfel

Ext.grid.Panel.override({
	initComponent	: function(){
		var me = this;
		
		me.callParent();
		
		me.on('scrollershow', function(scroller) {
			if (scroller && scroller.scrollEl) {
				scroller.clearManagedListeners(); 
				scroller.mon(scroller.scrollEl, 'scroll', scroller.onElScroll, scroller); 

crysfel

=Navigating=
    visit('/projects')
    visit(post_comments_path(post))

=Clicking links and buttons=
    click_link('id-of-link')
    click_link('Link Text')
    click_button('Save')
    click('Link Text') # Click either a link or a button
    click('Button Value')

crysfel

<my-panel>
    <h2>Introduction</h2>
    <h1>My custom panel</h1>
    <p>This is the content of the panel, we can add anything we need!</p>
</my-panel>

crysfel

var Panel = Object.create(HTMLElement.prototype); //Step 1
var MyPanel = document.registerElement('my-panel', { //Step 2
  prototype: Panel
});

crysfel

<template>
  <div id="panel">
    <div class="panel-header">
      <div class="panel-buttons">
        <span class="toggle">^</span>
      </div>
      <h1><content select="h1"></content></h1>
    </div>
    <div class="panel-body">
      <content></content>

crysfel

<template>
  <style>
  #panel{
    border-radius: 3px;
    overflow: hidden;
    font-family: 'Arial';
  }
  .panel-header{
    padding: 10px 20px;
    background-color: #1d2939;

crysfel

var host = document.body.createShadowRoot();

host.innerHTML = "<p>I'm a <em>shadow</em> dom!</p>";

crysfel

<audio>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

crysfel

// Grab our template full of slider markup and styles
var tmpl = document.querySelector('template'); //Step 1

// Setup our Shadow DOM and clone the template
Panel.createdCallback = function() {   //Step 2
  var root = this.createShadowRoot(),  //Step 3
      close;
  
  root.appendChild(document.importNode(tmpl.content, true));  //Step 4
};

crysfel

close = root.querySelector('.panel-buttons span.collapse'); //step 1
  
close.addEventListener('click',function(){         //Step 2
    var body = root.querySelector('.panel-body');

    if(body.style.display === 'none'){
      body.style.display = 'block'
    }else{
      body.style.display = 'none';
    }