Ext JS JavaScript DHTML




Hello World Window







/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
  
    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: 'ext-3.0.0/examples/grid/sheldon.xml',
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'ASIN',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Author', mapping: 'ItemAttributes > Author'},
               'Title',
         'Manufacturer',
         'ProductGroup',
         // Detail URL is not part of the column model of the grid
         'DetailPageURL'
           ])
    });
    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
            {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
            {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
            {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
        ],
    sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
    viewConfig: {
      forceFit: true
    },
        height:210,
    split: true,
    region: 'north'
    });
  
  // define a template to use for the detail view
  var bookTplMarkup = [
    'Title: {Title}
',
    'Author: {Author}
',
    'Manufacturer: {Manufacturer}
',
    'Product Group: {ProductGroup}
'
  ];
  var bookTpl = new Ext.Template(bookTplMarkup);
  var ct = new Ext.Panel({
    renderTo: 'binding-example',
    frame: true,
    title: 'Book List',
    width: 540,
    height: 400,
    layout: 'border',
    items: [
      grid,
      {
        id: 'detailPanel',
        region: 'center',
        bodyStyle: {
          background: '#ffffff',
          padding: '7px'
        },
        html: 'Please select a book to see additional details.'
      }
    ]
  })
  grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
    var detailPanel = Ext.getCmp('detailPanel');
    bookTpl.overwrite(detailPanel.body, r.data);
  });
    store.load();
});