Ext JS で作る AJAX アプリケーション

                
<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);     

                
Ext.onReady(function(){

  // create the Data Store
  var store = new Ext.data.Store({
  // load using script tags for cross domain, if the data in on the same domain as
  // this page, an HttpProxy would be better
  proxy: new Ext.data.ScriptTagProxy({
    url: 'http://extjs.com/forum/topics-browse-remote.php'
  }),

  // create reader that reads the Topic records
  reader: new Ext.data.JsonReader({
    root: 'topics',
    totalProperty: 'totalCount',
    id: 'threadid',
    fields: [
      'title', 'forumtitle', 'forumid', 'author',
      {name: 'replycount', type: 'int'},
      {name: 'lastpost', mapping: 'lastpost', type: 'date', 
          dateFormat: 'timestamp'},
      'lastposter', 'excerpt'
    ]
  }),

  // turn on remote sorting
  remoteSort: true
});
store.setDefaultSort('lastpost', 'desc');

// pluggable renders
function renderTopic(value, p, record){
  return String.format(
  '<b><a href="http://extjs.com/forum/showthread.php?t={2}" 
      target="_blank">{0}</a></b>
      <a href="http://extjs.com/forum/forumdisplay.php?f={3}" 
      target="_blank">{1} Forum</a>',
    value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), 
                     r.data['lastposter']);
}

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
    id: 'topic',
    header: "Topic",
    dataIndex: 'title',
    width: 420,
    renderer: renderTopic
  },{
    header: "Author",
    dataIndex: 'author',
    width: 100,
    hidden: true
  },{
    header: "Replies",
    dataIndex: 'replycount',
    width: 70,
    align: 'right'
  },{
    id: 'last',
    header: "Last Post",
    dataIndex: 'lastpost',
    width: 150,
    renderer: renderLast
}]);

// by default columns are sortable
cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({
    el:'topic-grid',
    width:700,
    height:500,
    title:'ExtJS.com - Browse Forums',
    store: store,
    cm: cm,
    trackMouseOver:false,
    sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
    loadMask: true,
    viewConfig: {
      forceFit:true,
      enableRowBody:true,
      showPreview:true,
      getRowClass : function(record, rowIndex, p, store){
        if(this.showPreview){
        p.body = '<p>'+record.data.excerpt+'</p>';
          return 'x-grid3-row-expanded';
      }
      return 'x-grid3-row-collapsed';
    }
},
bbar: new Ext.PagingToolbar({
  pageSize: 25,
  store: store,
  displayInfo: true,
  displayMsg: 'Displaying topics {0} - {1} of {2}',
  emptyMsg: "No topics to display",
  items:[
    '-', {
    pressed: true,
    enableToggle:true,
    text: 'Show Preview',
    cls: 'x-btn-text-icon details',
    toggleHandler: toggleDetails
  }]
})
});

// render it
grid.render();

// trigger the data store load
store.load({params:{start:0, limit:25}});

function toggleDetails(btn, pressed) {
    var view = grid.getView();
    view.showPreview = pressed;
    view.refresh();
}
});

                
<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" />