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