<script type ="text/javascript" src="lib/ext/ext-base.js"></script>
<script type ="text/javascript" src="lib/ext/ext-all.js"></script>

                
var top = new Ext.FormPanel({
    labelAlign: 'top',
    frame:true,
    title: 'Multi Column, Nested Layouts and Anchoring',
    bodyStyle:'padding:5px 5px 0',
    width: 600,
    items: [{
        layout:'column',
        items:[{
            columnWidth:.5,
            layout: 'form',
            items: [{
                xtype:'textfield',
                fieldLabel: 'First Name',
                name: 'first',
                anchor:'95%'
            }, {
                xtype:'textfield',
                fieldLabel: 'Company',
                name: 'company',
                anchor:'95%'
            }]
        },{
            columnWidth:.5,
            layout: 'form',
            items: [{
            xtype:'textfield',
            fieldLabel: 'Last Name',
            name: 'last',
            anchor:'95%'
        },{
            xtype:'textfield',
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email',
            anchor:'95%'
        }]
    }]
    },{
        xtype:'htmleditor',
        id:'bio',
        fieldLabel:'Biography',
        height:200,
        anchor:'98%'
    }],

        buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});

    top.render(document.body);

                 
var LayoutExample = function(){
// everything in this space is private and only accessible in the HelloWorld block

// define some private variables
var dialog, showBtn;

var toggleTheme = function(){
    Ext.get(document.body, true).toggleClass('xtheme-gray');
};
// return a public interface
return {
    init : function(){
    showBtn = Ext.get('show-dialog-btn');
    // attach to click event
    showBtn.on('click', this.showDialog, this);       
},

showDialog : function(){
    if(!dialog){ // lazy initialize the dialog and only create it once
      dialog = new Ext.LayoutDialog("hello-dlg", { 
      modal:true,
      width:600,
      height:400,
      shadow:true,
      minWidth:300,
      minHeight:300,
      proxyDrag: true,
      west: {
        split:true,
        initialSize: 150,
        minSize: 100,
        maxSize: 250,
        titlebar: true,
        collapsible: true,
        animate: true
      },
      center: {
        autoScroll:true,
        tabPosition: 'top',
        closeOnTab: true,
        alwaysShowTabs: true
      }
  });
  dialog.addKeyListener(27, dialog.hide, dialog);
  dialog.addButton('Submit', dialog.hide, dialog);
  dialog.addButton('Close', dialog.hide, dialog);

  var layout = dialog.getLayout();
  layout.beginUpdate();
  layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
  layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'}));
  // generate some other tabs
  layout.add('center', new Ext.ContentPanel(Ext.id(), {
    autoCreate:true, title: 'Another Tab', background:true}));
  layout.add('center', new Ext.ContentPanel(Ext.id(), {
    autoCreate:true, title: 'Third Tab', closable:true, background:true}));
  layout.endUpdate();
}
dialog.show(showBtn.dom);
}
};
}();

// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);

                
var TreeTest = function(){
// shorthand
  var Tree = Ext.tree;

  return {
    init : function(){
      // yui-ext tree
      var tree = new Tree.TreePanel({
          el:'tree',
          animate:true, 
          autoScroll:true,
          loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
          enableDD:true,
          containerScroll: true,
          dropConfig: {appendOnly:true}
      });

      // add a tree sorter in folder mode
      new Tree.TreeSorter(tree, {folderSort:true});

      // set the root node
      var root = new Tree.AsyncTreeNode({
        text: 'Ext JS', 
        draggable:false, // disable root node dragging
        id:'source'
      });
      tree.setRootNode(root);

      // render the tree
      tree.render();

      root.expand(false, /*no anim*/ false);

      //-------------------------------------------------------------

      // YUI tree            
      var tree2 = new Tree.TreePanel({
          el:'tree2',
          animate:true,
          autoScroll:true,
          loader: new Ext.tree.TreeLoader({
            dataUrl:'get-nodes.php',
            baseParams: {lib:'yui'} // custom http params
          }),
          containerScroll: true,
          enableDD:true,
          dropConfig: {appendOnly:true}
      });

      // add a tree sorter in folder mode
      new Tree.TreeSorter(tree2, {folderSort:true});

      // add the root node
      var root2 = new Tree.AsyncTreeNode({
          text: 'My Files', 
          draggable:false, 
          id:'yui'
      });
      tree2.setRootNode(root2);
      tree2.render();

      root2.expand(false, /*no anim*/ false);
    }
  };
}();

Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);     

                
<script type =”text/javascript”>
Ext.onReady(function(){
  Ext.get('okButton').on('click', function(){
    var msg = Ext.get("msg");
    msg.load({
      url: [server url], // <-- replace with your url
        params: "name=" + Ext.get('name').dom.value,
        text: "Updating..."
    });
    msg.show();
  });
});
</script>
  
<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="okButton" value="OK" />