Basic ExtJS w/ Coffee

by brian428

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-classic/ext-theme-classic-all-debug.css">

CoffeeScript

Ext.onReady( ->

  Ext.create( "Ext.panel.Panel",
    renderTo: Ext.getBody()
    width: 500
    height: 500
    margin: "10 10 10 10"
    itemId: "myOuterPanel"
      
    items: [
            
      xtype: "button"
      itemId: "myAnimateButton"
      text: "Animate"
      margin: "5 5 5 5"
      handler: ->
        panel = Ext.ComponentQuery.query( "#myPanel" )[0]
        height = if panel.getHeight() is 0 then 399 else 0
        width = if panel.getWidth() is 0 then 399 else 0
        
        panel.animate(
          duration: 1000
          to:
            height: height
            width: width
        )
    ,
      xtype: "panel"
      itemId: "myHelloPanel"
      title: "Hello"
      margin: "5 5 5 10"
      width: 400
      height: 400
      html: "<p>World!</p>"
      listeners:
        resize: ( panel ) ->
          panel.setSize( panel.getWidth() + 1, panel.getHeight() + 1 ) if panel.getWidth() is 399
        
    ] 
  )
)